CODEWITHSUNDEEP
angularjsresponsive-designmaterial-designangular-material
Matjaž
Matjaž

Reputation: 2115

Angular material layout isn't consistent

I'm having problem with designing simple form.

<div layout="column" ng-cloak>
    <md-content class="md-padding">
        <form name="search">
            <md-input-container>
                <label>From where?</label>
                <input name="from" ng-model="from" required>
            </md-input-container>
            <md-input-container>
                <label>To where?</label>
                <input name="to" ng-model="to" required>
            </md-input-container>
            <md-datepicker ng-model="date" md-placeholder="When?" ng-required="true" required></md-datepicker>
            <md-input-container>
                <md-button class="md-raised md-primary">Search</md-button>
            </md-input-container>
        </form>
    </md-content>
</div>

This is how it looks, I don't know am I doing something wrong? I'm new to this framework. I want all inputs to be aligned to same base line, and I wan't to add icons in front of text inputs.

HTML preview

Upvotes: 0

Views: 245

Answers (2)

kuhnroyal
kuhnroyal

Reputation: 7563

There are known issues with input alignment at the moment. You would have to tweak some margins if you want to align it yourself.

https://github.com/angular/material/issues/6636

https://github.com/angular/material/issues/6219

You can get icons in the input containers by specifying a <md-icon>.

<md-input-container class="md-icon-float md-block">
      <label>Name</label>
      <md-icon md-svg-src="img/icons/ic_person_24px.svg" class="name"></md-icon>
      <input ng-model="user.name" type="text">
</md-input-container>

Check the documentation for more input examples.

Upvotes: 1

DavidNJ
DavidNJ

Reputation: 189

Your structure has only one md-content under the layout="column". To stack the md-input-container and md-datepicker items you would need to add layout="column" to the form tag <form name="search" layout="column">which is the tag that is the parent to the tags your want to stack in a column.

<div layout="column" ng-cloak>
  <md-content  class="md-padding">
    <form name="search" layout="column">
      <md-input-container>
        <label>From where?</label>
        <input name="from" ng-model="from" required>
      </md-input-container>
      <md-input-container>
        <label>To where?</label>
        <input name="to" ng-model="to" required>
      </md-input-container>
      <md-datepicker ng-model="date" md-placeholder="When?" ng-required="true" required></md-datepicker>
      <md-input-container>
        <md-button class="md-raised md-primary">Search</md-button>
      </md-input-container>
    </form>
  </md-content>
</div>

Upvotes: 0

Related Questions