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,
The data bound to a component usually does not affect accessing and styling the component. I have modified the data source used by the igx-select in the previously attached sample and the input width is the same.
Anyway, I am glad that you managed to achieve your requirement.
Let me know if you have any further questions on this matter.
Regards,Teodosia HristodorovaSoftware Developer
Okay, I understood what the problem was. In your example the 'data' is extended with the 'Locations'. I have a complex 'data' and I cannot extend it. Maybe there is no other solution to use the object 'Locations' without extending the 'data'.
As I previously mentioned in order to change the width of the igx-select, you should access its input-group and set its width. This could be done via a querySelector or some different approach, however, it is hard to say why the elements collection is empty without a sample that reproduces it.
Having this in mind, in order to be able to investigate this behavior, please modify the previously attached sample in order to replicate the issue. Alternatively, if the behavior cannot be replicated please feel free to provide your own sample. Remove any external dependencies and code that is not directly related to the issue and attach it in this case.
Having a working sample on my side, which I can debug, is going to be very helpful in finding the root cause of this behavior.
Thank you for your cooperation.
Looking forward to hearing from you.
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!