Label autowidth fail on custom element with overrode paddingX

Webix JS
1

Hi,

I want to have a custom toolbar with an overrode paddingX :

webix.protoUI(
    {
        name: 'paddedToolbar',
        defaults: { paddingX: 7 },
    },
    webix.ui.toolbar,
);

Sadly doing this make the result of the label’s autowidth to fail.

In the following screenshot, the two toolbars have the same elements :

  • The first one is a paddedToolbar
  • The second one is a toolbar with paddingX: 7

image
image935×97 5.28 KB

Snippet: Code Snippet

My main issue is to have a way to have many toolbars sharing the same padding config (without having to set paddingX on each ).
Using css doesn’t works…

Any idea ?

Is that a bug ?

2

Hello Fabien,

We looked into this issue and it’s a bug, thank you, we have added it in our backlogs. In the meantime, you can use one of the two workarounds:

  1. In your example you can use property label for all the controls including text view.
    And in your text view you can set property labelWidth: “auto”.
    Please take a look at the example: https://snippet.webix.com/pfspbkvk

  2. The second workaround is to create a custom label and rewrite the line of code that causes the bug.
    The problem is with the queryView method call. To measure the text length and get the correct number it looks for the parent of the label and checks for "toolbar". Since you changed the name to "paddedToolbar", the check is no longer true, so the width is calculated incorrectly. This check is required because toolbar labels have additional styles that influence the length of the text. Without it, the number is several pixels short. Thus paddingX is not the problem here.
    So the workaround is to override queryView, since the calculation is done in a private method and can’t be accessed. It’s hacky, but it works if you do not want to link the label to the text input as described in the 1st solution.
    Besides, make sure to set $cssName to “label”. For a lot of controls it’s a requirement during customization, since the CSS classes assigned to HTML is taken from name and Webix styles do not include your custom named label classes.
    Please see the snippet with the example: https://snippet.webix.com/ggo0otpe