Saturday, 6 October 2018

Shorter width for mat-option

I am trying to dynamically size (shorten) mat-options within an mat-select. Unfortunately, I always get an extra area of padding.

The padding comes from this line of styling:

minWidth: 'calc(100% + 32px)', // 32px = 2 * 16px padding

Does anyone have a way to get around this? I guess I need a way to override this code from angular-materials?

 transformPanel: trigger('transformPanel', [
    state('void', style({
      transform: 'scaleY(0.8)',
      minWidth: '100%',
      opacity: 0
    })),
    state('showing', style({
      opacity: 1,
      minWidth: 'calc(100% + 32px)', // 32px = 2 * 16px padding
      transform: 'scaleY(1)'
    })),
    state('showing-multiple', style({
      opacity: 1,
      minWidth: 'calc(100% + 64px)', // 64px = 48px padding on the left + 16px padding on the right
      transform: 'scaleY(1)'
    })),
    transition('void => *', animate('120ms cubic-bezier(0, 0, 0.2, 1)')),
    transition('* => void', animate('100ms 25ms linear', style({opacity: 0})))
  ]),

Basically I need all 3 dropdown items to actually be 100px wide here.

this is as close as i can get :(

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. This transformPanel isn't the easiest element to override.



from Shorter width for mat-option

No comments:

Post a Comment