Button Caption Align

Flow
1

Button caption set width(100px);
Button btn=new Button(“Student”);
always align=center
vaadin-button::part(label) {
text-align:left;
}
button btn2=new Button(“Physical Address Line1”);
btn2 align perfect becauze the lenght is 25
the btn legth is low not to be align? if possible…

2

Where are you defining that CSS?

3

styles.css .btnwrap::part(label) {

white-space: normal;
text-align:left;
font-family: arial;
font-size: 12px;

}

4

This is unfortunately a small oversight in the Button component implementation. One of the internal elements defines a flex container and justify-content: center, which forces the content inside the button to be in the center. Text alignment won’t affect it at all.

5

So a workaround, using private API is:

frontend/themes/mytheme/components/vaadin-button.css

.vaadin-button-container {
  justify-content: flex-start;
}
6

Ping @useful-whale, this is kinda problematic

7

Yup. Not a super common thing to do, but should be supported.

Some options (not mutually exclusive)

  • We could add a theme variant for it
  • We could make it controllable through a css property (e.g. --lumo-button-horizontal-alignment)
  • We could refactor the container to not do that :slightly_smiling_face: