primeNG p-dropdown伸缩100％

Question

如何将 primeNG 下拉宽度设置为在其容器内伸展100％？

它似乎修复了 element.style 和 .ui-dropdown {width：100％} 覆盖 不起作用。

Answer 1

我发现使用自适应方法并将 .ui-fluid 样式应用于容器中的Grid CSS，而 p-dropdown 应该具有 [autoWidth] = ＆＃34; false＆＃34; 属性。

示例：

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

在我的情况下，我使用autoWidth = false并设置样式attrribute，如下所示

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

Answer 3

你应该使用下面提到的类写一个css文件，

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

将其设为!important

<强> LIVE DEMO

Answer 4

对我来说，

[style] =“ {'minWidth'：'100％'}”

做到了！

然后我这样使用：

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

Answer 5

你应该在primeng.min.css文件中编辑一个类，如下所示，

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

然后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;
}

为了处理可能的文本溢出并显示一个像这样的省略号：

此解决方案改编自 here。

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

“ autoWidth”对我不起作用，我只是在CSS中做到了这一点：

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