剑道对话中的剑道弹出

Question

我在一个角色组件中有一个kendo-popup，我在一个kendo-dialog中使用它。当用户点击图标时，弹出窗口将显示在图标旁边。当弹出窗口不在剑道对话框内时，弹出窗口的定位工作正常。但是当它在一个剑道对话框中时，定位是不正确的。在kendo-dialog中单击按钮时，弹出窗口不会显示在图标旁边。它显示在其他地方。

Angular 2 Component 1 <comp-1>：

<span>
    <input type="text" #anchor />
    <button type="button" click="toggleView()"><i class="fa fa-cog fa-2x"></i>
    </button>
</span>
<kendo-popup [anchor]="anchor"><!-- Some Content --></kendo-popup>

Angular 2 Component 2：

<div click="openDialog()"></div>
<div>
    <kendo-dialog *ngIf="showDialog">
        <comp-1></comp-1>
    </kendo-dialog>
</div>

当我单击div打开对话框时，kendo-popup不会显示在输入标记旁边。它显示在右下方的某个地方。

编辑1：

尝试将弹出窗口移动到范围内。仍然没有工作。

Angular 2 Component 1 <comp-1>：

<span>
    <input type="text" #anchor />
    <button type="button" click="toggleView()"><i class="fa fa-cog fa-2x"></i>
    </button>
    <kendo-popup [anchor]="anchor"><!-- Some Content --></kendo-popup>
</span>

Angular 2 Component 2：

<div click="openDialog()"></div>
<div>
    <kendo-dialog *ngIf="showDialog">
        <comp-1></comp-1>
    </kendo-dialog>
</div>

注意：我故意遗漏了这些风格。在原始资源中，我已正确设置所有样式。

Answer 1

您必须使用目标元素上的锚点id指定弹出窗口的显示位置：

<div>
    <target-tag #anchor></target-tag>
</div>
<div>
    <kendo-popup [anchor]="anchor">
        <Content to display>
    </kendo-popup>
</div>

• 我有一个Kendo Angular2 Slack：https://kendouiangular2.slack.com

Answer 2

我试图在一个独立的Plunker演示中复制这个问题，但似乎弹出窗口在Kendo Dialog组件中的位置很好：

在Chrome和Safari中测试。

这是对话框内容：

<input #anchor style="width: 100px"/>
<button kendoButton (click)="toggle()">Toggle</button>
<kendo-popup *ngIf="popupOpen" [anchor]="anchor" style="width: 100px">
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</kendo-popup>

这是Plunker的实际测试演示：

http://plnkr.co/edit/Y3oBZwa8xf0WiP462jW7?p=preview

您可以修改它以重现问题吗？这将有助于更快地找到错误行为的原因。

Answer 3

  

请使用您要弹出的div的div ID。

<div id="popupdiv"></div>

 $("#popupdiv").kendoWindow({
            title: "Inforamtion",
            resizeable: true,
            scrollable: false,
            width: "50%",
            actions: ["Pin", "Close"],//["Pin", "Refresh", "Maximize", "Close"],
            modal: true,
            //  pinned: true,
            animation: {
                close: {
                    effects: "fade:out"
                },
            }
        });