Widget button width and text size issues

Community
1

I am using the button widget. I have the button widget width set to auto. The issue that I am having is some of my button text has long string and the string is getting cut off. Is there any way to have the button widget width to get bigger according to the text length so that none of my text is cut off.

2

The button should not grow, it is the expected behavior. You can can force line-wrapping by adding this to the css:

.label {
  word-break: break-all;
  white-space: normal;
}
3

Actually you can do/hack this by making the width depend on the label’s length:

JS{{
// width property
return @{this.label}.length * 8
}}
4

I’m on v1.0 beta 3, and the text I enter in the label field does not wrap when I insert

.label {
word-break: break-all;
white-space: normal;
}

into the CSS field.

5

The html structure has changed, use the browser inspector (F12) to check it out, should be something like label instead of .label.

1 Like
6

Should this work on “switch” objects?

Words seem to wrap properly on button objects but not on switch objects when using the above.

Thank you

7

This would work on a switch :

value {
  word-break: break-all;
  white-space: normal;
  text-align: center;
}
1 Like