如何减小 MatSelect DropDown 面板的大小 [英] How to reduce the size of MatSelect DropDown Panel

问题描述

我正在尝试减小 mat-select 下拉面板的默认大小，但不知道该怎么做

我试过给 width ，试过在 angular mat-select 中覆盖面板类，但尺寸似乎没有减小

我的模板文件

 
<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 course" [value]="course.courseId">{{course.courseCode}}</mat-option></mat-select></mat-form-field>

我的 Css 文件

 .my-panel {背景:橙色；高度:300px；显示:弹性；弹性方向:列；对齐内容:间隔；最小宽度:350px！重要；}

预期结果:

实际结果:

新问题

解决方案

你的模板有一个错字，它需要是 panelClass 而不是 panelclass:

并且根据文档此处，ViewEncapsulation 在您的组件上必须设置为 None 才能工作.在使用 panelClass 的示例的注释中提到了这一点:

//必须禁用封装才能//要应用于选择面板的组件样式.

这里将您的风格应用于选项的有效堆栈闪电战.

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

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

My Template File

    <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>

My Css File

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

Expected Result :

Actual Result :

New Issue

解决方案

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>

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 DropDown 面板的大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！