Hello Michael,

I have been looking into your question and this is expected behavior because the igx-drop-down component is toggled in an overlay element that takes the height and width of the given body element, i.e. when the drop-down is toggled it does not expand the height of the page. In this case there are two approaches that could be taken and that is when the dropdown is toggled to stretch the height of the page so that there is space below to select an item. The other approach is as you mentioned with position settings added to an overlay settings object to make the dropdown toggle up to select items.

Regarding your question, what I suggest is to first create a reference to your drop-down.

<igx-drop-down #dropdown>
</igx-drop-down>

@ViewChild('dropdown', { static: true })
public igxDropDown: IgxDropDownComponent;

After that you will create an object of type OverlaySettings. When loading the page in the ngOnInit lifecycle hook you will also create an object of type PositionSettings where you will set your preferences according to your custom logic of where to expand the drop-down component using the horizontalDirection and horizontalStartPoint properties as well as the verticalStartPoint and verticalDirection properties.

const positionSettingsDropDown: PositionSettings = {
            horizontalDirection: HorizontalAlignment.Left,
            horizontalStartPoint: HorizontalAlignment.Right,
            verticalStartPoint: VerticalAlignment.Top,
            verticalDirection: VerticalAlignment.Top
};

After that, for the created OverlaySettings object, the target property will pass the reference to the native element of the drop down, and for the positionStrategy property, the already created PositionSettings object from earlier will be passed.

this.customOverlaySettingsDropDown = {
            target: this.igxDropDown.element.nativeElement,
            positionStrategy: new ConnectedPositioningStrategy(positionSettingsDropDown)
};

Finally, the OverlaySettings object will be passed to the button that expands the given drop-down.

<button igxButton="raised" [igxToggleAction]="dropdown" [overlaySettings]="customOverlaySettingsDropDownUP">Toggle Up</button>

The described scenario could be observed here:

In addition, I have prepared small sample with the two options to expand the drop-down down and up for your reference to illustrating this behavior 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