PrimeFaces- p浮动标签：PanelGrid

Question

应该如何嵌入“浮动标签” - 如所述 - 进入AP：PANELGRID？

我遇到的问题是“ p：outputLabel”在“ p：inputText”的内部没有显示，但除此之外。

当前的代码：

<h:form>
    <p:panelGrid id="login-grid" columns="3">
        <span class="ui-float-label">
            <p:inputText id="float-input-username-signin" value=""/>
            <p:outputLabel for="@previous" value="Username"/>
        </span>
        <p:message id="login-username-msg" for="float-input-username-signin"/>
                                
                            
        <span class="ui-float-label">
            <p:password id="float-input-password-signin"/>
            <p:outputLabel for="@previous" value="Password"/>
        </span>
        <p:message id="login-password-msg" for="float-input-password-signin"/>
                            
        <p:commandButton value="Login" id="login-button" update="login-grid" action="#{loginBean.check}" />
                        </p:panelGrid>
</h:form>

我已经尝试将“浮动标签”放入DIV容器的内部，但它不起作用。

非常感谢。

Answer 1

P：PanelGrid（和H：PanelGrid）仅应包含JSF组件作为直接的孩子。它将为每个人渲染一个单元。因此，使用A H：PanelGroup Component（它将呈现span），而不是span标签。并使用列=“ 2”而不是3：

<p:panelGrid id="login-grid" columns="2">
    <h:panelGroup styleClass="ui-float-label">
        <p:inputText id="float-input-username-signin" value=""/>
        <p:outputLabel for="@previous" value="Username"/>
    </h:panelGroup>
    <p:message id="login-username-msg" for="float-input-username-signin"/>

    <h:panelGroup styleClass="ui-float-label">
        <p:password id="float-input-password-signin"/>
        <p:outputLabel for="@previous" value="Password"/>
    </h:panelGroup>
    <p:message id="login-password-msg" for="float-input-password-signin"/>

    <p:commandButton value="Login" id="login-button" update="login-grid" action="#{loginBean.check}"/>
</p:panelGrid>