I want to use a <textarea> , but instead of using rows="4" cols="100" , I wanted to use something like this: style="width: 80%" to make the layout responsive. But since this does not work, that is, use the size at 80% but do not stay responsive, how can I solve the problem? Note: I'm using a framework that came in the template.
Follow the example: link
Attention, jsfiddle.net makes textarea responsive. If you apply to a blank page it will not be.
I do so (Using Bootstrap):
textarea {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
}<div class="span9">
<textarea></textarea>
</div>This error occurs because when using a CSS framework such as Twitter boostrap, such a framework specifies the width and height of elements such as text and textarea.
In this case, after applying your change with CSS, you should use an inspector such as Firebug or DevTools to see if the CSS selector has sufficient specificity.
The code posted so far does not give an accurate idea of where the problem is, but adjusting the selector specificity and overriding the default CSS library will solve your problem.
Two simpler ways to increase specificity is, for the class that your textarea has or the textarea tag itself, add after width: 80% a !important or prefix the selector with an element with ID.
textarea {
width: 80% !important; /* Idealmente !important deve ser evitado */
}
In case of another solution
#algumid textarea {
width: 80%;
}
Quick help on this can be found at link
CALCULATIONS:
1 ° .-) Count the number (quantity) id attributes not selector;
2 ° .-) Count the number (quantity) of class attributes in the selector;
3 ° .-) Count the number (quantity) HTML tags in the selector;
4 ° .-) Write the numbers obtained, from left to right and in the same order in which they were raised (id, class, tag).
If there is a tie in the score the cascade effect is the last declared rule prevails.
There are further details on selector specificity for tie-break criteria
The application of the style to the textarea tag is correct. That's why it works on Fiddler. If it does not work on your page, it means that there are other styles that are overlapping this.
To find out what's going on, the simplest thing is to open your page in Chrome. Install Developer Tools if needed. Then right-click on your textarea, and choose Inspect Element, and Developer Tools opens. On the right side you have the Styles panel, and you can see what styles are applied to this tag, and why your tag does not work as you want.
I would advise you to always style in the style file ( .css , .scss , etc) and not inline or embedded.
Try this:
#desc_pt{
width: 80% !important;
}