Can't left align the text of a button

Flow
1

Hey there, I created a button like this and added it to a vertical layout:

Button answerButton = new Button(answer);
answerButton.addClassName("answer-button");
answerButton.setWidthFull();

according to the documentation, I can style the button with the part selector:

vaadin-button.answer-button::part(label) {
	text-align: left;
	justify-content: start;
	color: red;
}

This is the result. The color of the label changes to red but the text is still centered.

image
image1019×314 22.5 KB

All hints are appreciated!

2

You should be able to do that setting the padding.

1 Like
3

This works. I can now move the label left with padding to the right. But with this method, it is not possible to really align the text left or am I missing something?

4

The problem of yours is that width of the label is not 100% and the label itself is centered. So even if you set the text be on the left, the label is still in the center. So you need to do the following:

vaadin-button.answer-button::part(label) {
   width: 100%;
   text-align: left;
}
5

Thanks! Now I finally understood how that works :)