Petru Scurtu Petru Scurtu - 14 days ago 5
AngularJS Question

Vertical alignment of label followed by md-switch in angular material

I have a page in which a want to display some text in a

label
followed by a
md-switch
. I'm aware of the fact that I can remove the label completely and display the text after the switch, but this solution is not acceptable.

<md-content layout="row">
<label class="md-title">text</label>
<md-switch class="md-primary" ng-true-value="'YES'" ng-false-value="'NO'" ng-model="vm.data"> {{vm.data}}</md-switch>
</md-content>


I cannot seem to align these elements vertically. The switch is always lower than the text, not under the label, after it but much lower.
Some suggestions would be much appreciated.

Answer

You can add layout-align="start center" attribute or replace "start" with "center" or "end" if you want other alignment:

<md-content layout="row" layout-align="start center">
 <label class="md-title">text</label>
 <md-switch class="md-primary" ng-true-value="'YES'" ng-false-value="'NO'" ng-model="vm.data"> {{vm.data}}</md-switch>
</md-content>
Comments