Tips for successfully using `cols=""` within a grid container alongside a textarea

It seems that both Chrome and Firefox are not following the cols attribute on textarea elements within a grid container:

.grid { display: grid; }

textarea:not([cols]) { width: 100%; }
<h2>Not in a grid container:</h2>

<div>
  <textarea cols="10" rows="6">some dummy text</textarea>
  <textarea>some other text</textarea>
</div>

<h2>In a grid container:</h2>

<div class="grid">
  <textarea cols="10" rows="6">some dummy text</textarea>
  <textarea>some other text</textarea>
</div>

The rows attribute is working as expected.

I am looking for a solution where a texarea respects the cols when it's placed inside a grid container. If cols is not defined, it should take up 100% of the available width.

htmlcsstextareacss-grid

Answer №1

To resolve this issue, you must ensure that a block element is the parent element.

.grid {
  display: grid;
}

textarea:not([cols]) {
  width: 100%;
}
<h2>Not in a grid container:</h2>

<div>
  <textarea cols="10" rows="6">some dummy text</textarea>
  <textarea>some other text</textarea>
</div>

<h2>In a grid container:</h2>

<div class="grid">
  <div>
    <textarea cols="10" rows="10">some dummy text</textarea>
  </div>
  <textarea>some other text</textarea>
</div>

Answer №2

There seems to be a problem with the alignment causing the textarea to stretch by default. You can resolve this issue by applying margin auto on the right side.

.grid { display: grid; }

textarea:not([cols]) { width: 100%; }

textarea {
  margin-right:auto;
}
<h2>When not in a grid container:</h2>

<div>
  <textarea cols="10" rows="6">some dummy text</textarea>
  <textarea>some other text</textarea>
</div>

<h2>When in a grid container:</h2>

<div class="grid">
  <textarea cols="10" rows="6">some dummy text</textarea>
  <textarea>some other text</textarea>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Enter the variable into the parameter

I'm working with some Javascript code: document.getElementById("Grid").style.gridTemplateRows = "repeat(3, 2fr)"; I'm trying to insert a variable as an argument to modify my CSS style. When I attempt the following: "repe ...

javascriptcssdatagridtemplatecolumn

Delete a table row based on the values of checkboxes using Jquery

I've successfully generated an array from values selected in an HTML form using checkboxes. Is there a way to pass these selected checkbox values to jQuery and utilize the code $('tr#myTableRow').remove(); for each value in the array submit ...

jqueryhtmlforms

Building dynamic input forms within Angular2

In order to customize the form for each guest, I aim to prompt users to provide their name, grade, and age for every guest they wish to invite. Initially, I inquire about the number of guests they plan to have. Subsequently, I intend to present a tailored ...

htmlangularionic-framework

Challenges arise when using two side-by divs with a 100% height

Caution: This page may include NSFW images. I am attempting to set the left div to a width of 300px and have the right one fill the remaining space on the page. After finally getting them to sit side by side, I encountered some strange height issues due ...

cssheightcss-float

Is CSS Transition smoothly easing in, but not out?

On the image gallery of this website , I have applied transitions to the images, where they ease in (fade in), but revert back to their original state instantly when the mouse moves off the image. Is there a way to make the transition reverse when the mo ...

htmlcss

Adjust the size of the container DIV based on the content within the child DIV

I have been searching for a solution to my question without success. Here is the issue: I have a DIV that acts as a container for a Post in my project. Inside this post are classes for the poster avatar, name, timestamp, text, and more. The problem arise ...

htmlcsssize

How can we style the <a> link once it has been downloaded?

Is there a way to change the color of a download link after it has been clicked on? I've attempted using the visited attribute, but it only seems to work with regular links and not with download documents: Appreciate any help ...

javascripthtmlcssreactjs

Determining the cursor location within a character in a div that is content editable using AngularJS

I am facing challenges with obtaining the cursor caret position within a contenteditable div. Currently, I am utilizing the following function : onBlurArea (field, ev) { ev.preventDefault() const editable = ev.target.childNodes[1].childNodes[2] ...

javascripthtmlangularjs

Arranging divs with Bootstrap version 4

Is it necessary to specify the order for each screen size breakpoint when displaying 2 divs in different orders based on the screen size? <div class="order-xs-2 order-sm-2 order-md-2 order-lg-1 order-xl-1"> <div class="order-xs-1 order-sm-1 order ...

htmlbootstrap-4

Creating a Unique CSS Grid Border with Custom Images

I have a client project using nextjs and the design calls for a component with a custom border on a responsive CSS grid. I've successfully created the CSS grid with all the necessary content, but I'm struggling to add the required border as per t ...

htmlcssnext.jscss-grid

Animating content through CSS and jQuery to reveal its unfolding effect

Just stumbled upon the amazing quote-expansion animation in the OSX Mail app and I am completely impressed. I am on a mission to bring that same magic to the web (or at least close to it), but unsure if anyone has done something similar yet. A couple of ...

javascriptjquerycss

Tips for rearranging table columns using drag and drop in react js

I have been experimenting with various libraries to create a drag-and-drop feature for changing table columns order. Here is my current implementation: import React, { useState } from 'react'; import './list_de_tournees.css' const Table ...

javascripthtmlreactjshtml-tabledrag-and-drop

Using AngularJS, I can bind the ng-model directive to asynchronously update and retrieve data from

I am currently working with Angular to develop a preferences page. Essentially, I have a field in a mysql table on my server which I want to connect my textbox to using ng-model through an asynchronous xhr request for setting and fetching data. I attempt ...

javascripthtmlangularjsasynchronous

Maintain the previous droppable positioning after refreshing the page

I am encountering an issue with the .droppable event. I have set up two sections where I can move elements, but every time the page is refreshed, the positioning of the elements reverts to the initial position. How can I maintain the last positioning of th ...

javascriptjqueryhtmlcssdroppable

Utilize Angular2's input type number without the option for decimal values

Is there a way to prevent decimals from being entered in number inputs for Angular 2? Instead of using patterns or constraints that only invalidate the field but still allow typing, what is the proper approach? Would manually checking keystrokes with the ...

javascripthtmlinputangular

Painting Magic: Exploring the World of Canvas Zoom and Moves

I'm having trouble implementing zoom and pan functionality for this particular canvas drawing. While there are examples available for images, my case is different since I am not working with images. Any tips or suggestions on which libraries to use wo ...

javascriptjqueryhtmlcanvashtml5-canvas

What is the best way to implement CSS styles from a parent component?

Within a React component using Emotion, we have a component called OtherComponent: OtherComponent: ... return <div css={otherComponentStyles}> <div className='something'> </div> </div> There is also another comp ...

cssreactjsnext.jsemotion

When the JavaFX ComboBox drop-down opens in an upwards direction, the border appears incorrectly

While working with Java 8, I encountered an issue with the "javafx.scene.control.ComboBox" where if it doesn't have enough room below, it pops up instead. Strangely, the border styling of the elements still behaves as if it should pop down. Is there ...

cssjavafxcomboboxstyling

Develop an onclick function with an href attribute

I am interested in transforming links into AJAX versions whenever possible. To achieve this, I plan to implement a function called replaceLinks that will add an onClick handler to each link on the page and trigger ajaxPageWSM(href). This is what I currentl ...

javascriptjqueryhtml

The appearance of Bootstrap-Navbar is altered when viewed on a mobile device

After creating a website that was compatible with both web and mobile devices, I encountered an issue where the navbar would not collapse on my smartphone. However, when I resized the browser window to match the size of the smartphone screen, it worked per ...

javascriptjqueryhtmlcsstwitter-bootstrap