Question

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

如您所见，使用：

.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：当我将两者结合起来时会发生这种情况：

Answer 1

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

PrimeNg版本：4.0.3 Angular：4.0.3

对我来说，世界上唯一可行的东西就是这种风格的组合：

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

具有以下css定义：

.p-autocomplete{
    width: 100%;
  }

Hooope这有帮助！

Answer 2

以这种方式为我工作

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

Answer 3

使用!important css声明。

PrimeNG ULTIMA 5.2.0，PrimeNG 5.2.0

当width元素是.md-autocomplete

的子元素时，为<p-autoComplete>设置样式ui-inputgroup

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

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

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

此外，元素p-autoComplete的style属性应如下所示： [style]="{'width':'100%'}" [inputStyle]="{'width':'100%'}"。

Answer 4

在PF 6.1 some string1 some string2 include: "base_pricing_app_model_my_deployment_id_my_deployment_id.model.lkml" include: "base_map_layers_my_deployment_id.model.lkml" some string3 ...中有一个size属性，将其设置为＆＃34; 100％＆＃34;适合我。

Answer 5

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

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

5 个答案: