Angularjs is not aligning the elements

Question

I have my md-toolbar

#logo {
  padding-left: 7px;
  object-fit: contain;
}

.language-selector{
  right: 0 !important;
}

.md-toolbar-tools {
  display: flex;
  background: #eeeeee;
  max-width: 100%;
  max-height: 1.3cm !important;
}

<div id="toolbarContainer" layout="column" ng-cloak>
  <md-content> 
    <md-toolbar md-scroll-shrink>
      <div class="md-toolbar-tools">
        <img id="logo" src="https://angular.io/assets/images/logos/angular/angular.svg">
        <h2></h2>
        <span flex></span>

        <select class="language-selector" ng-change="translate()" ng-model="selectedLanguage">
          <option value="en">English</option>
          <option value="no">Norsk</option>
        </select>
      </div>
    </md-toolbar>
    <div ng-view class="fade"></div>
  </md-content>
</div>

I'm want to make my language dropdown menu appears to the right of the md-toolbar, but I'm not getting it... Any suggestion?

I've tried this solution but still not working.

score 2 · Accepted Answer · edited Sep 04 '17 at 12:55

Use justify-content : space-between to put space between your Flex children.

#logo {
  padding-left: 7px;
  object-fit: contain;
}

.language-selector{
  right: 0 !important;
}

.md-toolbar-tools {
  display: flex;
  justify-content : space-between;
  background: #eeeeee;
  max-width: 100%;
  max-height: 1.3cm !important;
}

<div id="toolbarContainer" layout="column" ng-cloak>
  <md-content>
    <md-toolbar md-scroll-shrink>
      <div class="md-toolbar-tools">
        <img id="logo" src="https://angular.io/assets/images/logos/angular/angular.svg">
        <h2></h2>
        <span flex></span>

        <select class="language-selector" ng-change="translate()" ng-model="selectedLanguage">
          <option value="en">English</option>
          <option value="no">Norsk</option>
        </select>
      </div>
    </md-toolbar>
    <div ng-view class="fade"></div>
  </md-content>
</div>

Angularjs is not aligning the elements

1 Answers1