Tiago Tiago - 1 year ago 69
CSS Question

Using Angular Material, is it possible to align one button to the left and another to the right, in the same row?

According to Angular Material's documentation on alignment:


The layout-align attribute takes two words. The first word says how
the children will be aligned in the layout's direction, and the second
word says how the children will be aligned perpendicular to the
layout's direction.


I used this to create the button section that you can see on the picture below:

enter image description here

With the following code:

<section layout="row" layout-sm="column" layout-align="end center" layout-wrap>
<md-button class="md-primary">Submit</md-button>
<md-button class="md-warn">Cancel</md-button>
<md-button class="md-warn">Delete Boundary Partner Type</md-button>
</section>


However, I wanted the
Submit
button to be left-aligned, and all the others right-aligned. Is there a correct way of doing this with Angular Material or will I just have to create my own styles?

Answer Source

You can do so with the help of a div and layout-align , here is the code:

<section layout="row" layout-sm="column" layout-align="end center" layout-wrap>
  <div layout="row" layout-align="start center" flex>
    <md-button class="md-primary">Submit</md-button>
    <span flex></span>
  </div>
  <md-button class="md-warn">Cancel</md-button>
  <md-button class="md-warn">Delete Boundary Partner Type</md-button>
</section>

And a working Plunker.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download