设置 igx-select 的宽度

Question

我有多个用于显示下拉列表的 igx-selects。

我想更改此特定 igx-select 的宽度（不适用于我拥有的所有 igx-selects）以及列表的字体大小。当我尝试时，没有任何效果。这在SCSS中可能吗？

这是我的 igx-select 块。

  <igx-select #selectCity
              placeholder="Select city"
              [overlaySettings]="overlaySettings"
              [(ngModel)]="city" name="cities">
      <igx-select-item style="width: 430px" *ngFor="let item of cities" [value]="item">
          {{ item }}
      </igx-select-item>
  </igx-select>

非常感谢！

Answer 1

IgxSelect 的宽度取决于其父容器的宽度。如果你想改变 igxSelect 的宽度，你应该像这样设置它的父级的宽度：

<div style="width: 430px">
  <igx-select #selectCity
              placeholder="Select city"
              [overlaySettings]="overlaySettings"
              [(ngModel)]="city" name="cities">
      <igx-select-item *ngFor="let item of cities" [value]="item">
          {{ item }}
      </igx-select-item>
  </igx-select>

如果你需要设置选择下拉列表的宽度，这有点棘手。实现此目的的一种方法是处理选择的 opening 事件。在处理程序中，您可以设置选择切换元素的宽度，这是下拉列表，如下所示：

public selectOpening(evt: IBaseCancelableBrowserEventArgs) {
   evt.owner.toggleDirective.element.style.width = "430px";
}

请记住，这可能会破坏选择下拉列表的定位。可以通过应用于项目本身的 CSS 来设置所选项目的字体，如下所示：

  <igx-select #selectCity
              placeholder="Select city"
              [overlaySettings]="overlaySettings"
              [(ngModel)]="city" name="cities">
      <igx-select-item style="font-size: 15px;" *ngFor="let item of cities" [value]="item">
          {{ item }}
      </igx-select-item>
  </igx-select>

同样，这可能会破坏所选项目的定位。设置项目大小的一种方法是通过 DisplsyDensity。