Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

How to force set he height of an element using jquery

Posted on 2016-10-02
5
Medium Priority
?
88 Views
Last Modified: 2016-10-14
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
Comment
Question by:Rohit Bajaj
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
5 Comments
 
LVL 20

Accepted Solution

by:
Russ Suter earned 1400 total points
ID: 41825478
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
 
LVL 22

Expert Comment

by:Kim Walker
ID: 41825688
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
 

Author Comment

by:Rohit Bajaj
ID: 41831404
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
 
LVL 22

Assisted Solution

by:Kim Walker
Kim Walker earned 600 total points
ID: 41832650
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
 
LVL 20

Expert Comment

by:Russ Suter
ID: 41832792
Indeed, my test confirms that what Kim posted should work.
0

Featured Post

Enroll in October's Free Course of the Month

Do you work with and analyze data? Enroll in October's Course of the Month for 7+ hours of SQL training, allowing you to quickly and efficiently store or retrieve data. It's free for Premium Members, Team Accounts, and Qualified Experts!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

604 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question