web-dev-qa-db-ja.com

ダイアログによって非表示にされたPrimeNGドロップダウン

PrimeNGコンポーネントを使用するAngular2アプリがあります。

ダイアログボックス内にドロップダウンが必要です。ただし、これを実装すると、下のスクリーンショットに示すように、ダイアログボックスの制限によってドロップダウンが途切れます。ダイアログの上に表示し、すべてのオプションを表示する必要があります。

enter image description here

これは小さなダイアログに過ぎず、空の未使用のスペースがたくさんあるので、これのために大きなダイアログを作成したくありません。

これの私の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>

誰かがこれについて何かアドバイスを提供することができれば、それは非常に高く評価されます。

angularprimengprimeng-dropdownsprimeng-dialog
8
DaRoGa

属性appendToを追加する必要があります。

例えば.

<p-dropdown appendTo="body" [options]="tables" [(ngModel)]="selectedTable" [style]="{width: '100%'}"></p-dropdown>
28
esdef

これはOfficial NG Prime Documentationからのものです。ダイアログにドロップダウンなどのオーバーレイを含む他のコンポーネントが含まれている場合、オーバーフローのためにオーバーレイ部分がダイアログの境界を超えることはできません。これを解決するには、本文にオーバーレイするか、ダイアログでオーバーフローを許可します。

<p-dialog>
<p-dropdown appendTo="body"></p-dropdown>

OR

 <p-dialog [contentStyle]="{'overflow':'visible'}">
<p-dropdown></p-dropdown>
5
Igor Radovanovic

これが私のために働いたコードです：

<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
DaRoGa

この問題を解決するには、主に2つの方法があります。

  1. ダイアログをオーバーフローできるようにする必要がある各コンポーネントにappendToセクションを追加します。

    <p-dialog>
    <p-dropdown appendTo="body"></p-dropdown>
</p-dialog>

    このアプローチの問題：（a）オーバーフローする可能性のあるダイアログの各項目にappendToセクションを追加する必要があります。 b）ダイアログの後ろのページがスクロールできるほど大きい場合、オーバーフロードロップダウンはダイアログではなくページと共にスクロールします。

  2. 推奨されるアプローチ：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 の下にリストされていますが、ドキュメントにはフッターを正しく表示する方法が説明されていません。

1
Steven Hoffman

追加 [autowidth]="false"からp-dropdown

例えば

<p-dropdown [options]="colors" [(ngModel)]="selectedColor"
            [autoWidth]="false"></p-dropdown>

編集：さらに、コンポーネントで次のスタイルを使用してドロップダウンの幅を微調整できます

styles: [':Host /deep/ .ui-dropdown-items-wrapper { min-width: 250px}']
0
Piero