剣道のダイアログ内の剣道のポップアップ

Question

私は剣道のダイアログ内で使用する角度成分で剣道ポップアップを持っています。ユーザーがアイコンをクリックすると、ポップアップがアイコンの隣に表示されます。ポップアップの位置は、剣道のダイアログ内にないときはうまくいきます。しかし、それは剣道のダイアログ内にあるとき、ポジショニングは正しくありません。剣道のダイアログ内でボタンをクリックすると、アイコンの隣にポップアップが表示されません。それは他の場所に現れます。

角度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デモで問題を再現していますが、剣道ダイアログのコンポーネントでポップアップの位置がうまくいくようです：

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

あなたが問題を再現するために、それを修正してもらえますか？これは、誤った動作の原因をより早く見つけるのに役立ちます。