Download & Extend
Tabs (jQuery UI tabs) » Issues

Equal height tabs

Posted by Antinoo on March 9, 2009 at 10:19pm
Project:Tabs (jQuery UI tabs)
Version:6.x-1.0
Component:User interface
Category:feature request
Priority:normal
Assigned:Unassigned
Status:active

Issue Summary

I've created three tabs: two of them just have two single-line text input fields, while the third one has a big multi-line textarea.

Since that, the three tabs are of inequal height, and the Prev/Next buttons goes up and down the page when switching from/to the third tab.

How can I theme the tabs in order to make them all of equal height?

Thanks.

ps. I tagged this as a support request, but maybe it could be a feature request.

Login or register to post comments

Comments

#1

Posted by Openlogic on April 9, 2009 at 7:16pm

I was able to add a height CSS attribute to the .ui-tabs-panel class.

This should preferably be placed in the theme's CSS or that of your module.

Sample (your height will be different):

.ui-tabs-panel{
  height: 280px;
}

#2

Posted by guidoable on December 18, 2009 at 3:03am
Status:active» reviewed & tested by the community

I had the same issue at http://www.tiaratours.nl/reis/trans-siberie-express. Just adding the height to ui-tabs-panel still resulted the content below to jump up when a tab was clicked. I solved it with adding an overflow:auto to get a scroll bar if the content didnt fit and adding a fixed height to the #tabs-tabset

#tabs-tabset{
height:430px;
}

.ui-tabs-panel{
  height: 400px;
  overflow:auto;
}

or if you want to restrict yourself to a certain content type:

body.node-type-xxx  #tabs-tabset{
height:430px;
}

body.node-type-xxx .ui-tabs-panel{
  height: 400px;
  overflow:auto;
}

i have taken the liberty to change the status of the ticket

#3

Posted by nedjo on January 17, 2010 at 11:37pm
Category:support request» feature request
Status:reviewed & tested by the community» active

The Tabs panel style module has code to handle equal height tabs and could be adapted here.

#4

Posted by deckfifty on November 17, 2011 at 9:48pm

The CSS workaround is not ideal. Often you don't know how tall the tab content will be, if it contains variable height content. It would be nice if the js could be adapted to measure the height of the tallest tab content div, and apply a matching inline style for each of the additional tab content areas.