Hi there,
i’m looking for a small example how to align the button text to left for Vaadin Flow.
I don’t get it working with the shadow dom (or understand how). Can someone help me?
Kind Regards,
Christian
Assuming that you do not want to set it for all buttons, you first need to set button.addClassName("my-button") and then include the following in your global “styles.html” file. I.e. you want to style part “label”
<dom-module theme-for="vaadin-button" id="my-button">
<template>
<style>
:host(.my-button) [part="label"]
{
... put the style you want here ...
}
</style>
</template>
</dom-module>
Thank you very much, now i understand it! 
Tatu Lund:
Assuming that you do not want to set it for all buttons, you first need to setbutton.addClassName("my-button")and then include the following in your global “styles.html” file. I.e. you want to style part “label”<dom-module theme-for="vaadin-button" id="my-button"> <template> <style> :host(.my-button) [part="label"]
{
```... put the style you want here ... } </style> </template>
Hi Tatu Lund,
I use a style/theme module for vaadin-button
<dom-module id="button-style" theme-for="vaadin-button">
<template>
<style>
[part="label"]
{
white-space: normal;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</template>
</dom-module>
I want edit css label but it is not working.
How do I fix it?
Hi,
Does anybody have an idea why this not works for text-align ? (Vaadin V14/npm)
Button b1 = new Button("Button 1 - Text");
Button b2 = new Button("Button 2 - Text Text");
Button b3 = new Button("Button 3 - Text Text Text");
b1.getStyle().set("width", "20em");
b2.getStyle().set("width", "30em");
b3.getStyle().set("width", "40em");
b1.getStyle().set("background-color", "lightblue");
b2.getStyle().set("background-color", "orange");
b3.getStyle().set("background-color", "pink");
b1.getStyle().set("text-align", "left");
b2.getStyle().set("text-align", "left");
b3.getStyle().set("text-align", "left");
buttons.add(b1, b2, b3);
buttons.setSpacing(false);
add(buttons);