PrimeNG DialogModuleをCalendarModuleでオーバーフローさせよう

Question

私はPrimeNGウィジェットを使ってAngular2で入力フォームを編集ポップアップダイアログを作成したいと思う。私はそのダイアログボックスの動的コンテンツに問題があります（スクリーンショットを参照）。

私は単純に他の要素の上に配置されているのdivにCalendarModuleをラップしようとしてきました。 （下の角テンプレートHTMLを参照してください）

<p-dialog [(visible)]="display" [modal]="true" [resizable]="false"> 
... 
<table class="ui-datatable-responsive"> 

<tbody> 
    <tr> 
    ... 
    </tr> 
    <tr> 
    <td class="ui-cell-data">Start By:</td> 
    <td class="ui-cell-data"> 
     <div [style]="generateSafeStyle('position:relative; z-index:1000')"> 
     <p-calendar dateFormat="dd.mm.yy" [(ngModel)]="value"></p-calendar> 
     </div> 
    </td> 
    </tr> 
</tbody> 
... 
</table> 
</p-dialog> 

しかし、DialogModuleはすべてのコンテンツをフレームしているようです。そのフレームをオーバーフローさせるためのハックはありますか？

あなたはそれをどのように扱いますか？

ありがとうございます。

P.S：generateSafeStyle関数は、注入されたDomSanitizerを使用して正常に動作します。

generateSafeStyle(style:string):SafeStyle{ 
return this.sanitizer.bypassSecurityTrustStyle(style); 
} 

Answer 1

あなたがofficial PrimeNG Calendar documentationをチェックすると、あなたはそれらの間で、あなたが必要なCSSを追加するために使用できるstyle属性があります、カレンダーコンポーネントの属性のリストを見つける：

<p-calendar dateFormat="dd.mm.yy" [(ngModel)]="value" 
[style]="{ 'position': 'relative', 'z-index': '1000' }"></p-calendar> 

Answer 2

これまで働いていた唯一のもの次のスタイルオプションがありました：

<p-calendar dateFormat="dd.mm.yy" [(ngModel)]="dueDate" [style]="{'position': 'fixed', 'overflow': 'visible', 'z-index': '999'}"> 

これはテーブルを壊しました。だから私はテーブルを取り除き、フレックスボックスを使って要素を整列させました。とにかくこのように見える。

Answer 3

それがオーバーフローに関連しています：そのdivの中に見える、それがこの問題を解決します：ダイアログで.ui-ダイアログ・コンテンツ

の自動クラス.ui-ダイアログ・コンテンツを持つdiv要素がありますがオーバーフローします。