Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 93
  • Last Modified:

How to force set he height of an element using jquery

HI,
I am using the following code to set the height of the element in jquery :
                   $('.cke_contents').css('height', middleHeight - toolbarHeight);

But the issue is there is already a css rule which sets height to some 100px !important because of this important thing my changes to height using .css function are not getting applied. So one way out of this i think is somehow add !important to the .css function ??

Or there is any other alternative way ?

Thanks
0
Rohit Bajaj
Asked:
Rohit Bajaj
  • 2
  • 2
2 Solutions
 
Russ SuterCommented:
You would need to use the "cssText" argument for this instead of altering height directly. It will look like this:
$('.cke_contents').css('cssText', "height: ' + (middleHeight - toolbarHeight) + 'px !important;');

Open in new window

0
 
Kim WalkerWeb Programmer/TechnicianCommented:
What are the values for middleHeight and toolbarHeight. If these are string values with unit indicators, the calculation would generate an unexpected result. Have you checked that the calculation is working properly?
console.log('Calculated height = ' + (middleHeight - toobarHeight) );

Open in new window

0
 
Rohit BajajAuthor Commented:
Hi,
the values are just numbers like 300 or 100.
Also i read up that cssText clears everything else... so if any other styling info was there on the element it will clear that up..whereas in my case i only want to adjust the height
0
 
Kim WalkerWeb Programmer/TechnicianCommented:
Are you including a unit indicator as in Russ Suter's suggested code (px)?

cssText replaces the value of the style property of the element. It has no impact on the styles applied by embedded or remote stylesheets unless it directly overrides a specific property. But it will replace any previously defined inline styles. If you have other inline styles you wish to retain, stick with the .css('height',...) method. But be sure to include a unit designation.
 $('.cke_contents').css('height', (middleHeight - toolbarHeight)+'px');

Open in new window

1
 
Russ SuterCommented:
Indeed, my test confirms that what Kim posted should work.
0

Featured Post

Become an Android App Developer

Ready to kick start your career in 2018? Learn how to build an Android app in January’s Course of the Month and open the door to new opportunities.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now