时间戳

首页 > 解决方案 > 垫选择滚动不跳转到选定的垫选项

angular - 垫选择滚动不跳转到选定的垫选项

问题描述

作为用户，当我从键盘键入选项时，滚动条不会位于突出显示的项目上。此外，当我选择复选框时，滚动条会滚动到其他位置，而不是坚持选定的选项。

代码是

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

标签： angularangular6material-design

解决方案

我有同样的问题。就我而言，原因是我改变了我的垫子选项的高度与原始垫子选项相比，现在在选择项目材料时试图集中或将所选项目放在某个位置，但由于所有下拉列表的大小改变，我认为它正在计算位置错误并滚动到完全不同的项目。

这甚至可以在材料示例 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

推荐阅读