Components: 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

[JacobBrandt]

What's the status on fixing this issue? If there has been any work done has it also fixed this issue #3192?

[JacobBrandt]

Sorry to ping you @jelbourn but I just want someone to let the community know what's going on with this issue. Is anyone working it? How close are they to a solution?

Now, I know things happen and bugs are inevitable but these visual discrepancies are a real turn off that shouldn't be neglected for this long (now almost 4 months). I hope to hear that the team is working on all the visual inconsistencies and unexpected behaviors that are currently present within the basic form components (checkbox, radio, slide-toggle, select).

Also, what is the dpi you use to convert the dp measurements in the material design spec? It doesn't seem like it's 160dpi. I ask because if you need help fixing these I'd be willing to help out, just need to know the conversion you all use.

Thanks!

[jelbourn]

@EladBezalel is taking a look into this. We definitely know this is an issue (as it was in AngularJS Material) and we're trying to make sure the approach we take is the right one.

[essenov]

It is a quite important bug for UI component :| Hope to be fixed soon in a consistent way.

[raxkaynan]

Any status update on this?

[atul221282]

show stopper for me at the moment

[Splaktar]

This shouldn't be a show stopper for anyone. It's not very hard to add custom CSS to get these elements to align temporarily until they are fixed.

[atul221282]

I know that but alignment works differently on different browsers it may work differently on mobile browsers.

[Sunsvision]

For placeholders misalignment one fix works for me using custom css:
.mat-select-placeholder.mat-floating-placeholder {transform: scale(.75) translateY(7px) !important;}

Only one problem remains unresolved. When you click on the selector, the placeholder jumps for a second (since the value of transform is set using the script and is reset to the desired once browser remember "!import" and to fix it you have to pick the code of the component, which absolutely i don't want to be done). Maybe someone has better solution?

[jdell64]

Maybe this is a silly suggestion, but could the heights / offsets be an '@Input()' ?

[LOZORD]

@jdell64, that's not what @Inputs are really used for. You wouldn't want heights/offsets to be configurable (in a template) like colors or disableds are, for example. It might lead to a style inconsistent with Material.

[atul221282]

adding line-height tp 40px and vertical-align to middle is working for me in chrome and ie edge but still like to have a proper fix rather than hack

[LilSebastian5000]

Any fix for this in beta.4 or beta.5?

[ScottRFrost]

@ryanpm40 It still seems to still be an issue in beta.5

[ScottRFrost]

Still an issue in Beta 6:

[tusharkulkarni]

I was trying to use <md-input-container> and <md-select> inside <md-toolbar> but apparently different styles are applied to <md-input-container> and <md-select>.

I have created a demo on plunker for the same.

Is there an open bug for this issue, or is it tracked under this bug?

[SvenBudak]

Another Bug with md-select is that it resize from self the md-select element, after selecting any value. Check this Video: https://owncloud.upperyard.de/index.php/s/vlkbFMzc9QJO0c5 (you need to download it. my owncloud sucks a little bit...)

[mmalerba]

@BamiGorengo can you please file a new issue for that video, it's not related to this alignment issue. Also if you could provide a plunker to reproduce that would be helpful

[mtpultz]

Vertical spacing between fields is also off when you stack form elements

Also, the underline of the select is 1px when focused versus 2px when compared to inputs that are focused so I made a new issue for this fix at https://github.com/angular/material2/issues/5499.

[Splaktar]

@tusharkulkarni That looks like the same issue being discussed here.

[emreavsar]

any updates on this one?

btw I came across this issue because i wanted to change the font-size on a md'slide-toggle. Meanwhile this does the trick for me:

// vertical aligning md-slide-toggle when changing font size
md-slide-toggle {
  height: 100% !important; // <-- vertical alignment
  display: flex !important; // <-- vertical alignment
}

.mat-slide-toggle-content {
  font-size: 25px !important;
}

[bogacg]

I've ended adding something like this to my component's css:

md-select.leveled-select {
    margin-top: 18px;
}

For sake of completeness, I think Angular Material should present a way to represent elements aligned when inputs put side by side in row layout.

UPDATE: md-select better positioned with beta.10 but still seems to be off of md-form-field, so I've added this time 7px margin-top to md-form-field

[smlee]

problem is the stylesheets are done by different people and they do their own way of doing it

[ashutoshmittal2309]

Any updates on this one? I am having same issue where md-input is not aligning with other controls

[calbot]

@smlee actually I think the problem is the spec isn't being followed. It sets out all dimensions. Text inputs and text drop down pickers have the same rules. We should optionally be able to have either regular or dense layouts ideally... https://material.io/guidelines/components/text-fields.html#text-fields-input-types

[LilSebastian5000]

Kind of crazy to me that such an important issue with such a simple solution still hasn't been resolved.. it's just a matter of margins and/or padding, no?

[roelzkie15]

I just used padding-top: 26px for a temporary solution.

[hblieb]

Here are some styles that work in Chrome for inputs, selects, radios, checkboxes and sliders. http://plnkr.co/edit/QU4nNqGxP3baiRtR14Bo?p=preview. You'll have to tweak it for IE11 and Edge. No other browsers tested.

[mmalerba]

Just wanted to give a quick explanation about this and what the hold-up is. The input and select components have been maintained by two different people and over time as fixes were made to one of them in order to make it closer to the spec it didn't necessarily translate into a fix in the other. At this point there are a lot of things missing from the select that have been added to the input (spacing that matches the material spec, error message support, ability to hire the required marker). In order to make these two components more consistent we want to refactor the select to share a lot more code with the input, but its a fairly large undertaking.

In the mean time I do recommend just adding some margin or padding to the select to make it line up with the input in your app as many here have suggested. After the refactor you should be able to remove the custom margin and have them line up to begin with.

[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

[danger89]

@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[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._}