# Padding for Text on Button

**URL:** <https://discourse.nodered.org/t/padding-for-text-on-button/22288>\
**Category:** Dashboard\
**Created:** [26 February 2020 14:41 UTC](https://discourse.nodered.org/t/padding-for-text-on-button/22288 "2020-02-26T14:41:14Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![AmrDwarf](https://avatars.discourse-cdn.com/v4/letter/a/839c29/32.png) [@AmrDwarf](https://discourse.nodered.org/u/AmrDwarf)\
**Post date:** [26 February 2020 14:41 UTC](https://discourse.nodered.org/t/padding-for-text-on-button/22288/1 "2020-02-26T14:41:14Z")

</div>

Hi,

I am googling like a mad-man trying to find how to change the inside padding on a button in the dashboard. I know you can do som magic with style sheets in a templete node, but I cannot find the right thing to change.  
Looking at the image I am trying to get a bit of margin between the numbers and the edge of the button. Maybe it would be nice to also get a bit more white around the button to make it differ a bit more from the background image.  
Pointers in the right direction would be much appreciated.

 ![Skärmklipp](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/7/37f3f54ad1473e54d9a4e3845ab39fbadc0525f7.png)

---

<div class="post-metadata">

**Author:** ![Andrei](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/andrei/32/10446_2.png) [@Andrei](https://discourse.nodered.org/u/Andrei)\
**Post date:** [26 February 2020 15:57 UTC](https://discourse.nodered.org/t/padding-for-text-on-button/22288/2 "2020-02-26T15:57:30Z")

</div>

It will be easier to suggest improvements if you share the code used in your template node.

---

<div class="post-metadata">

**Author:** ![AmrDwarf](https://avatars.discourse-cdn.com/v4/letter/a/839c29/32.png) [@AmrDwarf](https://discourse.nodered.org/u/AmrDwarf)\
**Post date:** [26 February 2020 16:41 UTC](https://discourse.nodered.org/t/padding-for-text-on-button/22288/3 "2020-02-26T16:41:55Z")

</div>

There is nothing to share I am afraid, as I have yet found what to put in the template node regarding the buttons.  
At the moment the only thing in there is setting the background image, but that is not related to my question about the buttons.

---

<div class="post-metadata">

**Author:** ![AmrDwarf](https://avatars.discourse-cdn.com/v4/letter/a/839c29/32.png) [@AmrDwarf](https://discourse.nodered.org/u/AmrDwarf)\
**Post date:** [27 February 2020 13:19 UTC](https://discourse.nodered.org/t/padding-for-text-on-button/22288/4 "2020-02-27T13:19:49Z")

</div>

I Have now found that it is the .md-button that I need to change the style of. When I set the 2px black border it workes. But when I try padding or margin it gives no results.

```auto
<style>
body {background-image: url("/LOGO.JPG"); background-repeat: no-repeat; background-attachment: fixed; background-position: center;}
.nr-dashboard-text {border: black 2px solid;}
.md-button {border: black 2px solid; padding: 10px;}
</style>

```

What am I doing wrong?

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [27 February 2020 14:08 UTC](https://discourse.nodered.org/t/padding-for-text-on-button/22288/5 "2020-02-27T14:08:02Z")

</div>

A template like this works for me...

```auto
<span class="foo">1.Words</span>
<style>
.foo {
    border: black 4px solid; 
    padding: 10px;
}
</style>

```

---

<div class="post-metadata">

**Author:** ![AmrDwarf](https://avatars.discourse-cdn.com/v4/letter/a/839c29/32.png) [@AmrDwarf](https://discourse.nodered.org/u/AmrDwarf)\
**Post date:** [27 February 2020 14:12 UTC](https://discourse.nodered.org/t/padding-for-text-on-button/22288/6 "2020-02-27T14:12:34Z")

</div>

That works for me to, but not on the dashboard button.

This is what I try on the Button. The 2px black border works but the padding does not.

```auto
<style>
.md-button {border: black 2px solid; padding: 10px;}
</style>

```

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [27 February 2020 14:26 UTC](https://discourse.nodered.org/t/padding-for-text-on-button/22288/7 "2020-02-27T14:26:22Z")

</div>

sorry I was confused as the default button is center aligned...  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/0/30e9198f0216ff0ef5285b59b201b9fe9a0608c4.png)  
Wherever you have changed that is where you need to change

---

<div class="post-metadata">

**Author:** ![AmrDwarf](https://avatars.discourse-cdn.com/v4/letter/a/839c29/32.png) [@AmrDwarf](https://discourse.nodered.org/u/AmrDwarf)\
**Post date:** [27 February 2020 14:30 UTC](https://discourse.nodered.org/t/padding-for-text-on-button/22288/8 "2020-02-27T14:30:53Z")

</div>

Thats my bad, Sorry... I see now how that can be confusing. The left align is done by html in the node label in the editor. But I have now changed that over to the css sicne I found what element to set it in.

```auto
<style>
.md-button {border: black 2px solid; text-align: left; font-size: 35px; padding: 10px;}
</style>

```

Font size works, text alignment works, border works but the padding do not work.... I do not understand.

Thanks for trying to help me. Probably I am missing something obvius.

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [27 February 2020 23:14 UTC](https://discourse.nodered.org/t/padding-for-text-on-button/22288/9 "2020-02-27T23:14:50Z")

</div>

The default style tries to set it so you need to force it with !important

```auto
 padding-left: 10px !important;}

```

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/e/5efda48beb5c74c71fa80753adc7f6a436be0a71.png)

---

<div class="post-metadata">

**Author:** ![AmrDwarf](https://avatars.discourse-cdn.com/v4/letter/a/839c29/32.png) [@AmrDwarf](https://discourse.nodered.org/u/AmrDwarf)\
**Post date:** [28 February 2020 07:16 UTC](https://discourse.nodered.org/t/padding-for-text-on-button/22288/10 "2020-02-28T07:16:18Z")

</div>

dceejay, Thank you! That was it.  
In my mind the css that I put in the template was the lowest one and should therefore be used. As CSS are just that, cascading. But now I have learnt something new.

Cheers  
Tobbe

---

<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:** [29 March 2020 07:16 UTC](https://discourse.nodered.org/t/padding-for-text-on-button/22288/11 "2020-03-29T07:16:35Z")

</div>

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