Important Notice - Forums is archived
To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
Fixed size Button's Caption overflows.
Hi All,
We have a couple of fixed width buttons in our App. The Caption for the buttons are pulled from data. So when the text is longer than can fit inside the available space of the button it overflows.
I can correct this by updating our theme with
.v-button {
overflow: hidden;
}
but this annoyingly doesnt honor the right hand side padding of the button. Id like the caption text clipped but the button should still retain its right hand side padding.
Does anyone have the CSS directives to achieve this.
see https://jsfiddle.net/5y6tcy30/3/
Hey Paul,
You could do:
.v-button { overflow: hidden; text-overflow: ellipsis; }
Or you could change v-button-caption to:
.v-button-wrap {
display: inline-flex;
overflow: hidden;
max-width: 100%;
}