Hello,
I’m trying to build my overview page (and even tried my hand at making a custom widget)…
For my needs, the label cell works well, but I want to remove the 3 .'s in the top right corner of the label, and I’d like the text centered. Is this possible?
Here’s teh code:
Here’s what it looks like (currently):
Thanks!
Removing the dots is easy. All you have to do is add expandable: false to the widget config.
The label cell does come with a built-in way of modifying the the label text. This is the stateStyle config parameter. Under this parameter you can add all the standard css properties just as with the style parameter. That said, centering the text is actually going to be very difficult.
The problem is that with web page, where the text is placed is not a property of the text itself, but the text element’s container which there is no built-in access to in the oh-cells. So, to modify that you will have to use the more advanced stylesheet property to modify that container. There are, at this point, many good examples of using stylesheet here on the forums that you can find, but the basic breakdown here is you’ll have to work out the complete css-selector of the container and then understand css element alignment to be able to truly center the text.
The cheap and often used workaround here is to go back to the stateStyle settings and add padding-left to your state text. You’ll have to play around with what percentage of padding looks right to you and you may have to make it dynamic depending on how much the text in that label changes, but it will give you something like centered text.
Thank you! The expandable: false worked perfectly!
When I tried to change the CSS it doesn’t seem to work though? What am I doing wrong?
Here’s my code:
component: oh-label-cell
config:
label: Outside Music
action: rule
actionRule: 799197e09f
expandable: false
style:
padding: 250px !important
slots: null
The style is for the element it is under the label cell is not the item you want to add css to but a nested element. You will need to use the stylesheet config option and then reference the nested object you want to style. This will take some use of the browser tools to figure out what makes up the oh-label-cell
If you look at line 60 on this widget I wrote it will give an example of using stylesheet
There are many uses of it in that widget
style is for the cell, stateStyle is for the label.
stateStyle:
padding: 250px
(!important is not required here, stateStyle is applied at the element level and won’t be overridden by anything else, unless you do it yourself).