As I mentioned earlier, the best way to achieve your requirements is to use OverlaySettings. This way, you can adjust the position of the drop-down list to your liking at any location next to the component that spans it. Also, to use only css styles it is better to redefine the styles already set on the overlay container and drop-down list, as I explained this can be achieved by selecting the elements with their different ids. Have in mind that adding new classes with new styles may cause style conflicts. Please review the sample again using the OverlaySettings.

However, new styles can be added to given components and their elements. For this purpose, this can be achieved by accessing the igx-select and igx-dropdown components themselves with a reference to them. Then with the reference in the ngAfterViewInit hook after the page has loaded the elements in the given component can be accessed and their className property will be added to the custom classes. Another option is to access a document element using pure JavaScript using document.getElementsByClassName() or document.getElementById().

Here you can find this approach with adding classes to given elements. 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

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.

The described scenarios can be observed here:

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.

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