Primefaces - Floating Label in p:panelGrid

user_10211997 0
Viewed 53

How is one supposed to embed a 'Floating Label' - as described here - into a p:panelGrid?

The problem i have is that 'p:outputLabel' is not shown inside of 'p:inputText' but besides it.

The current code:

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

I already tried to put the 'Floating Label' inside of a div container, but it didn't work.

Thank you very much.

primefaces jsf
1 Answers

p:panelGrid (and h:panelGrid) should only contain JSF components as direct children. It will render a cell for each of them. So, instead of a span tag, use a h:panelGroup component (which will render a span). And use columns="2" instead of 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>
user_8806190
Related