如何减小MatSelect下拉面板的尺寸 [英] How to reduce the size of MatSelect DropDown Panel

问题描述

我正在尝试减小垫选择下拉面板的默认大小，但无法弄清楚该怎么做

I am trying to reduce the default size of mat-select drop-down panel, But unable to figure out how to do it

我尝试提供width，曾尝试在角度mat-select中覆盖面板类，但是大小似乎没有减小

I have tried giving width , have tried overriding panel class in angular mat-select, But the size doesn't seem to go down

我的模板文件

    <div class="col-md-8">
       <mat-form-field style="float: right">
          <mat-select panelclass="my-panel" placeholder="Select Course"(selectionChange)="selectCourse($event,courses)" disableOptionCentering>
         <mat-option *ngFor="let course of courses" [value]="course.courseId">
          {{course.courseCode}}
        </mat-option>
      </mat-select>
    </mat-form-field>
  </div>

我的Css文件

 .my-panel {
   background: orange;
   height: 300px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   min-width: 350px !important;
   }

预期结果：

Expected Result :

实际结果：

新问题

推荐答案

您的模板中有一个错字，它必须是 panelClass 而不是 panelclass ：

There is a typo in your template, it needs to be panelClass and not panelclass:

<mat-select panelClass="my-panel" placeholder="Select Course"(selectionChange)="selectCourse($event,courses)" disableOptionCentering>

并且根据文档此处，必须将组件上的 ViewEncapsulation 设置为 None 才能正常工作。在使用 panelClass 的示例的注释中提到：

And as per the documentation here, the ViewEncapsulation on your component has to be set to None for this to work. It is mentioned in the comment of the example where the panelClass is being used:

  // Encapsulation has to be disabled in order for the
  // component style to apply to the select panel.

此处是一种有效的堆叠闪电战，已将您的样式应用于选项。

Here is a working stackblitz that has your style applied to the options.

这篇关于如何减小MatSelect下拉面板的尺寸的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！