作为用户,当我从键盘键入选项时,滚动条未位于突出显示的项目处。此外,当我选中复选框时,滚动条会滚动到其他位置,而不是停留在选定的选项上。
代码是
<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>
最佳答案
我遇到了同样的问题。出于我的情况是,与原始垫子相比,我更改了垫子的高度,现在选择项目 Material 试图集中或将所选项目放在某种位置,但是由于所有下拉台的大小变化,我认为它正在计算位置错误并滚动到完全不同的项目。
这甚至可以在 Material 示例上重现 https://stackblitz.com/angular/lvlxpvkrnlk?file=app%2Fselect-optgroup-example.ts
只需将 mat-option 的样式更改为类似的样式即可
.option-style {
height: 15px !important;
font-size: 12px !important;
}
并在中间添加更多项目并尝试在中间选择一些东西 在这里,我试图模拟情况: https://stackblitz.com/edit/angular-lmkqjv?file=app%2Fselect-optgroup-example.css
https://stackoverflow.com/questions/57080553/
相关文章:
android - react native : compileDebugJavaWithJavac
c++ - 如何使用跳过部分 device_vector 的自定义仿函数实现 thrust::tra
.net-core - 部署到 Azure 后,在 Angular 7 中使用 i18n 的本地化不
javascript - 使用 CSS Grid 调整图表大小问题
c# - 具有 Azure Active Directory 的 Web 应用程序始终重定向到 '~
python - 需要使用 pyodbc 将较小的批处理插入到 Teradata 表中