PrimeNGコンポーネントを使用するAngular2アプリがあります。
ダイアログボックス内にドロップダウンが必要です。ただし、これを実装すると、下のスクリーンショットに示すように、ダイアログボックスの制限によってドロップダウンが途切れます。ダイアログの上に表示し、すべてのオプションを表示する必要があります。
これは小さなダイアログに過ぎず、空の未使用のスペースがたくさんあるので、これのために大きなダイアログを作成したくありません。
これの私のhtmlコードは以下の通りです:
<p-dialog header="Repack" [(visible)]="display" showEffect="fade" minHeight="200">
<div class="row col-md-12" align="center">
<button pButton (click)="viewRepack()" label="View Repack"></button>
</div>
<div class="row col-md-12"><strong>Edit Table Assignment: </strong></div>
<p-dropdown [options]="tables" [(ngModel)]="selectedTable" [style]="{width: '100%'}"></p-dropdown>
<button pButton label="Save" (click)="save()" style="float:right;margin-right:3px;margin-top:5px;"></button>
</p-dialog>
誰かがこれについて何かアドバイスを提供することができれば、それは非常に高く評価されます。
属性appendTo
を追加する必要があります。
例えば.
<p-dropdown appendTo="body" [options]="tables" [(ngModel)]="selectedTable" [style]="{width: '100%'}"></p-dropdown>
これはOfficial NG Prime Documentationからのものです。ダイアログにドロップダウンなどのオーバーレイを含む他のコンポーネントが含まれている場合、オーバーフローのためにオーバーレイ部分がダイアログの境界を超えることはできません。これを解決するには、本文にオーバーレイするか、ダイアログでオーバーフローを許可します。
<p-dialog>
<p-dropdown appendTo="body"></p-dropdown>
OR
<p-dialog [contentStyle]="{'overflow':'visible'}">
<p-dropdown></p-dropdown>
これが私のために働いたコードです:
<p-dialog header="Repack" [(visible)]="display" showEffect="fade" resizable="true">
<div class="row col-md-12" align="center" style="overflow-y:visible">
<button pButton (click)="ViewRepack()" label="View Repack"></button>
</div>
<div class="row col-md-12"><strong>Edit Table Assignment: </strong></div>
<p-dropdown [options]="tables" [(ngModel)]="selectedTable" [style]="{width:'200px', position:'fixed'}"></p-dropdown>
<button pButton label="Save" (click)="ChangeTable()" style="float:right;margin-right:3px;"></button>
</p-dialog>
この問題を解決するには、主に2つの方法があります。
ダイアログをオーバーフローできるようにする必要がある各コンポーネントにappendTo
セクションを追加します。
<p-dialog>
<p-dropdown appendTo="body"></p-dropdown>
</p-dialog>
このアプローチの問題:(a)オーバーフローする可能性のあるダイアログの各項目にappendTo
セクションを追加する必要があります。 b)ダイアログの後ろのページがスクロールできるほど大きい場合、オーバーフロードロップダウンはダイアログではなくページと共にスクロールします。
推奨されるアプローチ:p-dialog
がオーバーフローすることを許可します。
<p-dialog [contentStyle]="{'overflow':'visible'}">
<p-dropdown></p-dropdown>
</p-dialog>
p-footer
を使用している場合、フッターが正しく表示されるように、CSSファイルに以下を含める必要がある場合もあります(これは、基本的にui-g-12
をdiv
に追加することですフッターを含む):
p-dialog /deep/ .ui-dialog-footer {
width: 100%;
float: left;
box-sizing: border-box;
padding: .5em;
}
注:これらのソリューションは両方とも PrimeNG Doc for p-dialog の下にリストされていますが、ドキュメントにはフッターを正しく表示する方法が説明されていません。
追加 [autowidth]="false"
からp-dropdown
例えば
<p-dropdown [options]="colors" [(ngModel)]="selectedColor"
[autoWidth]="false"></p-dropdown>
編集:さらに、コンポーネントで次のスタイルを使用してドロップダウンの幅を微調整できます
styles: [':Host /deep/ .ui-dropdown-items-wrapper { min-width: 250px}']