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
Thank you for following up.
I have been looking into your question and of course you can add your own custom classes to the igx-select and igx-drop-down components for additional custom styling, but this will be limited to styling only the visible part of the components. By design, as I have already explained, both components use the same elements and classes for the styling of a drop-down list that expands. For this reason, for different styling of drop-down lists, the styles of a given drop-down list must be overwritten by selecting its id and the ids of the items in it.
What I could suggest is to use Ignite UI for Angular Theming to change the look of the igx-select or igx-drop-down components as a start. For the igx-select component, input-group-theme and drop-down-theme are used, and for the igx-drop-down component, the drop-down-theme is used and the theme of the component you use to expand it in the sample is the igx-button component and button-theme is used. In this way, you will be able to style a given component as you wish, as for the drop-down, the styles of the list that is toggled will be the same for both components, but with the id of the list and the id of the items in it, different styles will be given.
First, in order for us to use the functions exposed by the theme engine, we need to import the index file in our style file:
@use "igniteui-angular/theming" as *;
Following the simplest approach, we create a new theme that extends the drop-down-theme or the input-group-theme and accepts some of the default theme's parameters.
$custom-drop-down-theme: drop-down-theme( $background-color: #fdfdfd, $header-text-color: #345779, $item-text-color: #2dabe8, $selected-item-background: #345779, $selected-item-text-color: #fdfdfd, $selected-hover-item-background: #345779, $selected-hover-item-text-color: #fdfdfd, $selected-focus-item-background: #345779, $selected-focus-item-text-color: #fdfdfd, $hover-item-background: rgba(0, 0, 0, 0.12), $hover-item-text-color: #345779, );
The last step is to pass the custom drop-down theme:
@include css-vars($custom-drop-down-theme);
Finally, the id of the drop-down lists and the items in it are unique and differ by a given number because they are auto generated. The given drop-down list on which the styles will be redefined is selected with its id and the new custom styles are written according to your preferences. The items, in turn, are also selected with their ids and the new styles are written. Styles are written when hovering and for classes where the item is selected and focused, these are: igx-drop-down__item--selected and igx-drop-down__item--focused.
More on styling the igx-select component can be found in this documentation topic, for the igx-drop-delete component in this topic, and for the igx-button component in this topic.
Hi Georgi,Thank you so much for your quick response.Actually, I do not want to change/apply the colors to the dropdown. I just want to apply the different CSS positionson both of them differently. Please let me know if there is a way to achieve this with only CSS.the solution you provided in the first reply was very complex there is no need to add that much code in the .ts file.there must be a prop or a way so that we can give different classes to any igx component to add extra styling.this is a very basic requirement and there is no option I can find in ignite.
Additionally, I would like to let you know that due to a national holiday I will be out of the office on 09/06/2022 and I will review any updates on 09/07/2022 and respond to you then.