How to line up md-checkbox with label?

Dashboard
1

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

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

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

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

Everything lines up nicely if you override it like this:

    md-checkbox .md-label {
        top:unset;
    }
1 Like
3

Thanks hotNipi !

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

.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?

4

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