primeNG p-下拉拉伸 100%

Question

如何將primeNG下拉寬度設置為在其容器內拉伸 100%？

它似乎有固定的element.style和.ui-dropdown{ width: 100% }覆蓋不起作用。

Answer 1

在我的情況下，我使用 autoWidth = false 並設置樣式屬性，如下所示

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

Answer 2

我發現使用響應式方法並在容器中應用帶有網格 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>

Answer 3

為了我，

[樣式]="{'minWidth':'100%'}"

成功了！

然后我這樣使用：

<span style="width: 100%">
   <p-dropdown [style]="{'minWidth':'100%'}" [options]="items" [(ngModel)]="selecteditem"></p-dropdown>
</span>

Answer 4

您應該使用下面提到的類在 css 文件中編寫，

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

將其設置為!important

現場演示

Answer 5

您應該在 primeng.min.css 文件中編輯一個類，如下所示，

 .ui-dropdown .ui-dropdown-panel { min-width: 100%; width: max-content; }

 <p-dropdown id="id" [options]="list"></p-dropdown>

那么 Dropdownlist 應該采用最大選項的大小。

Answer 6

為了我：

.ui-dropdown {
  max-width: 100%;
}

成功了，這是我的html：

<p-dropdown
  [options]="sitBusinessPartner"
  [filter]="true"
  [(ngModel)]="businessPartner"
  (onChange)="changeBusinessPartner()"
  [autoWidth]="false"
></p-dropdown>

編輯，我建議使用這個：

.ui-dropdown.ui-dropdown-clearable .ui-dropdown-label {
  text-overflow: ellipsis;
}

.ui-dropdown .ui-dropdown-label {
  text-overflow: ellipsis;
}

為了處理可能的文本溢出並顯示一個很好的省略號，如下所示：

此解決方案改編自此處。

Answer 7

你可以試試這個

html:

<div class="p-col-10">
  <span class="p-fluid">
    <p-dropdown></p-dropdown>
  </span>
</div>

CSS：

.p-dropdown-panel {
  left: 0 !important;
  max-width: 100% !important;
}
.p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item {
  white-space: inherit;
}

Answer 8

在 css 文件中試試這個。

:host ::ng-deep .p-dropdown {
    width: 100%;
}

Answer 9

我所做的和為我工作的：

使用網格系統，您可以選擇顯示元素的“列”數。 例如，如果要在容器內拉伸 100%，請考慮元素占用 12 列，如下面的代碼所示：

<div class="p-formgrid p-grid">
        <div class="p-field p-col">
            <p-dropdown></p-dropdown>
        </div>
</div>

但是假設你想在它旁邊放另一個元素並希望它們具有相同的寬度，你會有這樣的東西：

<div class="p-formgrid p-grid">
        <div class="p-field p-col">
            <p-dropdown></p-dropdown>
        </div>
        <div class="p-field p-col">
            <element></element>
        </div>
</div>

您還可以根據元素占用的列數為每個元素設置不同的寬度：

<div class="p-formgrid p-grid">
        <div class="p-field p-col-7">
            <p-dropdown></p-dropdown>
        </div>
        <div class="p-field p-col">
            <element></element>
        </div>
</div>

列的總和必須為 12。如果您說第一個元素的長度為 7 列，那么第二個元素將自動獲得 5 列。 嘗試不同的值，看看什么最適合你。

Answer 10

[autoWidth] attr 在 v7 中被刪除，但我能夠使用 >7 版本使用 styleClass="w-100": <p-dropdown styleClass="w-100"...>

Answer 11

“autoWidth”對我不起作用，我只是在我的 CSS 中這樣做了：

p-dropdown {
    min-width: 80%;
}
.ui-dropdown{
    width: 100%;
}