web-dev-qa-db-ja.com

primeNG pドロップダウンストレッチ100％

primeNGドロップダウン幅を設定して、コンテナ内で100％ストレッチする方法は？

element.styleを修正しているようで、。ui-dropdown {width：100％}オーバーライドは機能しません。

cssprimeng
17
McLac

Responsiveアプローチを使用して、コンテナでグリッドCSSに。ui-fluidスタイルを適用する一方で、p-dropdownには[autoWidth] = "false "属性。

例：

<div class="ui-grid ui-grid-responsive ui-fluid">
    <div class="ui-grid-row">
        <div class="ui-grid-col-12">
            <p-dropdown [autoWidth]="false"></p-dropdown>
        </div>
    </div>
</div>
27
McLac

私の場合、私はautoWidth = falseを使用し、以下のようにスタイル属性を設定しました

<p-dropdown [options]="educationLevels" [(ngModel)]="selectedEducationLevel" 
name="educationlevel" autoWidth="false" [style]="{'width':'100%'}"></p-dropdown>
18
Ziggler

下記のクラスを使用してcssファイルに書き込む必要があります。

.ui-dropdown    {
  width:100% !important;
}

!importantに設定します

LIVE DEMO

2
Aravind

次のようにprimeng.min.cssファイルのクラスを編集する必要があります。

.ui-dropdown .ui-dropdown-panel {
  min-width: 100%;
  width: max-content;
}
<p-dropdown id="id" [options]="list"></p-dropdown>

ドロップダウンリストは最大のオプションのサイズを取る必要があります。

0
Ganesh Doke