Primefaces

Question

如何将 'Floating Label' - 如 here 所述 - 嵌入 p: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>

我已经尝试将 'Floating Label' 放入 div 容器中，但没有成功。

非常感谢。

Answer 1

p:panelGrid（和 h:panelGrid）应该只包含 JSF 组件作为直接子组件。它将为它们中的每一个渲染一个单元格。因此，不要使用 span 标记，而是使用 h:panelGroup 组件（它将呈现 span）。并使用 columns="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>

Primefaces - p:panelGrid 中的浮动标签

Primefaces - Floating Label in p:panelGrid

jsf