Align item to the right in the Angular Js navbar

Question

I am working with Angular Js Material, and I am having trouble aligning to the right the following (what's in red in the image below)

Below is the navbar code:

<md-toolbar layout="row">
   <div class="md-toolbar-tools">
      <md-button ng-click="toggleSidenav('left')" hide-gt-sm class="md-icon-button">
         <md-icon aria-label="Menu" md-svg-icon="https://s3-us-west-2.amazonaws.com/s.cdpn.io/68133/menu.svg"></md-icon>
      </md-button>

      <h1>TEST</h1>
      <i class="material-icons md-48">question_answer</i>
      <i class="material-icons md-48">help_outline</i>
   </div>
</div>

In particular, I would like to align the following:

<i class="material-icons md-48">question_answer</i>

<i class="material-icons md-48">help_outline</i>

I have tried text-aligning them to right and have tried using float right but none of these attempts seems to have worked. This navbar is based on this Angular template.

Any help would be appreciated.

Thanks in advance

Solution 1

Simply put <span flex></span> before you start adding the Links / Icons in the md-toolbar! Like so:

<md-toolbar>
  <span flex> </span>
  <md-button> Button Right </md-button>
</md-toolbar>

Solution 2

Once you define the type of layout, in your case layout="row", items within that scope are aligned by layout-align. In your case you can use:

layout-align="start end"

So, you code should be:

<md-toolbar layout="row" layout-align="start end">
  <div class="md-toolbar-tools">
    <md-button ng-click="toggleSidenav('left')" hide-gt-sm class="md-icon-button">
      <md-icon aria-label="Menu" md-svg-icon="https://s3-us-west-2.amazonaws.com/s.cdpn.io/68133/menu.svg"></md-icon>
    </md-button>

    <h1>TEST</h1>
    <i class="material-icons md-48">question_answer</i>
    <i class="material-icons md-48">help_outline</i>
  </div>

I do not know why you are using the div class md-toolbar-tools.

Comments

[Shantanu]

Simple and efficient!

[Baumannzone]

I'm asking if it's the best way to do it, or maybe there is something better. Anyway, it works!