Home/ Questions/Q 154913
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-11T10:03:47+00:00

I have an web application with a dynamic number of tabs ranging between 2

  • 0

I have an web application with a dynamic number of tabs ranging between 2 to 20.

I’m currently using Jquery UI’s tab plugin, but finding that it’s behaviour is less then Ideal (i.e. around 12 tabs, when it wraps, the second line of tabs move with the tab selection and sometimes jump across 3 lines instead of two.

This is a two-fold question, first off does anyone have any idea how I could stop the second row of tabs jumping around when the selection changes.

Alternatively does anyone know of a tab plugin for jQuery that handles multiple lines of tabs well (if I can’t find a resolution I might end up using ExtJS or something similar, but was trying to keep this application fairly light-weight).

Answer

After further investigation it turns out this was being caused by the Jquery UI theme I was using, this was the problematic style:

.ui-tabs .ui-tabs-nav li.ui-tabs-selected {  padding-bottom: .1em; border-bottom: 0; }

I just removed the padding-bottom: .1em and it resolve the issue (the clue was that the second row of elements were moving along with the selection changing).

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. you don’t really need an extension at all. Just use floating LI’s with an unstyled UL. The LI’s should wrap properly. Usually a good idea to ensure words in the same tab do not wrap by replacing ‘ ‘ with ‘ ‘.

    My custom tab control is built dynamically with ASP.Net, but the tabbing and the hide/show functionality is all jQuery.

    <div id='tabWrapper'>     <ul id='tabContainer'>         <li>Tab&nbsp;1</li>         <li>Tab&nbsp;2</li>         <li>Tab&nbsp;3</li>      </ul> </div>

    Basic CSS

    #tabWrapper {     border-bottom: solid 1px #676767; }  #tabContainer  {     padding:0; margin:0;     position:relative;     z-index: 1;     float:left;     list-style:none; }  #tabContainer li  {     float:left;     margin:0;     cursor: pointer;     background: f1f1f1;     border-top: solid 1px #676767;     border-left: solid 1px #676767;     border-right: solid 1px #ababab;     margin-bottom: -1px; }  #tabContainer .selected, #tabContainer .selected:hover {     background: #fff; }
    • 0