jQuery tabs: panel covers tabs at 100% height

Question

I'm trying to use the tabs widgets of jQuery-UI having panels content to extend to the whole available space.

Here's a simplified version of what I've got so far: http://jsfiddle.net/MhEEH/3/

You'll see that the green panel content of #tab-1 just covers the whole page, instead of just the panel space, when I use the following CSS:

 #tab-1 {
    background: green;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

I could use "top: 27px;" to fix that, but this would collide with two things:

1. If I change the tabs "theme", the height (27px) could possibly change
2. If I have a lot of tabs, I'll have a second row below the first row. So my panel content would then cover this second row...

A clean & short solution would be fine.

JavaScript is acceptable, while a (clean!) CSS-only solution would be preferable...

-- Regards,

Stefan

Ageold

Answer 1

Instead of using your own CSS, use jQuery UI's built-in feature.

var tabs = $("#tabs").tabs({heightStyle: "fill"});

From the API documentation:

heightStyle

Type: String

Default: "content"

Controls the height of the tabs widget and each panel. Possible values:

• "auto": All panels will be set to the height of the tallest panel.
• "fill": Expand to the available height based on the tabs' parent height.
• "content": Each panel will be only as tall as its content.

Although you are right that a plain CSS solution would be very nice, since you are using JavaScript anyway to build the tab functionality, it will be best to use the existing capabilities of the script you already have.

---

UPDATE:

• See http://jsfiddle.net/MhEEH/45/ for the simplest full example. Note that it does not need any CSS position rules.

• You need to use http://benalman.com/projects/jquery-resize-plugin/ (or similar) to watch the parent for size changes. Browsers only fire the resize event on the window itself by default, but this plugin extends support for that event to arbitrary elements being resized.

Alteration

Seems to work! Minor bugs, but working... I modified one of the fiddles to use the heightStyle-Option. Actually it seems, that one needs to add a dummy-div as parent that fills the whole space. Also it does not update when just the frame is resized (but reacts to window resizing). Thanks a lot! -- Here's the fiddle: jsfiddle.net/MhEEH/42 – Ageold

I would be really glad, if you would also have such a simple solution for the frame resize problem... – Ageold

Use benalman.com/projects/jquery-resize-plugin to watch the parent for size changes. – Alteration

This worked! However, the resize function is not called unless the user manually resizes, so this doesn't work until then (which is not acceptable). I have tried putting the script many other places, (document.ready(),,,etc) but only works in resize(). Is there any place to set the style and refresh other than the resize? – Markmarkdown

Answer 2

I tried putting the tabs into a tab container and with the following styles

#tab-container {position:relative; min-height:100%;}

and it seemed to work:

http://jsfiddle.net/MhEEH/8/

Decorator

Sorry Pete, same problem as the other two answers: The panel content (tab container) continues just invisible below the screen. Just removed "overflow: hidden" => jsfiddle.net/MhEEH/10 - so you can see, what I mean. – Ageold

ah I was wondering if there was some sort of overflow hidden property stopping it showing. What you will need to do is resize it using jquery - find the height of the window, then the tab list and make the height of the tab-container the difference (unless the tab is larger, then make the height the size of the largest tab) – Decorator

As now already 3 people failed solving it using CSS, a JavaScript-approach seems to make more and more sense. Do you know which event hook I should use? I also wonder if this is a 'bug' in the jquery-ui-implementation. There should be at least some build in support for that kind of application of tabs... – Ageold

I've never used the inbuilt ui tabs - I have always gone with the coda slider as this handles all the resizing issues for you – Decorator

Well, had a quick look at the "coda slider". Seems to be an option. Will try that... – Ageold

Answer 3

Is this what you're after?

http://jsfiddle.net/MhEEH/5/

html, body {
    height: 100%;   
}
#tabs {
    position: absolute;
    top: 0;
    bottom:0;
    left: 0;
    right: 0;
}
#tab-1 {
    background: green;
    height: 100%;
}

Handmedown

Unfortunately this causes vertical scrolling and to have the panel content exceed the screen height. Had this approach at the beginning, but that's not working for me... But thanks anyway for giving it a try. – Ageold

Answer 4

I just tried to use this:

#tab-1 {
    background: green;
    position: relative;
    height:100%;
}

and in jsfiddle it works fine. not sure how it will be on your page http://jsfiddle.net/MhEEH/7/

Popedom

Look good... I'll give it a try in the real setup... one second! – Ageold

Hm, sorry, same problem as with the one of Billy Moat. The panel content continues below the screen height. This is visible as soon as you enable scrollbars and/or remove "overflow: hidden;" for html/body. Have a look at this modification of your approach: jsfiddle.net/MhEEH/9 -- Do you have any other idea? (Thx so far) – Ageold

I added overflow: hidden to #tabs Seems fine for now =) jsfiddle.net/MhEEH/12 Check it again – Popedom

I added some more content. And... oh wonder: some parts are hiding below the screens bottom. I my god: I've not even a scrollbar to scroll down!!! --- That's not what I wanted ;-) -- see: jsfiddle.net/MhEEH/13 – Ageold

haha =) well I think you have to choose =) I don't have any ideas, soryy – Popedom

PS: That's why I hate CSS... I always end up "trying" something, instead of just knowing how to do it.... and knowing that it -will- work! – Ageold

