Input components (md-input, md-select, md-checkbox etc) aren't aligned in a flex container...

[jmcgoldrick]

... without setting align-items: center

Updated Plunk: http://plnkr.co/edit/TgFy04UErh9Xhr0A4XzK?p=preview

md-input behaves differently to md-select (and at least md-checkbox, possibly all the other "input" components) when the elements are within a "flex container"

See this plunk for an example: http://plnkr.co/edit/aLXsp8MlV2AoOkC9aEFP?p=preview

This issue might be resolved with the in-progress refactor of input?

[dreweird]

it's been 6 hours ago....
I have to update my npm

[kara]

Thanks for reporting! The various form components should definitely align. We'll need to figure out which baseline to standardize under. cc: @jelbourn.

[DSoko2]

I recognized that also the spacing between the selected/input text and the label is different for md-select and md-input. The screenshot below shows a md-input and a md-select with the spacing im referring to. I would really appreciate, if they would use the same spacing to improve homogeneity of the forms. Since I think, this aspect is related to the topic of this issue, I didn't open a new one.

On https://material.io/guidelines/components/text-fields.html#text-fields-labels there are two definitions for that kind of spacing under Labels -> Specs. Actually, it seems to be that md-select implements the left one with 8dp space between label and text and md-input implements the right one with 4dp spacing.

[no-more]

Hi,

This is a bit off topic, but why not using md-input-container for md-select ?
It would be great to have a single entry point.
Maybe this is stupid question and not possible at all due to constraints, but to me this looks more logic.

This could also be used to group radio button or checkbox in order to define a placeholder which looks exactly like md-input placeholder.

Thanks

[sumpton]

Thank you for all this wonderful code. I am busy refactoring a ton of Bootstrap.

On this mention of a common wrapper, I have been wishing for md-prefix and md-hint support across all of the form controls. For inputs I have enjoyed using md-prefix with md-icon together -- for example a search icon.

[tmburnell]

This might be related: besides the header not having the same height from the text ... the initial overall height is not the same.
The standard input looks like it has the height of 50px and the select box is 30px.
so after you fill in something there is no space between the top like the standard input

[tmburnell]

Here is another example:

This uses material beta 2, and flex-layout beta 5

[EladBezalel]

@jmcgoldrick do you mind update your plunker to make it work so i can investigate it further?

[jmcgoldrick]

@EladBezalel see here: http://plnkr.co/edit/TgFy04UErh9Xhr0A4XzK?p=preview I've updated with some toggles for the common issues I have come across:

• Placeholder alignment
• Alignment in a flex-box
• Issues with font-size

Oh, and some bits to highlight some of the elements if it helps

[tremaineeto]

Thanks for the explanation, @mmalerba.

Just to add to the list of potential temporary solutions, I had to add a margin-bottom element to the mat-input-underline class in my custom CSS:

/deep/ .mat-input-underline { margin-bottom: 2px; }

Note that >>> also worked in place of /deep/.

After this new CSS was applied, the select and input lined up to the human eye.

[benelliott]

@tremaineeto Going forward it's recommended to use ::ng-deep insead of /deep/ or >>>. See here for reference.

[sanka76811]

hi,

I added following css style to the bottom of the page. its override the select component style. problem solved.

.mat-select-trigger { height: 48px; }

[Nathan-Ryan]

@sanka76811 The md-select placeholder and the value still don't align with the textbox. If only the solution was as simple. Hopefully this will be resolved soon when they overhaul the md-select control.

[sanka76811]

https://github.com/Nathan-Ryan 100% correct. its temporary solution until total solution come up with md-select control.

[LeviBarker]

For some reason, none of the other suggestions worked for me. When using an <md-form-field> the following SCSS implementation seemed to work (for me at least):

.mat-select-placeholder{
  font-size: 14px;

  &.mat-floating-placeholder{
    top: -16px !important;
  }
}
.mat-select-trigger{
  height: 27px !important;
}

[carecki]

In my case, it occurred that md-select is not aligned well in flex container with align-items: baseline;, when it has no placeholder. After adding placeholder, browser correctly detected the baseline of the md-select element.
In order to not enforce setting placeholder in every occurence of md-select, I used following css rule:

