Skip to content

md-select cannot be placed inside md-input-container, hence labels position are not same as in an md-input #6571

Closed
@Masber

Description

@Masber

Bug, feature request, or proposal:

Bug

What is the expected behavior?

material breaks rendering the form if contains an md-select inside an md-input-container
This code will print the label on top of the md-input

    <md-input-container>
            <label for="firstName">First Name</label>
            <input mdInput id="firstName" name="firstName" autocomplete="off"
                   formControlName="firstName">

            <md-error *ngIf="formErrors.firstName">
              {{ formErrors.firstName }}
            </md-error>
    </md-input-container>

md-select element behaves differently as it can't be placed inside a md-input-container (labels showed on the left side of the select element instead ob being on top).

What is the current behavior?

labels assigned to an md-select behaves differently as the ones assigned to an md-input inside an md-input-container

What are the steps to reproduce?

Providing a Plunker (or similar) is the best way to get the team to see your issue.
Plunker template: http://embed.plnkr.co/sCUAxJWox2BG1p5hD1fU/

What is the use-case or motivation for changing an existing behavior?

improve material 2 functionality

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

@angular/cli: 1.3.1
node: 7.9.0
os: win32 x64
@angular/animations: 4.3.5
@angular/cdk: 2.0.0-beta.8
@angular/common: 4.3.5
@angular/compiler: 4.3.5
@angular/core: 4.3.5
@angular/forms: 4.3.5
@angular/http: 4.3.5
@angular/material: 2.0.0-beta.8
@angular/platform-browser: 4.3.5
@angular/platform-browser-dynamic: 4.3.5
@angular/router: 4.3.5
@angular/cli: 1.3.1
@angular/compiler-cli: 4.3.5
@angular/language-service: 4.3.5

Is there anything else we should know?

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions