# Ui-button CSS field not working

**URL:** <https://discourse.nodered.org/t/ui-button-css-field-not-working/59610>\
**Category:** Dashboard\
**Created:** [9 March 2022 18:25 UTC](https://discourse.nodered.org/t/ui-button-css-field-not-working/59610 "2022-03-09T18:25:43Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![regissg](https://avatars.discourse-cdn.com/v4/letter/r/a5b964/32.png) [@regissg](https://discourse.nodered.org/u/regissg)\
**Post date:** [9 March 2022 18:25 UTC](https://discourse.nodered.org/t/ui-button-css-field-not-working/59610/1 "2022-03-09T18:25:43Z")

</div>

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?

```auto
[
    {
        "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
    }
]

```

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [9 March 2022 18:38 UTC](https://discourse.nodered.org/t/ui-button-css-field-not-working/59610/2 "2022-03-09T18:38:02Z")

</div>

```auto
<style>
.test span{
  text-transform: capitalize;
}
</style>

```

---

<div class="post-metadata">

**Author:** ![regissg](https://avatars.discourse-cdn.com/v4/letter/r/a5b964/32.png) [@regissg](https://discourse.nodered.org/u/regissg)\
**Post date:** [9 March 2022 18:56 UTC](https://discourse.nodered.org/t/ui-button-css-field-not-working/59610/3 "2022-03-09T18:56:12Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [9 March 2022 19:06 UTC](https://discourse.nodered.org/t/ui-button-css-field-not-working/59610/4 "2022-03-09T19:06:11Z")

</div>

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:

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

```

😀

---

<div class="post-metadata">

**Author:** ![regissg](https://avatars.discourse-cdn.com/v4/letter/r/a5b964/32.png) [@regissg](https://discourse.nodered.org/u/regissg)\
**Post date:** [9 March 2022 19:16 UTC](https://discourse.nodered.org/t/ui-button-css-field-not-working/59610/5 "2022-03-09T19:16:40Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [9 March 2022 19:31 UTC](https://discourse.nodered.org/t/ui-button-css-field-not-working/59610/6 "2022-03-09T19:31:53Z")

</div>

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

```auto
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>`:

```auto
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:

```auto
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.

---

<div class="post-metadata">

**Author:** ![regissg](https://avatars.discourse-cdn.com/v4/letter/r/a5b964/32.png) [@regissg](https://discourse.nodered.org/u/regissg)\
**Post date:** [10 March 2022 15:26 UTC](https://discourse.nodered.org/t/ui-button-css-field-not-working/59610/7 "2022-03-10T15:26:14Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [9 April 2022 15:26 UTC](https://discourse.nodered.org/t/ui-button-css-field-not-working/59610/8 "2022-04-09T15:26:36Z")

</div>

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