# Text Align in Ui\_Buttons

**URL:** <https://discourse.nodered.org/t/text-align-in-ui-buttons/53685>\
**Category:** Dashboard\
**Created:** [13 November 2021 16:13 UTC](https://discourse.nodered.org/t/text-align-in-ui-buttons/53685 "2021-11-13T16:13:38Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [13 November 2021 16:13 UTC](https://discourse.nodered.org/t/text-align-in-ui-buttons/53685/1 "2021-11-13T16:13:38Z")

</div>

Is it possible to have a simple text layout settings in ui\_button similar to ui\_text ?

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/4/841845a0cec70820eb9cc9beb61f620613531b61.png)

CSS settings is a bit too much for simple requirement.

---

<div class="post-metadata">

**Author:** ![Christian-Me](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/christian-me/32/10774_2.png) [@Christian-Me](https://discourse.nodered.org/u/Christian-Me)\
**Post date:** [14 November 2021 11:29 UTC](https://discourse.nodered.org/t/text-align-in-ui-buttons/53685/2 "2021-11-14T11:29:59Z")

</div>

The Dashboard is committed to the material design style and what you wish for is listed as a don’t

> **[Common buttons – Material Design 3](https://m3.material.io/components/buttons/)**
>
> Buttons help people take action, such as sending an email, sharing a document, or liking a comment.

Here you find a starting point to play around

> [@Button text forced to uppercase](https://discourse.nodered.org/t/button-text-forced-to-uppercase/20251):
>
> For the first time I am using a dashboard button and I notice that the text on the button is always in uppercase, whatever I put in the button configuration. Is that expected? Node-RED version: v1.0.2 Node.js version: v10.18.1 Dashboard version 2.17.1 Running on Ubuntu.

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [14 November 2021 12:44 UTC](https://discourse.nodered.org/t/text-align-in-ui-buttons/53685/3 "2021-11-14T12:44:54Z")

</div>

I really don't understand the _material design_ aspect and may be I am not supposed to be here if i don't. my simple question was if it is possible to have the feature in a Text node as shown in my original post, why not have in a button ? i know it is eventually possible by going through all the complicated template node or CSS thing, but is it not node red supposed to be easy going on the _not so code literate folks_ like me.

---

<div class="post-metadata">

**Author:** ![Christian-Me](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/christian-me/32/10774_2.png) [@Christian-Me](https://discourse.nodered.org/u/Christian-Me)\
**Post date:** [14 November 2021 12:58 UTC](https://discourse.nodered.org/t/text-align-in-ui-buttons/53685/4 "2021-11-14T12:58:08Z")

</div>

The dashboard is based on [https://material.angular.io/](https://material.angular.io/) and therefore the core dashboard nodes are committed to the material design scheme.

Your feature request is totally valid but I believe will not be implemented (I asked a similar question before). Especially because the lifespan of the dashboard is not endless: [[ANNOUNCE] Node-RED-Dashboard 3.0.4](https://discourse.nodered.org/t/announce-node-red-dashboard-3-0-4/51118)

I'm also not happy with all rules in the material design scheme (especially buttons screaming at the user in bold capital letters) but: "You make the rules to beak the rules" - and that is why you can use the template node to play around with most aspects of the dashboard.

Sorry

And it is totally ok to ask! Sometimes the answer is not satisfying. I only tried to point you to a solution.

Chris

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [14 November 2021 13:16 UTC](https://discourse.nodered.org/t/text-align-in-ui-buttons/53685/5 "2021-11-14T13:16:53Z")

</div>

Thanks for the prompt reply. Its time to get around the template node. would be happy if you could direct me to a starting point on the template node.

---

<div class="post-metadata">

**Author:** ![Christian-Me](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/christian-me/32/10774_2.png) [@Christian-Me](https://discourse.nodered.org/u/Christian-Me)\
**Post date:** [14 November 2021 14:27 UTC](https://discourse.nodered.org/t/text-align-in-ui-buttons/53685/6 "2021-11-14T14:27:01Z")

</div>

I obeyed the rules ... but there is always a way as I tried to point you to:

> [@Button text forced to uppercase](https://discourse.nodered.org/t/button-text-forced-to-uppercase/20251/8):
>
> you can add the following to a ui\_template node set with template style "Added to site head section": \<style\> button{ text-transform: none !important; } \</style\>

place this into a template node & select:

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/2/92a4067b8659394f3e14db3925bae96570533d58.png)

```auto
<style>
    button {
        text-transform: none !important;
        text-align: left !important;
        padding: 0px 10px !important;
    }
</style>

```

you can play arround with the HTML parameters as you like. Building a UI around all of them and maintain them is a lot of work and will never please everybody. So to stick to an accepted set of rules and give a way to break them is totally understandable.

`!important` is "important" this prevents your properties to be overwritten later.

```auto
[{"id":"643d17deb8e3a719","type":"ui_button","z":"db39bbbe01b608ed","name":"","group":"e8592788a2921318","order":2,"width":0,"height":0,"passthru":false,"label":"Test me 😁","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"topic","topicType":"msg","x":950,"y":300,"wires":[[]]},{"id":"736d918fa650ae76","type":"ui_template","z":"db39bbbe01b608ed","group":"e8592788a2921318","name":"Style Button","order":3,"width":0,"height":0,"format":"<style>\n button {\n text-transform: none !important;\n text-align: left !important;\n padding: 0px 10px !important;\n }\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","x":950,"y":340,"wires":[[]]},{"id":"e8592788a2921318","type":"ui_group","name":"Basics","tab":"3c1f8373e77c2cdd","order":1,"disp":true,"width":"20","collapse":true},{"id":"3c1f8373e77c2cdd","type":"ui_tab","name":"uPlot","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

```

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/2/f2085b1f52b392466fa450a3ce649decbe7c5168.png)

---

<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:** [28 November 2021 14:27 UTC](https://discourse.nodered.org/t/text-align-in-ui-buttons/53685/7 "2021-11-28T14:27:09Z")

</div>

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