CSS primeNG p-下拉拉伸 100%
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/41354416/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
primeNG p-dropdown stretch 100%
提问by McLac
How to set the primeNGdropdown width to stretch 100% inside its container?
如何将primeNG下拉宽度设置为在其容器内拉伸 100%？
It seems to have fixed element.styleand the .ui-dropdown{ width: 100% }override does not work.
它似乎有固定的element.style和.ui-dropdown{ width: 100% }覆盖不起作用。
回答by McLac
I found to use the Responsive approach and apply .ui-fluidstyle with Grid CSS at container while p-dropdownshould have the [autoWidth]="false"attribute.
我发现使用响应式方法并在容器中应用.ui-fluid样式和 Grid CSS，而p-dropdown应该具有[autoWidth]="false"属性。
Example:
例子：
<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>
回答by Ziggler
In my case I used autoWidth = false and set style attrribute like below
在我的例子中，我使用了 autoWidth = false 并设置了如下所示的样式属性
<p-dropdown [options]="educationLevels" [(ngModel)]="selectedEducationLevel"
name="educationlevel" autoWidth="false" [style]="{'width':'100%'}"></p-dropdown>
回答by Aravind
回答by Ganesh Doke
You should be editing a class in a primeng.min.css file as below,
您应该在 primeng.min.css 文件中编辑一个类，如下所示，
.ui-dropdown .ui-dropdown-panel {
min-width: 100%;
width: max-content;
}<p-dropdown id="id" [options]="list"></p-dropdown>then Dropdownlist should take size of biggest option.
那么下拉列表应该采用最大选项的大小。
回答by Gerson Huarcaya
"autoWidth" did not work for me, I just did this in my CSS:
“autoWidth”对我不起作用，我只是在我的 CSS 中做到了这一点：
p-dropdown {
min-width: 80%;
}
.ui-dropdown{
width: 100%;
}
