I am trying to build a kind of toolbar (without using md-toolbar
) consisting of the following parts:
input
for search by unique IDdatepicker
for search by datediv
, span
, label
(or whatever would do the job) to show the number of search resultsHowever, I did not get these three elements aligned properly.
This is my code:
<md-content flex layout-padding>
<md-card>
<md-card-title>
<md-card-title-text>
<div class="md-headline">Simulationen</div>
</md-card-title-text>
</md-card-title>
<md-card-content>
<div layout="row">
<md-input-container layout="row" flex="75">
<label><span class="fa fa-search"> </span>Suche nach ID</label>
<input ng-model="simSearch.input">
</md-input-container>
<md-datepicker ng-model="simSearch.date" md-placeholder="Datum wählen"></md-datepicker>
<div flex="20">Number of search results</div>
</div>
</md-card-content>
</md-card>
</md-content>
In order to make this available to anyone, I set up a Pen. I did not use any custom CSS.
Use layout-align
and adjust the flex
values - CodePen
Markup
<md-card-content>
<div layout="row" layout-align="start center">
<md-input-container layout="row" flex="30">
<label><span class="fa fa-search"> </span>Search by ID</label>
<input ng-model="idSearch.input">
</md-input-container>
<md-datepicker flex="40" ng-model="idSearch.date" md-placeholder="choose date"></md-datepicker>
<div flex="30">Number of search results</div>
</div>
</md-card-content>
https://material.angularjs.org/latest/layout/alignment
Use the following for different screen sizes:
https://material.angularjs.org/latest/layout/container https://material.angularjs.org/latest/layout/children