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.
igx-selects
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) .
igx-select
I tried to use <div style="width: 430px"> around my igx-select block and it did not work.
<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!
Hello,I have been looking into your question and as it is mentioned in the IgxSelect styling section you have to style its containing components i.e. the input-group and the drop-down.
Having this in mind and depending on your requirement, you should set the width of the required select's input group or drop-down. I have prepared a small sample with igx-select within an igx-grid's column which could be found here.
Let me know if I may be of any further assistance.
Sincerely,Teodosia HristodorovaSoftware Developer
I found out that my selectElements is empty. There is why the length of the selectElements is equal 0. Maybe the right question would be: "How can I select all items from a column of igx-grid?". I read that selectElements.item(i) does not work for Angular, but Visual Studio suggests me to use it. Maybe you can help me?
Hello , thank you for the example. I tried it for my project, but unfortunately it did not work. I got an error "Element may be null" in the .ts-file on line:
(selectElements.item(i).children[0] as any).style.width = '420px';.
I tried to change it to:
(selectElements.item(i)?.children[0] as any).style.width = '420px';
and also I tried to check if the element selectElements.item(i) is equal to null. Both solutions did not work. Is there any other way to change the width of the igx-select? Thank you!