Align element to right in angular js navbar
I'm working with Angular Js Material and I'm having problems aligning to the right: (in red in the image below)
Below is the code of the navigator:
<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>
Specifically, 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 tried right-aligning the text and tried using float right, but none of those attempts seemed to work. This navbar is based on the Angular template here: https://material.angularjs.org/latest/#/getting-started
Any help would be appreciated.
Thank you in advance
+3
source to share
2 answers
Once you define the type of layout, in your layout case = "row", the elements within that area are aligned with layout-align . In your case, you can use:
layout-align="start end"
So the 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 don't know why you are using the div div md-tool.
+3
source to share