primeng 下拉标签宽度

Question

我使用 primeng 下拉菜单 输入，我想让包含标签占位符的 div 具有 100% 的宽度。
以下是我的使用方法：

<div class="ui-grid ui-grid-responsive ui-fluid">
    <div class="ui-grid-row">
        <div class="ui-grid-col-2">
            <p-dropdown [options]="solutionsDropDownData" [(ngModel)]="solutionDropDownValue" placeholder="Solution..."
                [filter]="true" (onChange)="onSolutionChange($event)">
            </p-dropdown>
        </div>
    </div>
</div>

问题是我在占位符后面有一个空格，而我希望占位符是全宽的。空间可见下图：

当我选择其他值时，例如长度较小，空间的宽度会发生变化，如果我使用相同的示例，它会变大。

我已经尝试过这种方法，但都没有奏效：

1. 使用了 autoWidth 参数，但是如果我将它与括号一起使用，这个参数会给我Can't bind to 'autoWidth' since it isn't a known property of 'p-dropdown'. 错误；如果我在不带括号的情况下使用它，错误就会消失，但它不起作用（我提到我导入了 DropdownModule）；

2. 使用如下 css 类（我分别使用它们，或者两者都使用）：

   .ui-dropdown-label-container{ 宽度：100% ！重要； }

   .ui-dropdown .ui-dropdown-panel { 最小宽度：100%！重要； 宽度：最大内容； }

3. 使用的样式参数。

Answer 1

这是因为您用于 PrimeNG 的样式表。我们遇到了同样的视觉问题，并通过将下面的 css 类添加到 styles.css 来实现这一点

.ui-dropdown .ui-dropdown-label-container {
    width: inherit !important;
}

实际上inherit 调用100%，我不明白为什么它不适合你。

Answer 2

我设法通过添加以下代码解决了这个问题：

基本上，我只是在 div 中添加了下拉菜单并更改了包含它的 div 的背景颜色。