md-select {
  .mat-select-placeholder::before {
    content: "\200b"; //zero-width space
  }
}

It's adding zero-width space (so don't display anything and don't occupy any space) before container for placeholder. The result is the same - browser successfully detects baseline of whole md-select.

[tamohugues]

user this css is work fine for me

`.mat-select-placeholder{
font-size: 14px;

&.mat-floating-placeholder{
top: -18px !important;
}
}
.mat-select-trigger{
height: 2.4vh !important;
min-height: 23px !important;
margin-bottom: 18px;
}`

[tamohugues]

@jmcgoldrick @dreweird @kara @DSoko2

use this

.mat-select-placeholder{
  font-size: 14px;

  &.mat-floating-placeholder{
    top: -18px !important;
  }
}
.mat-select-trigger{
  height: 2.4vh !important;
  min-height: 23px !important;
  margin-bottom: 18px;
}

[mmalerba]

This should be fixed now that both input and select go inside mat-form-field

[carecki]

And it is, I confirm in beta 12 mat-select inside mat-form-field is aligned perfectly.

[dimabutenko]

What about mat-checkbox? I can't to add this to mat-form-field. Thanks

[melroy89]

@dimabutenko Same issue. Strange that mat-checkbox can't be part of a mat-form-field right..

[vanmxpx]

::ng-deep .mat-form-field-prefix, ::ng-deep .mat-form-field-suffix { align-self: flex-end; }
this fix issue for prefix and suffix

[kakins]

I'm still seeing this issue, even with input and select wrapped in mat-form-field. I'm not sure if this is really resolved?

<mat-form-field>
 <input type="text" placeholder="Adloc" 
   [matChipInputFor]="adlocChips" 
   [matAutocomplete]="auto" 
   [matChipInputAddOnBlur]="addOnBlur" 
   matInput [formControl]="adlocSearch" #adlocInput/>
</mat-form-field>

...

<mat-form-field>
<mat-select placeholder="Status" [(ngModel)]="positionFilter.isVacant" ng-change="updateFilter()">
    <mat-option [value]="undefined">All</mat-option>
    <mat-option [value]="false">Filled</mat-option>
    <mat-option [value]="true">Vacant</mat-option>
</mat-select>
</mat-form-field>

[benelliott]

@kakins How are the items aligned in the parent container? Can you post a StackBlitz repro?

[JessyParis]

Same issue than Kakins with Material 6.4.7

        <table>
            <tr>
                <td>
                    <mat-form-field>
                        <mat-select placeholder="Transporteurs" [formControl]="toppings" multiple>
                            <mat-option *ngFor="let EntiteList of entiteList" [value]="EntiteList.RefEntite">{{EntiteList.Libelle}}</mat-option>
                        </mat-select>
                    </mat-form-field>
                </td>
                <td>
                    <mat-form-field>
                        <input matInput placeholder="Filtre" #filter>
                    </mat-form-field>
                </td>
                <td>
                    <button mat-icon-button (click)="applyFilter(filter.value)"><mat-icon aria-label="Filter">search</mat-icon></button>
                </td>
            </tr>
        </table>

[JessyParis]

But it is working well in flex container.

        <div style="float: left; padding: 0px; margin: 0px;">
            <mat-form-field>
                <mat-select placeholder="Transporteurs" [formControl]="toppings" multiple>
                    <mat-option *ngFor="let EntiteList of entiteList" [value]="EntiteList.RefEntite">{{EntiteList.Libelle}}</mat-option>
                </mat-select>
            </mat-form-field>
            <mat-form-field>
                <input matInput placeholder="Filtre" #filter>
            </mat-form-field>
            <button mat-icon-button (click)="applyFilter(filter.value)"><mat-icon aria-label="Filter">search</mat-icon></button>
        </div>

[GreedyA1]

any update on this one?

[Splaktar]

@GreedyA1 no, it was closed almost 2 years ago. If you are seeing a bug with the latest release, please open a new issue.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}