CODEWITHSUNDEEP
jquerycssjquery-uijquery-ui-tabs
n92
n92

Reputation: 7602

How to fix the display issue when the tab heading is long for the jquery UI tabs

I have a jQuery UI tabs, the tab headings of the element keeps changing.

WHAT IS THE ISSUE

when the tab heading is long, The tabs wont display properly and the tab headings as well,

The example can be found here Jsfiddle link, It has an input to accept the tab heading to be updated, when we give some long text as "TESTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTT". The tabs will not display properly.

How to resolve this issue by displaying tabs properly in-spite of any width of the text.

Upvotes: 2

Views: 690

Answers (1)

Rvervuurt
Rvervuurt

Reputation: 8963

You could add the following CSS to make the tabs a certain (max-)width and cut off titles with ... if they get too long.

.ui-tabs-anchor {
   white-space: nowrap;
   max-width: 9em;
   overflow: hidden;
   text-overflow: ellipsis;
}

JSfiddle

Upvotes: 4

Related Questions