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.

Comments

Openlogic’s picture

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;
}
guidoable’s picture

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

nedjo’s picture

Category:support» feature
Status:Reviewed & tested by the community» Active

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

deckfifty’s picture

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.