jQuery - Cannot dynamically change height of textarea with CSS !important

Question

I am trying to change the height of my textarea. Zurb's Foundation has already defined a height of 5rem !important.

Now, when I try to change my height using jQuery, it doesn't change. I tried:

$('textarea').height('500px')
$('textarea').css('height', '500px', 'important);

and nothing works. The CSS of any other property does change with .css(). What can I do?

Is the already defined style `5rem !important` an inline style ? — Sachin Jain, Jun 24 '14 at 04:06
Don't see a problem:http://jsfiddle.net/U75uW/ Can you check if some other style definition is over ridding your jQuery style — Nikhil Talreja, Jun 24 '14 at 04:07
`.css('height', '500px', '!important');` - missing quotes in important — Shaunak D, Jun 24 '14 at 04:09
@NikhilTalreja, your example doesn't have a predefined CSS! My problem is that when you do define the CSS, then it does not work — Kousha, Jun 24 '14 at 04:11
@ShaunakD, no you do not need the `!` when you use the jQuery: `.css(name, value, priority)`. — Kousha, Jun 24 '14 at 04:12

score 1 · Answer 1 · edited Jun 20 '20 at 09:12

If 5rem !important is set as inline style then it has the highest precedence then you can not override it by any CSS rule. You have to update the inline style then. Try this:

$('textarea').get(0).style.setProperty('height','200px','important');

From the MDN Docs

CSSStyleDeclaration.setProperty()

No return. Example: styleObj.setProperty('color', 'red', 'important')

Update:

Please read this Answer: Apply !important CSS style using jQuery You will find really useful info there..

Happy Coding!!

score 0 · Answer 2 · answered Jun 24 '14 at 04:08

0

$('textarea').attr('style', 'height: 500px !important');

answered Jun 24 '14 at 04:08

RGS

5,131
6
37
65

Alright this worked thanks! But why can't I just use `.css()`?? – Kousha Jun 24 '14 at 04:10
1

I won't prefer doing this because it will over-ride my entire inline style. – Sachin Jain Jun 24 '14 at 04:12

score 0 · Accepted Answer · edited May 23 '17 at 12:10

0

Demo

You can use css - but it does not support Priority field.

Following is the correct syntax:

$('textarea').css('height','500px')

Or if you need important, you can use inline style or a class.

Demo : Add Class

.areaHeight{
    height : 500px !important;
}

$('textarea').addClass('areaHeight')

There are other not-so-viable options : cssText

edited May 23 '17 at 12:10

Community

1
1

answered Jun 24 '14 at 04:10

Shaunak D

20,588
10
46
79

score 0 · Answer 4 · edited Jun 24 '14 at 04:12

0

try this

<textarea id="textareaid"> </textarea>
$('#textareaid').css('height', '500px');

edited Jun 24 '14 at 04:12

Rajaprabhu Aravindasamy

66,513
17
101
130

answered Jun 24 '14 at 04:11

krishna

98
5

Welcome to SO!! I see this is a new answer. Please try to read the existing answers and exact question. Your answer does not answer the OP's question. – Sachin Jain Jun 24 '14 at 04:18

score 0 · Answer 5 · answered Jun 24 '14 at 04:53

0

Try using anyone of these to set the height

Type:  1
 $("textareaid").height("600")

Type:  2
 $("textareaid").css("height","400px")

Make sure ur script is called after the dom element gets created

answered Jun 24 '14 at 04:53

Unknownman

473
3
9

jQuery - Cannot dynamically change height of textarea with CSS !important

5 Answers5