RangeSelector/RangeSelectorButton width


I was wondering if there’s any way to set the width on the buttons in a rangeselector.
If the text goes over 3-4 characters it overflows out of the button’s width.

The RangeSelectorButton doesn’t seem to have setWidth or anything to modify it.
Should this just be done in the css?

Thanks again!

Hi Jay,

Are you referring to Vaadin Charts’ range selector? If yes I’d recommend you to post under ‘08. Add-ons’ category and mention the the product name, it’ll make it easier to get an answer.

Regarding the button width, looks like you’re right, ButtonTheme is missing the width property. Could you create an issue for the missing API in


As a workaround you can temporarily extend ButtonTheme like this:

public class ButtonThemeWithWidth extends ButtonTheme {
private Number width = 32;

public Number getWidth() {
return width;
public void setWidth(Number width) {
this.width = width;
[/code]And the use it like this:

RangeSelector rangeSelector = new RangeSelector(); ButtonThemeWithWidth buttonTheme = new ButtonThemeWithWidth(); buttonTheme.setWidth(null); rangeSelector.setButtonTheme(buttonTheme); configuration.setRangeSelector(rangeSelector); Width null will resize the button to have the correct size, you can also set it to a fixed value.

Hope this helps,


Thanks a bunch! And I’ll create the issue.

was fixed and change will be released soon!

Using the workaround for now … is there going to be another release ?