Forums Ignite UI for Angular
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Jerry Jonas
90
Orient igx drop down so that it stays on screen (need to be offset to left)
posted

I have an IGX Drop down that is to the right of the screen.  I want to ensure that it is left justified and goes off the right of the screen.  I want it to be aligned so that it goes to the left - like the second picture.

I copied code from the examples:

ts file ...

private _positionSettings = {
horizontalStartPoint: HorizontalAlignment.Left,
// horizontalStartPoint: HorizontalAlignment.Right,
verticalStartPoint: VerticalAlignment.Bottom,
verticalDirection: VerticalAlignment.Bottom
};
private _overlaySettings = {
closeOnOutsideClick: true,
modal: false,
positionStrategy: new ConnectedPositioningStrategy(this._positionSettings),
// positionStrategy: new AutoPositionStrategy(this._positionSettings),
scrollStrategy: new CloseScrollStrategy()
};
public toggleDropDown(eventArgs) {
this._overlaySettings.positionStrategy.settings.target = eventArgs.target;
this.igxDropDown.toggle(this._overlaySettings);
}


html:
<div *ngIf="HasAlerts">
<div class="sample-wrapper drop-down-wrapper">
<div class="button-sample">
<button igxButton="fab" (click)="toggleDropDown($event)" igxButtonColor="#FBB13C"
igxButtonBackground="#721C24" igxRipple="white">
<igx-icon fontSet="material" name="message"></igx-icon>
</button>
</div>
<igx-drop-down #dropdown3 class="dropdown-container">
<igx-drop-down-item class="dropdown-item" [igxDropDownItemNavigation]="dropdown3" *ngFor="let item of AlertData" >
{{item.DESCRIPTION }}
</igx-drop-down-item>
</igx-drop-down>
</div>
  1. </div>

i  

  • 90
    Verified Answer
    Offline posted

    I figured it out .  Setting  horizontalStartPoint to a negative number seems to work.   It'd be nice to be clearer in the documentations

    private _positionSettings = {
    horizontalStartPoint: -5,
    // horizontalStartPoint: HorizontalAlignment.left,
    verticalStartPoint: VerticalAlignment.Bottom,
    verticalDirection: VerticalAlignment.Bottom
    };