Show full text onto Button within HorizontalLayout with flex grow

Hi there,

I have a HorizontalLayout with 2 components a wrapper component and a button. The text within the wrapper is centered. The first component should use all available space, the button only the one it needs.

    HorizontalLayout headerLayout = new HorizontalLayout();
    Button dataGridColumnHidingButton = createDataGridColumnHidingButton();
    Component resultCount = getResultCountComponent();
    headerLayout.add(resultCount);
    headerLayout.add(dataGridColumnHidingButton);
    headerLayout.setFlexGrow(1, resultCount);

Unfortunately the Button text is not displayed fully. It is Show/Hide col… instead of Show/Hide columns. How can I prevent this without setting a width/min-widh to the button?

Sounds like you are not on V24. There it should be a problem anymore. In earlier version you have to change the flex shrink of the button to 0.

Yes I am using Vaadin23, but how can I set flex shrink on a horizontal layout. Or do I have to use FlexLayout?

yeah there’s no dedicated API for it in V23 either, so you’ll have to use CSS:

button.getStyle().set("flex-shrink", "0");

Thanks!