![](/img/trans.png)
[英]Mat-select make the background the same as the selected mat-option
[英]Mat-select scroll not jumping to selected mat-option
作为用户,当我从键盘上键入选项时,滚动条不会位于突出显示的项目上。 同样,当我选中复选框时,滚动条会滚动到其他位置,而不是坚持选择的选项。
代码是
<form >
<mat-form-field appearance="outline" floatLabel="never" class="some-class">
<mat-select #multiselect [compareWith]="somefn" disableOptionCentering="true" disableRipple="true" panelClass=some-class" placeholder="{{label}}" [formControl]="control" multiple class="some-class" (selectionChange)="somefn()">
<mat-select-trigger>
<span *ngIf="control.value?.length == allSelectedNum; else otherBlock">
ALL
</span>
<ng-template #otherblock>
##more code
</ng-template>
</mat-select-trigger>
<mat-option #allSelected [value]="'0'" (click)="someclickfn()">Select/Deselect All</mat-option>
<mat-option *ngFor="let apple of appleList" [value]="apple" (click)="someotherclk(apple)">{{apple.name}}</mat-option>
</mat-select>
</mat-form-field>
</form>
我有同样的问题。 就我而言,原因是我将垫子选项的高度与原始垫子选项进行了比较,现在,当选择物料时,它试图将所选物料集中或放置在某个位置,但是由于所有下拉菜单的大小发生了变化,我认为这是在计算错误定位并滚动到完全不同的项目。
即使在重要示例https://stackblitz.com/angular/lvlxpvkrnlk?file=app%2Fselect-optgroup-example.ts上也可以重现
只需将垫子选项的样式更改为类似的内容
.option-style {
height: 15px !important;
font-size: 12px !important;
}
并在中间添加更多项目并尝试在中间选择某些内容在这里,我尝试模拟情况: https ://stackblitz.com/edit/angular-lmkqjv ? file = app%2Fselect-optgroup-example.css
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.