PrimeFaces PanelGrid 响应式

Question

我在 Primefaces 的 PanelGrid 响应时遇到问题

输入不在标签下方。

PrimeFaces 6.0

<p:panelGrid columns="4" layout="grid" styleClass="ui-panelgrid-blank">
                <p:outputLabel value="Pessoa:"/>
                <p:outputLabel value="Login:"/>
                <p:outputLabel value="Senha:"/>
                <p:outputLabel value="Grupos:"/>

                <p:autoComplete id="inptNomeID" value="#{usuarioBean.usuario.pessoa}" completeMethod="#{usuarioBean.autoCompletePessoa}"
                    var="pessoa" itemLabel="#{pessoa.nome}" itemValue="#{pessoa}" converter="omnifaces.SelectItemsConverter" forceSelection="true"/>

                <p:inputText id="inptLoginID" value="#{usuarioBean.usuario.login}"/>

                <p:password id="inptSenhaID" value="#{usuarioBean.usuario.senha}"/>

                <p:selectCheckboxMenu id="inptGrupoID" value="#{usuarioBean.usuario.grupos}" label="Cities" multiple="true"
                                  filter="true" filterMatchMode="startsWith" panelStyle="width:250px">
                    <f:selectItems value="#{usuarioBean.listaGrupos}" />
                </p:selectCheckboxMenu>
</p:panelGrid>

请看下面的图片

不响应 enter image description here

响应错误

enter image description here

Answer 1

您需要将 outputLabel 放在它对应的元素之前。例如：

<p:outputLabel value="Pessoa" />
<p:autoComplete id="inptNomeID" value="#{usuarioBean.usuario.pessoa}" completeMethod="#{usuarioBean.autoCompletePessoa}"
                var="pessoa" itemLabel="#{pessoa.nome}" itemValue="#{pessoa}" converter="omnifaces.SelectItemsConverter" forceSelection="true"/>

这可确保标签正确定位在移动响应视图中相应输入的顶部。

更多详情，请查看本页底部的示例代码： PrimeFaces Responsive Documentation