Resize the width (shorter) on a mat-option element

0
votes

I am trying to resize (shorten) mat-options within an mat-select. Unfortunately, I always get an extra area of padding. Is there not a designed way for this? Anyone have any experience? Here is my StackBlitz, it's very close:

Basically I need all 3 dropdown items to actually be 100px wide on this StackBlitz HERE.

EDIT

I STILL NEED HELP

@David's answer is very close, there are just some issues with styling the cdk-overlay-container without :host

I'm not able to use :host as it will effect the other dropdowns on the screen when that is not intended.

2
angularangular-material
Cant you just use CSS with more accurate selector (as this gets the precedence) or use !important ? – Antoniossss
not really, could you help.. one of the main problems is the +32px. or at least i cannot find the correct classes due to the quickness of the animation etc. i'm aware of css and !Important but not having any luck. and this transformPanel isn't the easiest element to override – JBoothUA
Is this what you want? stackblitz.com/edit/… – David
This might help you debugging: In Chrome, you can slow down and even stop animations to inspect elements at a specific time: imgur.com/a/ro3y37R – naeramarth7
When working with mat-select I found useful to just add a custom class and target that class on the mat-form-field you can then just remove padding, margin and set a width; I end up with something like this imgur.com/a/jcurGsk – IvanS95

2 Answers

0
votes

There might be a better way to do it, but just using CSS you can do it like this

::ng-deep .cdk-overlay-pane
{
  min-width: auto !important;
}

::ng-deep .cdk-overlay-container
{
  display:inline-block;
}

::ng-deep .ng-animating .mat-option {
  margin-right: -32px;
}

Stackblitz demo

Edit

Theree is indeed a problem: the overlay container is common to material components. So if you style it like above, CSS rules will apply to all select components. Besides, the overlay container is outside of the component itself, so you cannot restrict the rule with a top level selector, like :host.

I created an example that adds/removes a custom class to/from the overlay so that the styles do not leak to other select components.

It's a bit of a hack, and they may be better solutions ( maybe if you create your own overlay)

It still does not work perfectly when you open/close the select

Stackblitz demo

-1
votes

can be control by adding height and padding css into .mat-options class.

.mat-option{
   height: 30px !important;
   padding: 0 5px !important;
}