albert albert - 1 year ago 98
HTML Question

Align Input with Datepicker and text div

I am trying to build a kind of toolbar (without using

) consisting of the following parts:

  • input
    for search by unique ID

  • datepicker
    for search by date

  • a
    (or whatever would do the job) to show the number of search results

However, I did not get these three elements aligned properly.

This is my code:

<md-content flex layout-padding>
<div class="md-headline">Simulationen</div>
<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-datepicker ng-model="" md-placeholder="Datum wählen"></md-datepicker>
<div flex="20">Number of search results</div>

In order to make this available to anyone, I set up a Pen.
I did not use any custom CSS.

Answer Source

Use layout-align and adjust the flex values - CodePen


    <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-datepicker flex="40" ng-model="" md-placeholder="choose date"></md-datepicker>
        <div flex="30">Number of search results</div>

Use the following for different screen sizes:

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