Fixed size Button's Caption overflows.

Flow
1

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/

2

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