Tabview -> Tab: how to set Tab Width?

Webix JS
1

I have a Tabview and one of the tabs has a very long text in Tab Header. http://webix.com/snippet/86ae6fb7

How can I define the width of Tab Header?

Also, additional quesitons:

  1. Why fieldset “Layout properties” has smaller font than other controls?
  2. Is there a way to add a tooltip instead of placeholder for text fields with small width?
2

Hello,

To set width for a separate tab header, you should use the combination of tabbar and multiview conponents while providing the necessary size in the tabbar options array.

Please, check the snippet http://webix.com/snippet/2d75532d.

Additionally,

  1. Because it’s a fieldset title. You can change the font size by CSS (shown in the snippet above).
  2. Tooltip will be shown by pointing over the text label:
<text tooltip="sets the width of the component"/>
3

Is there a way to keep using Tabview and set header width?

Because it’s a fieldset title. You can change the font size by CSS (shown in the snippet above).

Yes, I can change font size via styles, but I expect that fieldset font size should be consistent with the rest of the UI.

My question is not how to change the font size, but why the font size is different?

4

You can try to define tabbar configuration inside the tabbar configuration object inside the tabview. But if you need to define the width of each tab header separately, you will need to enumerate the options there, which makes less sense to use the tabview.

As to the fieldset font - it’s our designer solution. Maybe the use of a section template will suit you more: http://webix.com/snippet/f2008c58

5

Is there a way to set Style attributes of the “body” element?
I noticed that configuration:

<body header="Long-Long header text with Layout properties">

gets translated to:

<div style="width:206.5px;" button_id="Form_MainFieldset_for_Element_1100" class="webix_item_tab webix_selected">Long-Long header text with Layout properties</div>

And if I change style attribute “width:206.5px” to “width:400.5px”, then the tab looks like it supposed to, w/o involving multiview or nested tabviews.

<div style="width:400.5px;" button_id="Form_MainFieldset_for_Element_1100" class="webix_item_tab webix_selected">Long-Long header text with Layout properties</div>

Tried to redefine “body” with protoUI and add Width attribue there, but could not figure out how to make it working.

6

You can grab Webix 2.0.6 form the client’s area. It supports width configuration in the tab’s config. You will be able to use a code like next

<body header="Long-Long header text with Layout properties" width="450">
7

Thank you, would be a perfect solution, but does not work.

Downloaded 2.0.6 (webix UI v.2.0.6), generated config:

<body header="Layout W/O Header(S) properties" width="450">

rendered HTML:

<div class="webix_item_tab webix_selected" style="width:179.25px;" button_id="Form_MainFieldset_for_Element_1100">Layout W/O Header(S) properties</div>
8

When do you plan to update version on webix.com/snippet?
Currently it’s 2.0 and width settings cannot be tested. http://webix.com/snippet/860f37d3

But I tested locally and with 2.0.6 (package from Oct 17th) it does not work either.