Tabs automatically resize - can that be prevented?

Question

I have a structure that looks like this: http://peterned.home.xs4all.nl/examples/csslayout1.html - where the middle div resizes to fit the height of the window.

Inside the middle div I have tabs, but upon calling the .tabs() method, the code automatically resizes the tabs to fit the height of the content. I want to prevent that behaviour since I'll be replacing the content of the tabs dynamically and the originally calculated height will be wrong.

I've tried setting the height of the tabs in CSS but it just ignores it.

how can I accomplish this?

* edit *

I've posted code at jsfiddle: http://jsfiddle.net/tmLZS/ from which you can see that the tabs resize themselves (in IE 9 and Chrome 14 under Windows) to the height of their content.

I want to have them be as large as possible given the window size, and have them scroll when content exceeds window size.

How did you set the height of the tabs? I am not aware of the `.tabs()` would calculate the content height. — William Niu, Nov 08 '11 at 22:05
@WilliamNiu, something like `#tabs { height: 100%; }` (which doesn't work) or `#tabs { height: 10em; }` — ekkis, Nov 10 '11 at 01:16

score 2 · Accepted Answer · edited May 23 '17 at 12:24

This is a similar problem as the 100% height/min-height for the content. This post has some good discussions on this topic.

I have fiddled with this issue a few times myself, and have found it very time consuming (and often unfeasible) to resolve this issue with pure CSS. Often what it takes is a line or two of JavaScript to achieve the same effect. For example, for the jsfiddle you provided, all you need to do is to set the height of #tabs to the height of document:

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

See it in action: http://jsfiddle.net/william/tmLZS/3/.

Note that I also changed the box-sizing of #tabs, so borders and paddings are included in the height. You don't have to do this (this property is CSS3), but that means you will need to account for the borders and paddings when calculating the height.

I was afraid you'd say that. but at least I can put it down. a thousand thanks. — ekkis, Nov 11 '11 at 01:53
*shrugs* sometimes i wonder why this seemingly simple issue can be so complicated, too :) — William Niu, Nov 11 '11 at 02:01

Daniel H. Hemmingsen · Answer 2 · 2011-11-24T03:53:45.553

0

Building upon William Nui's code, I did also add some more stuff.

I added a event "listening" for when the user actually resizes his window.

http://jsfiddle.net/tmLZS/30/

Edit with updated code!

http://jsfiddle.net/tmLZS/100/

edited Nov 24 '11 at 03:53

answered Nov 24 '11 at 03:05

Daniel H. Hemmingsen

121
1
3

In other words, this handles the update of the height, every time someone resizes the window. No need for CSS here. (Could properly be done a little better, some checking to prevent unnecessary recalculating. But I'm tired. ;)) – Daniel H. Hemmingsen Nov 24 '11 at 03:13

Tabs automatically resize - can that be prevented?

2 Answers2