PrimeNG p-Dropdown 宽度比内容窄答案

【问题标题】：PrimeNG p-Dropdown width narrower than contentPrimeNG p-Dropdown 宽度比内容窄
【发布时间】：2022-08-21 18:19:09
【问题描述】：

我正在使用 PrimeNG 和 p-dropdown 来显示一堆过滤选项。但是，在尝试使事情响应时，p-dropdown 似乎被固定为内容的最小宽度，我似乎无法覆盖它，以便它可能会省略内容或截断它等。

这是使显示变窄之前的图像：

如果我调整浏览器的大小，这就是它的样子...

如果您注意到，成本中心的下拉菜单会缩小到最小内容，但不会更小。

如果我用输入框替换下拉列表：

我尝试了一些不同的 CSS 选项，但无济于事。

[style]=\"{\'minWidth\':\'20px\'}\"

我让它在另一个方面工作得很好，它在变宽时尺寸正确，而不是变窄。

那么我错过了什么？

谢谢，缺口

标签： primeng-dropdowns

【解决方案1】：

我相信要使其正常工作，您需要将 autoWidth 字段设置为 false。

例如：

<p-dropdown
    [options]="cities"
    [(ngModel)]="selectedCity"
    optionLabel="name"
    optionValue="code"
    autoWidth="false"
    [style]="{ minWidth: '50px', width: '50%' }">
</p-dropdown>

这给了我以下信息：

Stackblitz for reference

【讨论】：