# How to line up md-checkbox with label?

**URL:** <https://discourse.nodered.org/t/how-to-line-up-md-checkbox-with-label/54634>\
**Category:** Dashboard\
**Created:** [2 December 2021 14:46 UTC](https://discourse.nodered.org/t/how-to-line-up-md-checkbox-with-label/54634 "2021-12-02T14:46:53Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Sean-McG](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sean-mcg/32/54677_2.png) [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)\
**Post date:** [2 December 2021 14:46 UTC](https://discourse.nodered.org/t/how-to-line-up-md-checkbox-with-label/54634/1 "2021-12-02T14:46:53Z")

</div>

I have the following in a template node and functionally it works fine.  
But I cannot get the tick box to line up with the label(see pic) any ideas ?

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

```auto
<div layout="row" ng-repeat="item in msg.payload">

    <md-checkbox ng-model="item.value" aria-label={{item.name}}> {{item.name}} </md-checkbox>

</div>

<md-button ng-click="send(msg)">
    Refresh
</md-button>

```

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [2 December 2021 17:10 UTC](https://discourse.nodered.org/t/how-to-line-up-md-checkbox-with-label/54634/2 "2021-12-02T17:10:26Z")

</div>

Fix it with overriding dashboard styles.  
Don't know the reason but the label is moved a bit down with this:

```auto
md-checkbox .md-label {
    position: absolute;
    top: 32%;
}

```

Everything lines up nicely if you override it like this:

```auto
    md-checkbox .md-label {
        top:unset;
    }

```

---

<div class="post-metadata">

**Author:** ![Sean-McG](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sean-mcg/32/54677_2.png) [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)\
**Post date:** [3 December 2021 01:42 UTC](https://discourse.nodered.org/t/how-to-line-up-md-checkbox-with-label/54634/3 "2021-12-03T01:42:51Z")

</div>

Thanks hotNipi !

I found that 2nd and 3rd buttons in the same template also drop lower than the first due to -

```auto
.nr-dashboard-theme .nr-dashboard-template .md-button:not(:first-of-type) {
    margin-top: 18px;

```

Seems odd, If this from something in standard NR dashboard CSS, I cannot think why its there as it just messes up the layout?

---

<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:** [17 December 2021 01:43 UTC](https://discourse.nodered.org/t/how-to-line-up-md-checkbox-with-label/54634/4 "2021-12-17T01:43:15Z")

</div>

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