Set width of igx-select

Question

I have multiple igx-selects that are used to display a drop-down list.

I want to change the width of this particular igx-select (not for all igx-selects that I have) as well as the font-size of the list. As I tried nothing worked. Is this possible in SCSS?

Here is my igx-select block.

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

Thank you very much!

Answer 1

IgxSelect's width depends on the width of its parent container. If you want to change the width of igxSelect you should set the width of its parent like this:

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

If you need to set the width of the select's dropdown this is a little more tricky. One way to achieve this is to handle opening event of the select. In the handler you can set the width of the select toggle element, this is the dropdown, like this:

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

Keep in mind this may brake the positioning of the select dropdown. Setting of the font of the select items could be done via CSS applied to the item itself like this:

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

Again this may break the positioning of the select items. One way to set the size of the items is via DisplsyDensity.