CODEWITHSUNDEEP
javascriptjquery
Tech by Tbone
Tech by Tbone

Reputation: 69

Jquery ui tabs are wrapping to another line

I have jquery tabs on my website but on smaller screens the tabs wrap to another line is there a way to keep the tabs from doing this?

Upvotes: 1

Views: 4206

Answers (2)

Mike
Mike

Reputation: 2569

I followed the link from NAVEED and it was messy. If you can live with only supporting browsers that implement inline-block, try:

jQuery('#mytabs')
    .tabs()
    .find('.ui-tabs-nav')
        .css('white-space','nowrap')
        .css('overflow','hidden')
        .find('li')
            .css('display','inline-block')
            .css('float','none')
            .css('vertical-align','bottom');

Quick & dirty, not tested.

Fiddle (js): http://jsfiddle.net/yxPa6/4/

Fiddle (css): http://jsfiddle.net/kUuTE/2/

Upvotes: 3

mhu
mhu

Reputation: 18051

Adding scroll buttons is a nice alternative to hiding the tabs that won't fit on one line. This can be done easily with the jquery-ui-tabs-paging plugin, take a look at the example page.

Upvotes: 1

Related Questions