Popup Setting is not working in <kendo-editor><kendo-toolbar>

1 Answer 157 Views
DropDownList Editor
Elvin
Top achievements
Rank 1
Elvin asked on 11 Jun 2021, 03:45 AM

I have a very straight forward kendo-editor code like the one below

<div #containerRef> <kendo-editor style="height:500px"> <kendo-toolbar> <kendo-toolbar-dropdownlist kendoEditorFormat></kendo-toolbar-dropdownlist> </kendo-toolbar> </kendo-editor> </div>

 

But my problem is that the dropdown is not showing inside the control but instead it's appending in the root component. I tried adding [PopupSettings]="{appendTo: containerRef}" in <kendo-toolbar> but still not working.

this is my code in .ts

 

@ViewChild('containerRef', { read: ViewContainerRef, static:true }) public containerRef: ViewContainerRef;

 

I confirmed in chrome developer tools that the popup is appending in the root component,

that's why i use popupsettings but still it's not working.

Anyone experience the same issue?

1 Answer, 1 is accepted

Sort by
0
Accepted
Martin
Telerik team
answered on 15 Jun 2021, 07:27 AM

Hello Elvin,

I tested the provided markup in the following StackBlitz example, but the popup seems to be appended correctly without setting any additional options:

https://stackblitz.com/edit/angular-qoqhpy

By default, the popup will be appended to the root component.

In case the issue persists, could I ask you for a runnable demo that reproduces the issue (or modify the above StackBlitz) so that I can debug it and be able to assist further. Thank you in advance.

Regards,
Martin
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Elvin
Top achievements
Rank 1
commented on 15 Jun 2021, 09:24 AM

Thank you for your response, Yes we were able to fix the issue, We only notice that if the div that's wrap the Editor has a margin top set, that's the time it messed up the position of the dropdown popup. any idea about that?
Martin
Telerik team
commented on 18 Jun 2021, 05:53 AM

Hi Elvin,

Custom styles could be a potential cause of the issue, since adding margin-top to the wrapper div in this example, does not end up with a broken DropDownList popup.

Tags
DropDownList Editor
Asked by
Elvin
Top achievements
Rank 1
Answers by
Martin
Telerik team
Share this question
or