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

docs(chips): provide docs and demo for using a label with outline appearance #16292

Open
KevinJue opened this issue Jun 13, 2019 · 3 comments · May be fixed by #16578

Comments

@KevinJue
Copy link

@KevinJue KevinJue commented Jun 13, 2019

Bug, enhancement request, or proposal:

In mat-form-field with outline appearance you can insert a mat-chip-list inside the form-field but the label doesn't go above the input
it's look like a bug, because if we insert the mat-chip-list outside or if we change the appearance everything look good

Capture d’écran 2019-06-13 à 11 20 54

CodePen and steps to reproduce the issue:

Stackblitz to see what i mean
https://stackblitz.com/edit/angular-dydyib

Detailed Reproduction Steps:

What is the expected behavior?

The label should go above the input like that
Capture d’écran 2019-06-13 à 11 28 29

What is the current behavior?

The label stay in the input

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

Which versions of AngularJS, Material, OS, and browsers are affected?

  • "@angular/material": "^6.3.2"

  • OS: MacOS Mojave

  • Browsers: Chrome Version 74.0.3729.169

@Splaktar Splaktar changed the title Rendering of label for appearance outline not correct with chips inside form chips: rendering of label for appearance outline not correct when inside form Jun 14, 2019
@Splaktar Splaktar transferred this issue from angular/material Jun 14, 2019
@KevinJue

This comment has been minimized.

Copy link
Author

@KevinJue KevinJue commented Jul 9, 2019

Hello,

@Splaktar don't know if is a bug actually, because it's work fine if the mat-label is outside the mat-chip-list.

this work

<mat-form-field>
    <mat-label></mat-label>
    <mat-chip-list>
        <mat-chip></mat-chip>
        <input>
    </mat-chip-list>
    <mat-autocomplete>
    </mat-autocomplete>
</mat-form-field>

but if we move the mat-label inside like that, the label don't have the correct render

<mat-form-field>
    
    <mat-chip-list>
        <mat-chip></mat-chip>
        <mat-label></mat-label>
        <input>
    </mat-chip-list>
    <mat-autocomplete>
    </mat-autocomplete>
</mat-form-field>
@Splaktar

This comment has been minimized.

Copy link
Member

@Splaktar Splaktar commented Jul 14, 2019

This is certainly a hole in our documentation. As you found, the mat-label needs to be in the mat-form-field and not within the mat-chip-list. Here's a working StackBlitz.

Thank you for pointing this out.

@Splaktar Splaktar changed the title chips: rendering of label for appearance outline not correct when inside form docs(chips): provide docs and demo for using a label with outline appearance Jul 14, 2019
@mkonars

This comment has been minimized.

Copy link

@mkonars mkonars commented Jul 21, 2019

Pull request created #16578

mkonars added a commit to mkonars/components that referenced this issue Jul 22, 2019
add an example with outline appearance, so it is clear where the label should be placed

Fixes angular#16292
mkonars added a commit to mkonars/components that referenced this issue Jul 22, 2019
add an example with outline appearance, so it is clear where the label should be placed

Fixes angular#16292
@crisbeto crisbeto added the has pr label Aug 19, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
4 participants
You can’t perform that action at this time.