I have multiple igx-selects that are used to display a drop-down list. The igx-selects are inside of a column of an igx-grid and inside of igx-dialog.

I want to change the width of a particular igx-select (e.g. the igx-selects inside of a particular column, not for all igx-selects that I have) .

I tried to use <div style="width: 430px"> around my igx-select block and it did not work.

Here is one of my igx-selects block inside my igx-grid.

<div class="wrapper-class">
<igx-grid igxPreventDocumentScroll
#grid1
igxOverlayOutlet
[height]="'500px'"
width="99%"
style="margin-top: 1%; margin-left: 0.5%; margin-right: 0.5%;"
[data]="cities"
[rowHeight]="40">

<igx-column width="113px" field="city" dataType="string" header="City" [resizable]="true" [editable]="true" [sortable]="true" [movable]="true" [cellClasses]="redRowCityClass">
<ng-template igxCell let-cell="cell" let-val>
<div [ngClass]="[cell.row.deleted?'upfont' : 'drop-down-grid']">

<igx-select #selectCity
placeholder="Select city"
[overlaySettings]="overlaySettings"
[ngClass]="[cell.row.deleted?'upfont' : 'drop-down-grid']"
[(ngModel)]="cell.value">
<igx-select-item style="font-size: 12px;" *ngFor="let item of citiesArr" [value]="item">
{{ item }}
</igx-select-item>
</igx-select>
</div>
</ng-template>

<ng-template igxCell let-cell="cell">
<div [ngClass]="[cell.row.deleted?'upfont' : 'text-cell']">{{cell.value}}</div>
<button class="action-button" [ngClass]="[cell.row.deleted?'grey-button-deleted-row' : 'black-button-edit-cell']" igxButton="icon" [disabled]="cell.row.deleted" (click)="editSelectedData(cell.id.rowID,cell.column.field, cell.value)">
<igx-icon class="action-icon">edit</igx-icon>
</button>
</ng-template>
</igx-column>

</igx-grid>
</div>

Here is one of my igx-selects block inside my igx-dialog.

<igx-dialog #dialogAddNewCity title="New city">

<div class="new-city-dialog">

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

</div>
</igx-dialog>

Thank you in advance!