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

你能修改它，以重現該問題？這將有助於更快找到錯誤行爲的原因。