How to set tab height

Webix JS
#1

Hi,
I have a tab wrapped in a kanban list as per the screenshot. When the tab text is too long it wraps and does not display properly - I am happy to set a fixed height for all tabs but can’t see how to do this?

#2

Hello,

To overcome this issue, you can set the following CSS:

.webix_item_tab{
   white-space: nowrap; 
}

Please, check the snippet: https://webix.com/snippet/c4153641

#3

That worked great, thanks Helga

#4

Actually looking at some other data now I see that this solution has a problem where the ‘…’ button is hidden when there is more than one tab and the text is long:

#5

Any ideas as above?

#6

Hi Team,
Please let me know how to deal with this as the tab is looking really bad as per the screenshots.
As a workaround I am happy to set a manual height for all tabs but I can’t see any way to do this.

#7

Hi again ,

It looks like an error in sizing of the tab width.

To work around this issue, you can set a custom tabMinWidth property to indicate a minimum width of a tab (the value may depend on the text in your tabs): https://webix.com/snippet/54e1e29d

#8

Thanks Helga but this still wraps if there’s not enough space (it doesn’t look as though tabMinWidth does anything) - on you snippit link just drag the middle screen divider to the right and you’ll see the tab wraps again.

#9

Fixing the bug in the tab width calcs would make things a lot easier but for now I found the setting I need as per my original question ie. “How to set a fixed the height for the tabs”

                                                        tabbar: {
                                                            topOffset: 2,
                                                            height: 60
                                                        },