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

[Elvin]

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?

[Martin Bechev]

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

[Elvin]

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 Bechev]

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.