如何正确设置 p:autoComplete 宽度以填充面板

Posted 2023-03-06

【中文标题】如何正确设置 p:autoComplete 宽度以填充面板

【英文标题】：How to correctly set p:autoComplete width to fill a panel

【发布时间】：2017-04-08 21:26:59

【问题描述】：

如何设置自动完成宽度以正确填充面板？

如您所见，使用：

.ui-autocomplete input 
        width: 100%;
    

会将箭头移出面板

编辑：panelGrid

<p:panelGrid columns="3" style="border: hidden; width: 100%" styleClass="ui-panelgrid-blank">
                        <p:panelGrid>
                            <p:outputLabel value="Item name" for="haveName" />
                            <br/>
                            <p:autoComplete id="haveName" effect="fade" dropdown="true" forceSelection="true"/>
                        </p:panelGrid>

                        <p:panelGrid>
                            <p:outputLabel value="Paint" for="havePaint" />
                            <br/>
                            <p:autoComplete id="havePaint" effect="fade" dropdown="true" forceSelection="true"/>
                        </p:panelGrid>

                        <p:panelGrid>
                            <p:outputLabel value="Certification" for="haveCert" />
                            <br/>
                            <p:autoComplete id="haveCert" effect="fade" dropdown="true" forceSelection="true"/>
                        </p:panelGrid>
                    </p:panelGrid>

EDIT2：当我在 autoComplete 标记中设置 style="width: 100%" 时会发生这种情况：

EDIT3：当我将两者结合时会发生这种情况：

【问题讨论】：

填充什么面板？

我已经添加了我的 .xhtml 页面的 panelGrid 代码

但是为什么你会在自动完成而不是自动完成本身中调整输入的大小？

检查我的第二次编辑。

如果你把两者结合起来呢？这都是普通的 css... 没有特别的 jsf 或 PrimeFaces。而客户端生成的 html 在这里更为重要。

【参考方案1】：

如果其他人想知道如何在以下位置实现完全响应式自动完成组件：

PrimeNg 版本：4.0.3 角度：4.0.3

对我来说，世界上唯一可行的方法就是结合这些风格：

 [style]="'width':'100%'" [inputStyle]="'width':'100%'" class="p-autocomplete"

具有以下css定义：

.p-autocomplete
    width: 100%;
  

这有帮助！

【参考方案2】：

这样对我有用

.ui-autocomplete
width: 100% !important;
.ui-autocomplete-input
width: 90% !important;

【参考方案3】：

在primeng 11.3.2版本中，你必须结合[style]和[inputStyle]：

[style]="'width':'100%'" [inputStyle]="'width':'100%'"

如果您使用属性[multiple] =" true "，请将<p-autoComplete> </p-autoComplete> 包装在span 中，并使用类 p-fluid

<span class="p-fluid">
    <p-autoComplete class="mdb-autocomplete" field="email" placeholder="Search user"
        [(ngModel)]="item_ac" [suggestions]="filterAC"[multiple]="true"
        [style]="'width':'100%'" [inputStyle]="'width':'100%'" 
        (completeMethod)="onCompleteAC($event)" 
        (onSelect)="onSelectAC($event)" (onUnselect)="onUnselectAC($event)">
        <ng-template let-item_ac pTemplate="item">
            <div class="div-item-ac">
            
            </div>
        </ng-template>
    </p-autoComplete>
</span>

【参考方案4】：

使用!important css 声明。

PrimeNG ULTIMA 5.2.0、PrimeNG 5.2.0

当您的<p-autoComplete> 元素是ui-inputgroup 的子元素时，为.md-autocomplete 设置样式width

将导致width 被定义body .ui-inputgroup *[class^="md-"] 覆盖。

看看.md-autocomplete 中的width 是如何被覆盖的（在底部）：

您应该定义!important 看看.md-autocomplete 中的width 如何不被覆盖（在底部）：

另外，元素p-autoComplete 的样式属性应如下所示： [style]="'width':'100%'" [inputStyle]="'width':'100%'".

【讨论】：

当然更好的选择器不起作用，而不是使用 !important

【参考方案5】：

在 PF 6.1 中，<p:autocomplete> 有一个 size 属性，将其设置为“100%”对我有用。

【讨论】：

javax.el.E​​LException: 无法将 [100%] 类型的 [class java.lang.String] 转换为 [int]

将其设置为例如 10 似乎也不起作用。

【参考方案6】：

使用版本 13，您可以像这样在 span 标签上使用流体类

<span class="p-fluid"> <p-autoComplete [(ngModel)]="selectedCountries" [suggestions]="filteredCountries" (completeMethod)="filterCountry($event)" field="name" [multiple]="true"> </p-autoComplete> </span>

那么您的自动完成功能将占用 100% 的宽度