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
– Sachin Jain, Commented Jun 24, 2014 at 4:06
Don't see a problem:jsfiddle.net/U75uW Can you check if some other style definition is over ridding your jQuery style — Nikhil Talreja
– Nikhil Talreja, Commented Jun 24, 2014 at 4:07
.css('height', '500px', '!important'); - missing quotes in important — Shaunak D
– Shaunak D, Commented Jun 24, 2014 at 4:09
@ShaunakD, no you do not need the ! when you use the jQuery: .css(name, value, priority). — Kousha
– Kousha, Commented Jun 24, 2014 at 4:12

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

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!!

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jun 24, 2014 at 4:09

Sachin Jain

21.9k34 gold badges113 silver badges177 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 12:10:53Z

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, 2017 at 12:10

CommunityBot

11 silver badge

answered Jun 24, 2014 at 4:10

Shaunak D

20.7k10 gold badges48 silver badges79 bronze badges

Comments

RGS · Accepted Answer · 2014-06-24 04:08:35Z

0

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

answered Jun 24, 2014 at 4:08

RGS

5,2217 gold badges44 silver badges69 bronze badges

2 Comments

Kousha Over a year ago

Alright this worked thanks! But why can't I just use .css()??

Sachin Jain Over a year ago

I won't prefer doing this because it will over-ride my entire inline style.

Rajaprabhu Aravindasamy · Accepted Answer · 2014-06-24 04:12:15Z

0

try this

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

edited Jun 24, 2014 at 4:12

Rajaprabhu Aravindasamy

67.2k17 gold badges107 silver badges133 bronze badges

answered Jun 24, 2014 at 4:11

krishna

985 bronze badges

1 Comment

Sachin Jain Over a year ago

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.

Unknownman · Accepted Answer · 2014-06-24 04:53:24Z

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, 2014 at 4:53

Unknownman

4833 silver badges9 bronze badges

Collectives™ on Stack Overflow

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

5 Answers 5

Comments

Comments

2 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related