# 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:** 1\
**Showing post:** 6

<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)

---

_[View the full topic](https://discourse.nodered.org/t/text-align-in-ui-buttons/53685)._