Question

Possible Duplicate:
How to make a grid of JSF composite component?

I have a <p:panelGrid> with one column to produce the header and the footer.

The text is in Portuguese, it says “Fields are placed here! PS: inside the secound panel”.

Inside that <p:panelGrid>, I have a nested <h:panelGrid> which should contain the fields. I created a composite component to add labels and input fields. Here is the composite implementation:

<cc:implementation>
    <h:panelGrid columns="2">
        <p:outputLabel for="#{cc.attrs.fieldId}" value="#{cc.attrs.fieldLabel}"/>
        <p:inputText id="#{cc.attrs.fieldId}" required="#{cc.attrs.required}" disabled="#{cc.attrs.disabled}" 
            value="#{cc.attrs.targetValue}" styleClass="cc.attrs.styleClass">
            <cc:insertChildren /> <!-- Validation Rules -->
            <f:ajax event="blur" execute="@this" render="@this" />
        </p:inputText>      
    </h:panelGrid>          
</cc:implementation>

This should align the label and input in the grid. However, it renders something like as:

I tried removing the <h:panelGrid> from the composite component, but it also looks misaligned like this:

How can I align the labels and the inputs?

Answer 1

Here is what I did:

My composite component doesn´t render the label, that way, I don´t have a panelGrid inside each component. The result is something like this:

<cc:implementation>
    <p:inputText id="#{cc.attrs.fieldId}" required="#{cc.attrs.required}" disabled="#{cc.attrs.disabled}" 
                 value="#{cc.attrs.targetValue}" styleClass="cc.attrs.styleClass">

        <cc:insertChildren /> <!-- Validation Rules -->
        <f:ajax event="blur" execute="@this" render="@this" />

    </p:inputText>      
</cc:implementation>

That way, the label needs to have this:

            <h:panelGrid columns="2" cellspacing="5" styleClass="table_form">  

            <p:outputLabel for="inputId:id" value="#{msg['entity.id']}"/>
            <po:inputInteiro id="inputId" targetValue="#{campoController.entity.id}" fieldId="id" disabled="true" styleClass="inputTiny"/>

Need to pay attention because if you don´t give the ID to your composite component, and try to look for just the inner id, JSF won´t find your component. Here is the exception if you don´t do the right way: javax.faces.FacesException: Cannot find component with identifier “id” referenced from “mainForm:j_idt78”

The final result was:

Another note: primefaces doesn´t include the “*” on required fields anymore… Needs to be done manually… 🙁

Hope this helps!