Multiline Button

Flow
1

Hi I’m creating a webapp with Vaadin and I’m also localizing my app into french and italian. Now my problem is that depending on the current language my texts inside the buttons are longer or shorter. If the text gets too long I want to break it.
I already tried

.multiline-button {
            width: 125px;
            word-break: break-word;
            word-wrap: break-word;
            white-space: normal;
            height: auto;
        }

but that din’t work. Has anyone achieved a mulitline button yet? It would be hugely helpful

2

Your example is not working since the label of the button is protected in shadow DOM, so the global styles do not apply.

Instead you should modify your “shared-styles.html” file and dom-module including the styles there

You should still have button.addClassName("multiline-button") in your Java code since you probably do not want to apply the styles to all buttons

(See parts that can be styled here: https://vaadin.com/components/vaadin-button/html-api/elements/Vaadin.ButtonElement )

<dom-module id="my-button-styles" theme-for="vaadin-button">
  <template>
    <style>
        :host(.multiline-button) [part="label"]
 {
            width: 125px;
            word-break: break-word;
            word-wrap: break-word;
            white-space: normal;
            height: auto;      
		}
    </style>
  </template>
</dom-module>

Note, I have not tested this myself yet, so I do not know how the button behaves with your proposed styles, but the pattern is correct. So if it is possible, this is the way.

3

Many thanks! It worked with the shadow DOM. For anyone wondering maybe:
I also got rid of the “width: 125px” and “height: auto”. Those are not necessary. But in the java code I added to the buttons “.setHeight(“auto”)”. Now the buttons are displayed normally (flex) and when they reach their minimum width they’re wrapping the words now.