Position igx-select Dropdown Overlay and Align to Control

I am wondering how can i position the actual shown dropdown box of an igx-select box. It seems by default the dropdown always shows a bit further to left then the actual control. I want to be able for example to align the dropdown with the left edge of the control or be able to show items starting below the control and not have the items overlap the control.

Hello Alex,

Thank you for posting in our community.

What I can suggest for achieving your requirement is to use custom OverlaySettings of the igxSelect. More information about it can be found in the Select topic in our documentation. Here, in the sample of the Custom Overlay Settings part you can see an approach for your reference:

• To create custom OverlaySettings first have to define your template like so:

  <igx-select [overlaySettings]="customOverlaySettings">
       <igx-select-item *ngFor="let item of items">
           {​{​item}​}​
       </igx-select-item>
  </igx-select>

• Inside your typescript class, you would have something along the lines of:

  public customOverlaySettings: OverlaySettings;

 
  public ngOnInit(): void {​

        const positionSettings: PositionSettings = {​

            closeAnimation: scaleOutBottom,

            horizontalDirection: HorizontalAlignment.Right,

            horizontalStartPoint: HorizontalAlignment.Left,

            openAnimation: scaleInTop,           

            verticalDirection: VerticalAlignment.Bottom,

            verticalStartPoint: VerticalAlignment.Bottom

        }​;

        this.customOverlaySettings = {​

            target: this.select.inputGroup.element.nativeElement,

            positionStrategy: new ConnectedPositioningStrategy(

                positionSettings

            ),

            scrollStrategy: new AbsoluteScrollStrategy()

        }​;

      }​

  }​

• You can see that we create a PositionSettings object that is directly passed to our ConnectedPositioningStrategy, it is not required to do it, but since we want to define a custom positioning, we use them to override the strategy's default settings.

Please test the approach on your side and let me know whether you find it helpful.

Please let me know if you have any further questions or concerns.

Regards,

Viktor Kombov

Entry Level Software Developer

Infragistics, Inc.