Search jQuery

jQuery Forum

Height of JQuery UI Tab Content Panel

in Using jQuery UI • 13 years ago

How can one get the height of the content area in a JQuery UI tabbed panel? $('.ui-tabs-panel').height() clearly returns the height of the content area + the height of the tabs. I am assuming there must be an easy way to get this dimension? So far my searching online is not turning that answer up.

Any suggestions would be most appreciated!

Chris

Replies(7)

fontzter

Re: Height of JQuery UI Tab Content Panel

13 years ago

Hi Chris,

Your code will return the height of the panel, with one caveat...since you are using a class selector it is going to return the height of the the first element found on the page with that class.

If something other than the first tab panel happens to be active it will return zero because the first panel is hidden and has no height.

If you have more than on set of tabs on the page, it will get the first one.

You should specify a better selector like this:

$("#whateverYourMainTabElementIs").find(".ui-tabs-panel:visible").height();

Hth,

Dave

cpdiehl

Re: Re: Height of JQuery UI Tab Content Panel

13 years ago

Hi Dave,

Thanks for your reply. The dimension that your selector returns provides the height of the area where the content resides plus the height of the tab area. In short, it provides the height of the entire tabbed panel. What I'm trying to find out is how I can query for the height of the content area only. Assuming that is possible...

Chris

fontzter

Re: Height of JQuery UI Tab Content Panel

13 years ago

Maybe there is something else going on with your css. See this example using the code I provided above: http://jsbin.com/emera3

Hth,

Dave

cpdiehl

Re: Height of JQuery UI Tab Content Panel

13 years ago

Dave,

Thanks so much for sending along an example! I think I discovered the problem. Since I want the tab content panels to span the available display area, I was doing the following.

var winWidth = $(window).width();

var winHeight = $(window).height();

var padding = Math.min(Math.floor(0.05 * winWidth), Math.floor(0.05 * winHeight));

var tabWidth = winWidth - padding;

var tabHeight = winHeight - padding;

$('#tabs').height(tabHeight);

Prior to making that last call, the command you suggested does indeed return the height of the tab content area. After making the above call, the call you suggested no longer yields the tab content area height. Instead it is the height of the entire tab.

I am new to Javascript and CSS. I've read parts of the "Javascript: The Missing Manual" and "CSS: The Missing Manual" but clearly I don't understand how to refer to the different attributes of the tab panel and set them.

If I want to get the content area to span the display area, how should I be setting the dimensions of the content area?

Do you have any particular references you'd recommend for learning how to refer to the different attributes of JQuery tabs?

Thanks again for your help Dave.

Chris

cpdiehl

Re: Re: Height of JQuery UI Tab Content Panel

13 years ago

Dave,

Try the following with the example you provided. I added the following code to the head of the html.

$(function(){

var winHeight = $(window).height();

var tabHeight = winHeight - 10;

$('#tabs').height(tabHeight);

var contentPanelHeight = $("#tabs").find(".ui-tabs-panel:visible").height();

console.log(contentPanelHeight);

});

</script>

Here my goal was to set the height of the tab panel such that it basically fills the screen. That works fine. Then I wanted to get the height of the content area inside the tab. Using the command you suggested, I get only the height of the content present in the panel (102px), not the height of the overall content panel.

Hopefully this will make the issue much more concrete.

I've been trying all sorts of approaches and coming up empty-handed still. Very frustrating...

Chris

cpdiehl

Re: Height of JQuery UI Tab Content Panel

13 years ago

Dave,

I went back and added the above code to your example on JSBin. Didn't realize I code add code myself. Very cool!

Here's the link to my version: http://jsbin.com/emera3/2

Notice when you press the button to get the dimensions that the height is reported as 102. Clearly the content panel is much larger.

Chris

fontzter

Re: Height of JQuery UI Tab Content Panel

13 years ago

Chris,

Your code is setting the height of the div (id=tabs) that contains the ul list of tabs and all the tab panels. It does not set the height of any individual panel. The panels themselves stay whatever height they are; it is just their container that is sized. I added some code to the jsbin page to give you an idea of how to make the tabs fill the page. It is quick and not perfect and you would need to account for padding, margins, border, etc. to get it perfect. If you use firefox you can use a tool called firebug that will let you see and tweak the height of all the elements on a page. Optionally, there is a bookmarklet that will work in almost any major browser: http://www.westciv.com/xray/xray_more.html

http://jsbin.com/emera3/4

Hth,

Dave

Top Reply

Response title

Attachments

jQuery Forum

Height of JQuery UI Tab Content Panel

Replies(7)

Re: Height of JQuery UI Tab Content Panel

Re: Re: Height of JQuery UI Tab Content Panel

Re: Height of JQuery UI Tab Content Panel

Re: Height of JQuery UI Tab Content Panel

Re: Re: Height of JQuery UI Tab Content Panel

Re: Height of JQuery UI Tab Content Panel

Re: Height of JQuery UI Tab Content Panel

Statistics

Tags

Actions

Related Posts