with css you always have to guess =) – Popedom

@StefanK. It's like a good detective story. If you'd know what will be written on the next page, what would the reading be worth then? – Juggle

Answer 5

OP,

Check this Fiddle.

The parent #tabs has overflow: hidden;. In addition to the children: #tabs div[id*=tab] having overflow:auto set. This ensures that the parent will set the bounds, and in the event that there is overflowing content in the tab, the scrollbar appearance will be delegated by the tab itself.

Also, just for those unfamiliar with the syntax #tabs div[id*=tab], this wildcard will match any child div of #tabs whose id contains "tab". This can be accomplished a number of ways, but I chose this route for quick-prototyping.

Hope this helps.

Babylon

I modified your fiddle a bit: jsfiddle.net/xZxHf/3 ... I added some more content to #tab-1. If I reduce the height of the Frame, it starts scrolling... BUT: The end of the scrollbar is invisible below the bottom of the frame. That's what is actually the problem... – Ageold

@StefanK. - fair play. Check the update http://jsfiddle.net/xZxHf/4/ — wrapped in an additional <p> and doubled-up on the overflow:auto. – Babylon

Checked jsfiddle.net/xZxHf/4 ... Unfortunately, this doesn't change the behavior (I used Firefox 20.0); And: It's fair play. You can't just introduce "bugs" and expect it to be accepted. I understand that it's a nasty problem. But what's needed is a fully working solution... right? --- Here's a screenshot, of what happens: s14.directupload.net/images/130318/dh6cgh4o.png ; At the lower right corner you see that some part of the scrollbar (and also some content) is below the bottom. For some heights of the frame the scrollbar even is nonexistent, while content is hidden. – Ageold

@StefanK - "fair play" is an idiomatic expression which means "Oh, yeah, totally, now that you've pointed this out, I agree with you". I'm not sure if you were aware of that, seeing as your response was "You can't just introduce bugs and expected it to be accepted" What "bug" did I introduce? Wrapping text in a <p> tag? Do keep in mind that I, as well as everyone else, opt to respond to questions in an attempt to be helpful, not be reprimanded. Hope you figure this out. Good luck. – Babylon

Thanks for explaining "fair play" ;-). Well, I think someone found a solution via the jQuery-UI-Framework itself... (see "Moshe Katz"). And of course thank you for trying... – Ageold

Answer 6

Below is a link to my CSS solution hopefully that works for you

http://jsfiddle.net/MhEEH/17/

html, body {
    margin: 0;
    padding: 0;
    overflow: hidden;
}
#tab-list {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    width: 100%;
}
#tabs {
    position: absolute;
    top: 0;
    bottom:0;
    left: 0;
    right: 0;
}
#tab-1, #tab-2 {
    background: green;
    position: absolute;
    top: 48px;
    bottom: 0;
    left: 0;
    right: 0;
    padding-top: 10px;
}

Someone has mentioned the Coda slider which is a great solution as well and as an alternative I might suggest this elastic content slider from codrops

http://tympanus.net/codrops/2013/02/26/elastic-content-slider/

Hope it helps,

Cheers

Bevatron

Answer 7

The simplest Solution, two changes in CSS, and problem solved, #tabs{height:100%;}

and #tab-1{top:45px;}

this will do :) updated fiddle

Spiral

Answer 8

How about this... With this you will see the scrollbar completely visible if the content overflows

http://jsfiddle.net/uHk5f/

<div id="tab-1" class="customPanel">This content shall: fill up the entire space (left to right) until  the bottom of the page. But it shall -NOT- cover the tabs!</div>

and provide style for the class, with this

    html, body {
    margin: 0;
    padding: 0;
    overflow: hidden;
}
#tabs {
    position: absolute;
    top: 0;
    bottom:0;
    left: 0;
    right: 0;
     overflow:auto;
}

 #tabs .customPanel {
    background: green;

}

Hope this helps!!!

Carman

Answer 9

I don't see a need in using javascript here for basic style modifications. I've recently converted a single page full screen style app from doing all it's re sizing from javascript to pure CSS using positioning and stuff.

Now onto a solution - try this.

http://jsfiddle.net/MhEEH/16/

#tab-1 {
    background: green;
    height: 100%;
}

I don't see a need in using absolute positioning on the green box element because the parent fills up the space, all you need to now do is height: 100% and it should fill up the rest of the space.

Edit

There seems to be an issue with the content not scrolling in this version. Struggling to find a fix for this. I feel like the jQuery UI is adding a bunch of styles and stuff to the #tab-1 div which might be causing your problem. Could be worth trying to reset the styles for #tab-1 and seeing what that leaves you with.

Villalba

Answer 10

I added a top position value to the #tab-1 id to push it below the tab itself.

See: http://jsfiddle.net/MhEEH/40/

Here is the pertinent CSS:

#tab-1 {
    background: green;
    position: absolute;
    top: 50px;
    bottom: 0;
    left: 0;
    right: 0;
}

Hope it helps!

Bittencourt

As I wrote in the question, this solution is not feasible: You can not rely on "top: 50px;" as this height is not a constant! If may change when using an other theme or in case there is more than one line of tabs (if I open a lot of tabs, you'll have multiple rows). – Ageold