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

What is the best way to ensure a table is responsive while maintaining a fixed header? This would involve the table scrolling when it reaches the maximum viewpoint, while also keeping

Can anyone help me create a responsive table with a fixed header that scrolls when it reaches the maximum viewpoint without scrolling the entire page? I've tried using box-sizing: border-box; and overflow-x:scroll; but it didn't work. Any suggest ...

javascripthtmlcss

Confirming class Value with Selenium IDE

I am looking to confirm the value of a specific class within an HTML code using Selenium IDE. Specifically, I want to retrieve the value of: data-val located under the class named tgl. In my example, this value can be either 0 or 1. How can I achieve thi ...

cssclassseleniumxpathselenium-ide

Issue with background opacity not functioning properly in Internet Explorer 8

I am facing an issue with displaying 2 images in IE8 and IE9. Below is the code snippet causing the problem: .ui-widget-content { border: 0px solid #aaaaaa/*{borderColorContent}*/; background: rgba(0, 0, 0, 0.1) ; /*{bgColorContent}*/ url(images ...

javascriptjquerycssinternet-explorer-8

Preventing default CSS styles in ASP.NET: A step-by-step guide

When working with multiple CSS files for different themes, I noticed that the Login Page is calling one extra CSS file. However, during runtime, some classes from the default CSS are still being used. How can I resolve this issue? ...

asp.netcss

Specify the width of one element to always be the same as the width of another

One common challenge is maintaining the width of one element equal to another when the page loads (refer to link description here). However, it becomes tricky when the side width changes, such as resizing the browser window. Is there a way to dynamically ...

javascriptjqueryhtmlcsswidth

Unable to use addEventListener on media queries exceeding 768px

When testing the site on Firefox 49 and Chrome 63, I encountered the same issue. Clicking on each card worked fine on iPhone4, Galaxy 5, and iPhone 8 using Chrome. However, after switching orientations from 640px to 320px portrait view, the top card would ...

javascripthtml

Overlapping Bootstrap cards conundrum

Does anyone know how to align Bootstrap cards and make them responsive? I have them centered, but they are overlapping and sticking to the left side. This is for email development with a maximum width of 680px. Any assistance would be greatly appreciated! ...

htmlcsscard

Ensuring the image is properly sized to fit the screen and enabling the default zoom functionality

I am looking to achieve a specific behavior with an image, where it fits the viewport while maintaining its aspect ratio and allowing for zooming similar to how Chrome or Firefox handle local images. Here are the details of my project: The image I have is ...

javascripthtmlcssangularimage

What is the best way to showcase saved HTML content within an HTML page?

I have some HTML data that was saved from a text editor, <p style=\"font-size: 14px;text-align: justify;\"> <a href=\"https://www.xpertdox.com/disease-description/Chronic%20Kidney%20Disease\" style=\"background-color: tr ...

javascripthtmlangularjsdata-bindinginterpolation

What is the best way to manage two buttons within a single form?

<input type="submit" value="" id="button1"/> <input type="submit" value="" id="button2" /> In a single form, I have two buttons. Only one button appears at a time on the client side thanks to jQuery magic. The issue is that when using the &ap ...

jqueryhtmlformsbutton

Switching Tabs When a Button is Clicked

I am currently using a guide from the link provided to learn how to create tabs: http://www.w3schools.com/howto/howto_js_tabs.asp. function openTab(evt, tabName) { var i, tabcontent, tablinks; tabcontent = document.getElementsByClass ...

javascripthtml

Activate a specific component of hover effect within multiple components generated by the `v-for` loop

Hey there! I'm currently facing a CSS challenge related to Vue. Let's say I want to display multiple components using v-for, and I want to add a hover effect to each component individually. The goal is to have the hover effect only apply to the c ...

cssvue.js

Preserve selected option in select box after page refresh in JSP

I'm working on a jsp page that contains a simple select html element. Right now, when I select an option and click the Wyswietl button, the page refreshes, the table data is refreshed, but the selected option resets to default... How can I make it sta ...

javascriptjqueryhtmljsp

Multiple buttons in a single field

I am attempting to replace a Dropdown list with a series of buttons that will streamline the choices previously displayed by the dropdown list. Specifically, we are using graphic png files for the types of buttons. We experimented with checkboxing and ra ...

phpjavascriptmysqlcsswebforms

Tips on how to showcase various information in distinct tabs using VueJS

I am currently working on a website project utilizing the VueJS framework and Vuetify template. My goal is to showcase different content under separate tabs, however, I'm encountering an issue where the same content is being displayed in all three tab ...

javascripthtmlvue.jstabsvuetify.js

What is the simplest way to shift an icon to the right in the header of an Expansion panel using Vuetify

After implementing the template from this example: https://vuetifyjs.com/en/components/expansion-panels/#usage I am facing an issue where the header icon is stuck to the title Even applying "float: right;" does not seem to resolve it Has anyone els ...

cssvue.jsvuetify.js

Having trouble with an AJAX request to display a template in Flask

Imagine having two radio buttons labeled 1 and 2, along with some text at the bottom of a webpage. Initially, the text value is set to -1 and no radio buttons are selected. If one of the radio buttons is clicked, the text value should change to either 1 or ...

javascriptpythonjqueryhtmlflask

How can I link two separate webpages upon submitting a form with a single click?

Here is a snippet of my code: <form action="register.php" method="post"> <input type="text" name="uname"> <input type="submit" > </form> Within the register.php file, there are codes for connecting to a database. I am looking ...

javascriptphphtml

Are user message templates available for use with Twitter Bootstrap?

I am interested in implementing Twitter Bootstrap into my website design. While it looks amazing, I now need to incorporate user messages (similar to those found on forums or Twitter). These messages should include short text, submission time, user image, ...

csstwitter-bootstrapweb

Ensure that the form is submitted when a checkbox is clicked, while also maintaining the native browser

My form contains a text input field and a checkbox. The text input must not be left empty when the form is submitted, which is why the required attribute is used. I want the form to be submitted every time the checkbox is clicked, while still maintaining ...

javascripthtmlreactjs