Ui-button CSS field not working

Dashboard
1

By default ui-button uppercase the label. I have tried to use the CSS field and a very basic ui-template (see below) to have it "capitalized" instead but it does not seem to work.

Am I doing something wrong or is that a known problem?

[
    {
        "id": "97306cc1f138f3a8",
        "type": "ui_template",
        "z": "555d3e127e247e2f",
        "group": "31529018.f1ea8",
        "name": "",
        "order": 10,
        "width": 0,
        "height": 0,
        "format": "<style>\n.test {\n  text-transform: capitalize;\n}\n</style>\n",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 480,
        "y": 180,
        "wires": [
            []
        ]
    },
    {
        "id": "a2d1951a0b43406f",
        "type": "ui_button",
        "z": "555d3e127e247e2f",
        "name": "",
        "group": "31529018.f1ea8",
        "order": 17,
        "width": 0,
        "height": 0,
        "passthru": false,
        "label": "my button",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "test",
        "icon": "",
        "payload": "",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 320,
        "y": 180,
        "wires": [
            []
        ]
    },
    {
        "id": "31529018.f1ea8",
        "type": "ui_group",
        "name": "Default",
        "tab": "111148ee.cdb697",
        "order": 1,
        "disp": true,
        "width": "6",
        "collapse": false
    },
    {
        "id": "111148ee.cdb697",
        "type": "ui_tab",
        "name": "Home",
        "icon": "dashboard",
        "disabled": false,
        "hidden": false
    }
]
2 
<style>
.test span{
  text-transform: capitalize;
}
</style>
3

Thanks, it works. As you could imagine I am not a CSS expert.

I am now trying to have rounded border but adding " border-radius: 10px;" to the test class does not work?

4

Your "test" class is applied to the widget as a whole
md-card class="nr-dashboard-button _md test visible"

Within that is the button
button class="md-raised md-button md-ink-ripple"

So the border radius is applied to class md-button within class test:

<style>
.test span{
  text-transform: capitalize;
}
.test .md-button{
    border-radius: 10px;
}
</style>

:grinning:

5

Many thanks. I am still at the very beginning of the W3C CSS tutorial...

6

Me too!
I use the browser style inspector. For this button "copy CSS path" gives me

html body#nr-dashboard.nr-dashboard-theme.layout-column md-content._md.layout-column.flex section.layout-row.flex md-content._md.flex div#Tab_Demo.masonry-container ui-card-panel#Demo_Demo.visible div.nr-dashboard-cardpanel.layout-column div#Demo_Demo_cards.nr-dashboard-cardcontainer md-card.nr-dashboard-button._md.test.visible button.md-raised.md-button.md-ink-ripple

I paste that into Notepad and delete everything before div#<tab name>_<group name>:

div#Demo_Demo_cards.nr-dashboard-cardcontainer md-card.nr-dashboard-button._md.test.visible button.md-raised.md-button.md-ink-ripple

Then I get (usually) get rid of cardcontainer, _md, visible, md-raised and md-ink-ripple, leaving:

div#Demo_Demo_cards md-card.nr-dashboard-button.test button.md-button

How much of that do we actually need for the CSS selector?

The first bit confines the styling to just this UI tab and group. Might be useful, if you have more than one group with class "test" but styled differently, but probably safe to discard it.

Next md-card. Well all UI widgets are within an md-card element so it's not needed.

That leaves .nr-dashboard-button.test button.md-button
You can use that or try pruning it a bit more...
If you end up with a property that only works if you make it !important, it's usually a sign that the CSS selector was pruned too far.

7

Impressive remote engineering but I have no idea how to do it on my own

8

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.