Joe Joe - 28 days ago 5x
AngularJS Question

fail to align two elements in html file

I have two buttons that I want to align to be in the same line, and for some reason the second one is below the first one...

I thought grouping them in one div will help.

this is my current html, there is probably some difficulty with my attempt to group


<button md-button (click)="publish()" class="md-primary">Update</button>
<md-switch [(checked)]="data.cb1">Sho: {{ data.cb1 }}</md-switch>

If I am adding a style attribute to it, only the button reacts, so obviously something is going on with the md-switch.


<md-switch> is a directive and no button. So the HTML will be replaced/parsed by angular which (as I think) outputs a block-level element.
Solutions for that would be to use either display: inline-block; or float: left;.
display: inline-block; is easier but will add 1px margin to your elements. For floats the <button> has to be display: block;, too.