Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
Masber opened this issue Aug 21, 2017 · 3 comments

Comments

@Masber
Copy link

Masber commented Aug 21, 2017

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?

@willshowell
Copy link
Contributor

There is active work to be able to use the select inside the input-container. Since the last release, the input container has been renamed to md-form-field and #6488 is aligning the select's behavior/styles with the input.

@jelbourn
Copy link
Member

What @willshowell said. We're tracking this via #2124

@angular-automatic-lock-bot
Copy link

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 6, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants