CODEWITHSUNDEEP
cssangularjs
apple_92
apple_92

Reputation: 263

AngularJS Material date picker not alligned

I'm having a button and angular js material date picker in a row. Date picker is not aligned correctly. I tried adding a margin too. Without using an additional CSS file ,(adding in line css) please help me to align these components.

  <div>
<md-button class="md-raised md-button job-export-jobs md-ink-ripple">Export Jobs Date</md-button>
<md-input-container>
  <label for="jobDate">Export date</label>
  <md-datepicker  
  ng-model="model.exportJobsDate">
  </md-datepicker>
</md-input-container>

Upvotes: 0

Views: 432

Answers (1)

Sajeetharan
Sajeetharan

Reputation: 222552

You can use layout="row" and then flex by giving the distribution,

<div class='calendarDiv' layout="row">
    <div flex=40>
      <md-icon style="position:absolute;margin-top:15px; left:20px" md-svg-src="calendar.svg"></md-icon>
      <md-datepicker ng-model="myDate" md-placeholder="Enter date"></md-datepicker>
    </div>
    <div flex=60>
      <md-button class="md-raised md-button job-export-jobs md-ink-ripple">Export Jobs Date</md-button>
    </div>
  </div>

DEMO

Upvotes: 1

Related Questions