Tabbar tab width

Webix JS
1

Hi,

  1. Is it possible for the tabbar tab width to be proportionate to the tab title?

  2. How to force tab text to keep on 1 line:

In below snippet the tab text wraps so that title is on 2 lines:

var tabbar = {
view:“tabview”,
animate:true,
cells:[
{ header:“Tab Number 1”},
{ header:“Tab Number 2”},
{ header:“Tab Number 3”},
{ header:“Tab Number 4”},
{ header:“Tab Number 5”},
{ header:“Tab Number 6”},
{ header:“Tab Number 7”},
{ header:“Tab Number 8”}
]
};

webix.ui({
type:“space”,
padding:10,
rows:[ tabbar ]
});

Thanks
Rael

2

(1) Nope, you can define fixed size for each tab or use the default “share-space-between-tabs” strategy

(2) You can add the next style on the page to change the behavior in the necessary way.

.webix_item_tab{ white-space:nowrap;}

http://webix.com/snippet/046e688c

3

Thanks.

The "tabbar:{ optionWidth:200} " works in the code snippet you provided, however, in a simple html page it is not working.

I cannot paste in the html because it gets truncated, so I will upload and point you to the page:
http://bauerapps.com/files/tabbar_width.html
(Please view source code).

Thanks

4

I have checked the same code locally and it works correctly.

Are you using Webix 2.2 or some older version ?

5

You are quite correct, I was using webix 2.0. I upgraded to 2.2 and it works fine now. Thanks