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%;
}