Difficulty styling width of matSelect

Question

https://plnkr.co/edit/aUYfOBJ0MdywKW2pphOM?p=preview

<md-select placeholder="food" style=""><!-- no width stylings that work -->
    <md-option *ngFor="let food of foods" [value]="food.value">
        {{ food.viewValue }}
    </md-option>
</md-select>

Please see above plunker. I am having a lot of difficulty styling the width of the md-select with placeholder of 'food' . Why can't I do a style="" in the md-select tag? I have tried targeting this same div with a class with no response. I have also tried using the .md-select-trigger class that is visible in F12 tools of chrome, firefox, and ie edge. Nothing.

The only thing that works is deselecting the min-width or flex space-around of the .md-select-trigger class that is available in the tools area of browser.

I am not sure what I am dealing with here.

There shouldn't be anything stopping you from using `style="/* What you want*/"`, e.g. [this plnkr](https://plnkr.co/edit/Wqg1vvxE2DINhetzL28e?p=preview) — Aeveus, Feb 24 '17 at 21:15
@Aeveus No, I don't think its a plunker thing. Same thing on my local. I have tried style="min-width: 10px", style="width: 10px", etc. , to show noticeable change in width, nothing. — John Stafford, Feb 24 '17 at 21:27
You're trying to change something outside the scope of the current component. Angular has [view encapsulation](https://angular.io/docs/ts/latest/guide/component-styles.html#!#view-encapsulation), which means styles defined in this component won't bleed into different components. You could override this via a global styles file, or turn view encapsulation off (even though, this is not recommended). — Aeveus, Feb 24 '17 at 22:05
I just want to change this width locally to fit a styling use case. It looks like the link there discusses the extra attributes that get outputted with view encapsulation. Looks like targeting these is the way, correct? I can still target these styles in my component? — John Stafford, Feb 24 '17 at 23:18
@Aeveus, you got it. I had to do md-select /deep/ md-select-trigger (the md-select-trigger may have been a class). I am away from my computer but wanted to share the knowledge and thank you for your help. — John Stafford, Mar 01 '17 at 08:03
[this](https://stackoverflow.com/a/55293532/7173194) worked for fixing width of mat-select — shaheer shukur, Mar 22 '19 at 05:46

score 11 · Answer 1 · answered Aug 23 '17 at 15:09

Might be a bit late, but anyway... To do this properly, you need to set the View Encapsulation to None on your component:

@Component({
    templateUrl: './my.component.html' ,
    styleUrls: ['./my.component.css'], 
    encapsulation: ViewEncapsulation.None,
})

Then in your component css you can just do this:

.mat-select-trigger { min-width: 50px; }

From the link I posted:

View Encapsulation = None means that Angular does no view encapsulation. Angular adds the CSS to the global styles. The scoping rules, isolations, and protections discussed earlier don't apply. This is essentially the same as pasting the component's styles into the HTML.

works to increase the size, but the placeholder is not expanded... still the correct solution. — jmogera, Feb 15 '18 at 19:37

Richard Medeiros · Answer 2 · 2018-03-08T19:24:11.573

5

To add to purwa astawa's answer you can use /deep/ in your components css to change the .mat-select-trigger min-width

.mat-select /deep/ .mat-select-trigger {
  min-width: 60px;
}

This is because .mat-select-trigger is being styled within the md-select module which is not normally accessible by your component.

The above method will soon be depricated. Use ViewEncapsulation.None instead. View Encapsulation

edited Mar 08 '18 at 19:24

answered Aug 02 '17 at 12:38

Richard Medeiros

938
9
18

The `/deep/` shadow-piercing descendant combinator is marked as deprecated. See my answer. – Andrei Matracaru Aug 23 '17 at 15:10
1

Until then `::ng-deep` should be preferred over ` /deep/ ` for a broader compatibility with the tools. **Quoted from** [docs](https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep) – Saif Sep 07 '17 at 00:07

score 1 · Answer 3 · answered May 10 '17 at 17:07

1

I use this (in a global styles file) to patch it.

.mat-select-trigger { min-width: 50px; }

answered May 10 '17 at 17:07

purwa astawa

11
2

Difficulty styling width of matSelect

3 Answers3