kendo-dialog内kendo-popup

Question

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

角2组件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> 

角2子项目2：

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

当我点击div来打开对话框，剑道，弹出窗口不会旁边的输入显示标签。它显示在右下角的某处。

编辑1：

试图弹出移动到跨度内。还是行不通。

角2组件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> 

角2子项目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> 

• 我有剑道Angular2松弛：https://kendouiangular2.slack.com

Answer 2

我试着在独立的Plunker演示中复制问题，但似乎Kendo对话框组件中的弹出位置恰好：

在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

你能修改它，以重现该问题？这将有助于更快找到错误行为的原因。