How to implement a textarea responsibly?

Asked

Viewed 3,248 times

8

I want to use a <textarea>, but instead of using rows="4" cols="100", wanted to wear something like this: style="width: 80%" so that the layout is responsive. But since this does not work, IE, use the size to 80% but is not Responsive, how can I solve the problem? Note: I am using a framework that came in the template.

Follow the example: http://jsfiddle.net/ndQKL/1/

Attention, jsfiddle.net makes the textarea stay Responsive. Applying to a blank page is not.

javascript html5 css3 responsive-layout

  • Post your code if possible on jsfiddle.net

  • 2

    Look, it does work. There must be some other mistake you’re making. Edited: I saw it here. It’s working. The only thing missing is to use media queries to define the breaking points, if you really want different points. What you understand as Responsive?

  • already edited the post

  • is Responsive due to jsfiddle.net, but if you try to apply in a blank window it is not.

  • Ah, your problem is that you might be using a CSS framework, like Twitter boostrap, but you’re not correctly overwriting CSS. Simple answer. Confirm that you are using a framework.

  • yes, I’m using a framework

  • Change the question and put the framework you are using. If possible, link your jsfiddle to a standard CSS of the framework you are using. This way we’ll see exactly what problem is past. Your solution is probably just to improve the specificity of the CSS selector

  • Responsive is the size of the textarea to edit depending on the window size.

  • Responsive typically refers to layouts that "work" on various screen sizes (as opposed to needing horizontal scrolling, getting huge margins or having different pages for mobile phones).

Show 4 more comments

4 answers

8


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>

2

This error occurs because, when using a CSS framwork 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 enough specificity.

The code posted so far gives no exact idea where the problem is, but adjusting the specificity of the selector and overriding the pattern of your 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, to add after the width: 80% one !important or prefix the selector with an ID element.

textarea {
  width: 80% !important; /* Idealmente !important deve ser evitado */
}

In the case of the other solution

#algumid textarea {
   width: 80%;
}

Specificity of CSS

A quick help on this can be seen at http://www.maujor.com/tutorial/especificidade.php

CALCULATIONS:

1°. -) Count the number (quantity) of id attributes in the selector;

2°. -) Count the number (quantity) of class attributes in selector;

3°. -) Count the number (quantity) HTML tag in selector;

4°. -) Write the numbers obtained, from left to right order in which they were raised (id,class,tag).

If there is a tie in the score it is worth the cascade effect the last rule declared prevails.

There are other details besides about selector specificity for tiebreaker criteria

  • Who gave -1 can explain why?

0

I advise you to always do styling in style file (.css, .scss, etc) and not inline or incorporated.

Try it like this:

  1. Remove the style that is inline from the textarea;
  2. Use this css:
#desc_pt{
    width: 80% !important;
}

0

The style application to the textarea tag is correct. That’s why it works in Fiddler. If it doesn’t work on your page, it means there are other styles that are overriding this.

To find out what’s going on, the simplest thing is to open your page in Chrome. Install the Developer Tools if necessary. Then right-click on your textarea, and choose Inspect Element, and Developer Tools open. On the right side has the Styles panel, and then you can see what styles are being applied to this tag, and why its tag does not work as you want.

Browser other questions tagged javascript html5 css3 responsive-layout

You are not signed in. Login or sign up in order to post.