Fixed size Button's Caption overflows.

Paul Henry

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/

Joacim Päivärinne

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%;
}

Important Notice - Forums is archived

Vaadin lets you build secure, UX-first PWAs entirely in Java.Free ebook & tutorial.

Fixed size Button's Caption overflows.

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.