Set igx-select Width Inside igx-grid Cells and igx-dialog

Hello,

 

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.

 

{{ item }}

 

{{cell.value}}

edit

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

 

{{ item }}

 

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 Hristodorova
Software Developer

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!

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,

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 Hristodorova
Software 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'.

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 Hristodorova
Software Developer