Overwrite default value for appendTo setting of a popup

1 Answer 612 Views
DropDownList Popup
Anna
Top achievements
Rank 1
Anna asked on 14 May 2021, 10:27 PM | edited on 18 May 2021, 07:48 PM

We are having a problem with the location of popup that is placed into a modal dialog when user needs to scroll down the main window in order to access the control that open the modal. The link shows the problem 

https://vsolvit-git.github.io/kendo-popup

There are 2 buttons that open the same modal dialog. 
When dialog is open by clicking on the top button, popups in the modal (dropdown and datepicker) are displayed as expected.

 When the same dialog is open by clicking on the bottom button the popups are missaligned (since the default 'appendTo' setting for the popup is 'root' the position accounts for the scroll offset).

I tried setting value of  'appendTo' to 'component' in the popupSettings. This fixes the alignment issue but makes popup unreachable when the control is located near the bottom of the dialog. 

Thank you

1 Answer, 1 is accepted

Sort by
0
Svet
Telerik team
answered on 19 May 2021, 11:46 AM

Hi Anna,

Indeed in order to render the popup in the level where its component lives then appendTo: 'component' should be used. In such cases the container holding the component and its popup should be scrollable so that the user can reach the popup if it isn't entirely visible when opened.

I can also suggest to use the Kendo UI for Angular Dialog where the behavior of the popup is proper with its default configuration appendTo: 'root':

https://stackblitz.com/edit/angular-poynaq?file=app/app.component.ts

I hope this helps.

Regards,
Svetlin
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
DropDownList Popup
Asked by
Anna
Top achievements
Rank 1
Answers by
Svet
Telerik team
Share this question
or