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