@Component({
selector: 'app-new-figures-machine',
templateUrl: './new-figures-machine.component.html',
styleUrls: ['./new-figures-machine.component.css'],
//add this to enable change style
encapsulation: ViewEncapsulation.None,
})
.mat-select-panel
{
min-width: calc(100% + 17px) !important;
}<mat-select
panelClass="width-mat"
disableOptionCentering
disableRipple>
<mat-option *ngFor="let option of elements" value={{option}}>
{{option}
</mat-option>
</mat-select>.mat-select-value {
text-align: center;
padding-left: 5px;
}
.width-mat {
width: 30px;
font-size: inherit;
line-height: 2em;
height: unset;
}
.mat-select-panel .mat-option {
font-size : inherit;
line-height: 1em;
height : unset;
white-space: unset;
}