Question

Is there any way that I can “Stack” the jQuery UI Tabs Header? Please allow me to explain: I have tabs which may require two or more words for the titles to be self-explanatory. For instance:

“PDP Undeveloped”

My problem is that I am running out of space when adding a bunch of tabs. So instead of writing the tab as

PDP Undeveloped

I would like it to show as

    PDP
Undeveloped

Is that possible? If not then are there alternate ways of solving this problem?

Thanks in advance.

Bharat

Answer 1

I would recommend using <br /> tags. Since you only want them to take effect when you’re short on space I’d recommend using media queries to turn on the multi line display.

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Nunc <br />tincidunt</a></li>
        <li><a href="#tabs-2">Proin <br />dolor</a></li>
        <li><a href="#tabs-3">Aenean <br />lacinia</a></li>
    </ul>
    <div id="tabs-1">Tab 1</div>
    <div id="tabs-2">Tab 2</div>
    <div id="tabs-3">Tab 3</div>
</div>

<style>
    br { display: none; }

    /* Replace 700px with whatever width you want the multi line display to start */
    @media screen and (max-width: 700px) {
        .ui-tabs li { height: 4em; }    
        br { display: inline; }
    }
</style>

Live example: http://jsfiddle.net/vvpeF/