Joe Joe - 2 months ago 6
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

<md-switch>
with
<button>
.

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


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

Answer

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