Components: Md-Select and Hint

[Caloman]

_Newbie doubts_
Md-select does not accept hints and breaks pattern with input or i'm doing it wrong?

Usage in forms compromised!

[codef0rmer]

I know where you are coming from. I usually use md-hint for validation errors which is not ideal BTW. A hacky way would be,

<md-input-container>
    <input style="display:none" md-input>
    <md-select placeholder="Favorite food" [(ngModel)]="selectedValue" name="food">
        <md-option *ngFor="let food of foods" [value]="food.value">
            {{food.viewValue}}
        </md-option>
    </md-select>
    <md-hint align="end">Select something</md-hint>
</md-input-container>

P.S. extra CSS is required to hide div.md-input-underline ;-)

[kryzys69]

I thing it would be nice if you can embed md-select and in the future md-datepicker and maybe other components in md-input-container, just like you can in Material 1...

[kara]

Tracking this in https://github.com/angular/material2/issues/2498. Closing as a dupe.

[tgiddings]

@codef0rmer can you elaborate on the css to hide the fake input in your trick? I've tried variations of

.select-input-container .mat-input-underline{
  display:none;
}

where select-input-container is a class I add to the input container. Not only does this have no effect on the extra underline, but this rule doesn't even show up in firefox's inspector as being considered for the underline element. you mention a div.md-input-underline, but there is no div in the inspector with that class; the divs' classes all start with the prefix mat-.

[antonyboom]

@tgiddings finally after couple hours, I figured out how to fix it. here is working code

style.css

.tricky-select {
  width: 100%;
}
.tricky-select .mat-input-underline {
  display: none;
}

  <md-input-container class="tricky-select">
      <input type="text" mdInput class="form-full-width" [ngStyle]="{'display':'none'}" >
      <md-select placeholder="client" class="form-full-width" [(ngModel)]="dialog.stuff" required name="stuff" #stuff="ngModel" [disabled]="dialog.used">
        <md-option *ngFor="let item of items" [value]="item.id" >
          {{ item.name }}
        </md-option>
      </md-select>
      <md-hint *ngIf="f.submitted && (stuff.untouched || !stuff.valid)" [ngStyle]="{'color': 'red'}" align="end">Field is required</md-hint>
    </md-input-container>

[gcfabri]

@antonyboom I tried this but didn't work... Could you provide a plunk?

[antonyboom]

@gcfabri I'm sorry cannot reproduce it in plunker because official example doesn't work and I couldn't force to work it. It requires to import BrowserAnimationsModule which is not accessible from cloudflare at this moment

[ramshinde92]

@antonyboom Not working for me either.

[jeanpchr]

@gcfabri @ramshinde92
Place the "tricky" css at the end of your material theme file, that did the "trick" for me.

[M3enjamin]

for that css problem, another way is to use /deep/
like this:
.tricky-select /deep/ .mat-input-underline {
display: none;
}

[mackelito]

What does /deep/ do?

[willshowell]

@mackelito for components that have ViewEncapsulation, it will break through it. For example, with ViewEncapsulation,

.tricky-select .mat-input-underline { }

// compiles to...

.tricky-select[_ngcontent-c1] .mat-input-underline[_ngcontent-c1] { }

.tricky-select /deep/ .mat-input-underline { }

// compiles to...

.tricky-select[_ngcontent-c1] .mat-input-underline { }

[mackelito]

Aaah Good to know! What does the "deep" stand for?

[willshowell]

Presumable just the word "deep" for accessing elements that belong to "deeper" components? Note, however, that it is being deprecated. You can read more here https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep

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