Hello,I've been struggling while positioning the igx-select dropdown.I've got a couple of issues to discuss:- I tried to write the custom CSS to position the igx-dropdown and it worked fine but when I used the igx-select then firstly it's not taking its position according to that CSS even though both have the same class (the overlay and dropdown element is same for select dropdown and dropdown element).
- After that, I tried to read the position settings for select from the documentation and tried the "verticalStartPoint" to vertically position it but not worked.Best RegardsAbdullahScreenshot of the select box:
Screenshot of select dropdown:
Hello Abdullah,
I have been looking into your question determined, that the igx-drop-down component and the igx-select component use the same div container with class igx-overlay__content which contains the drop-down box itself with classes igx-drop-down__list and igx-toggle. The same css styles are applied to these elements that define the position and how the dropdown list looks. If certain css styles are overridden for the igx-drop-down component for example, they will also be overridden for the igx-select component and this can lead to style conflicts, as in this case with the dropdown list position. Also, the igx-select component is expanded by an input group that has position: relative, and the igx-drop-down component most often by a button or icon that does not have this css style position: relative. This means that when overwriting styles like position and offset, there will be a mismatch.
However, one thing that makes the two dropdown lists different is the content of those lists, the items in it. This determines the width, height, etc. These lists have the same classes but different ids, such as: #igx-drop-down-0-list, #igx-drop-down-1-list etc. This means that you can access the dropdown lists of the igx-select component as well as the igx-drop-down component and set different styles with different positions for them. However, I don't recommend this approach for overriding styles in general. Sample illustrating this suggestion could be found here.
What I recommend as an approach is to use the overlay settings for both components igx-select and for the element that toggles igx-drop-down. For this purpose, an object of type PositionSettings is created and horizontal and vertical directions and starting points are set. After that, an object of type OverlaySettings is created in which the target (the component to which the settings will be applied) and the position settings themselves are set. These settings are then referenced in the overlaySettings property of the igx-select component and the element that toggles the igx-drop-down component. So both components will have drop-down lists positioned according to them.
The described scenarios can be observed here:
In addition, I have prepared small sample illustrating this suggestion which could be found here. Please test it on your side and let me know how it behaves.
If you require any further assistance on the matter, please let me know.
Regards,
Georgi Anastasov
Entry Level Software Developer
Infragistics
Hi Georgi,Thanks so much for your valuable recommendations and I'd definitely give it some time to implement.but I wanna ask you one more thing, Is there any way I can give my own class to igx-dropdown and igx-select so I can style both of them differently ?regardsAbdullah