How to make jquery-ui tabs no linebreak?

Question

Recently, I use JQuery-UI tabs(http://jqueryui.com/tabs/) and get stuck when I try to use many tabs-nav li-s.

The excessive tabs-nav li-s go to the next line.

I want it to go in one line, with no linebreak, and scroll when it needs.

I serach for a lot of questions, and try many ways, but none solve mine.

Similar questions but not jquery-ui tabs are: Divs next to each other, with size, no linebreak

Wait for your valuable answers!

=============

Refer the html source codes here:Example

And the CSS are:

/* JQuery-UI tabs overwrites - set the width as small as possible! */
.ui-tabs { width:100px; }
.ui-tabs .ui-tabs-nav {}
.ui-tabs .ui-tabs-nav li {}

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

1

We did this on Compilr.com by hacking up the existing jquery-ui tabs plugin and the markup for it. I'm working on getting it cleaned up so we can open source it as a plug-in but for now you might just have to try and pick it apart using firebug or equivalent. I've been re-writing it from scratch and it's not quite done yet but I'll keep you posted.

Changing the markup and css around the tabs were really the key component to pulling this off.

EDIT:

I've started a very basic implementation using bootstrap. You can fork it on GitHub here: https://github.com/MarkMurphy/slidetabs

edited Jun 20 '20 at 09:12

Community

1
1

answered Jan 19 '13 at 09:41

Mark Murphy

2,834
1
31
29

Thank you! With your inspiration, I have successfully made it! – yourtone Jan 20 '13 at 04:05
Thank you for sharing! And mine is so simple that it only fit for my own need. Thanks again! – yourtone Jan 21 '13 at 08:40
Thank you for the info. This plugin works great and was very helpful! – Whatevo Jan 02 '14 at 18:10

How to make jquery-ui tabs no linebreak?

1 Answers1

EDIT: