Layout problems with composite components and PanelGrid

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.

enter image description here

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:

enter image description here

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

enter image description here

How can I align the labels and the inputs?

score 1 · Answer 1 · answered Dec 23 '12 at 21:38

Form layout can be a really tough thing to accomplish from the ground up, and isn't always straightforward. Having said that, you could try to make it work with a bit of CSS, setting an equal width to all labels and then make the form controls pulled to the right with floating.

Check out some examples of this and other techniques here: http://jeffhowden.com/code/css/forms/

Another thing that might be of interest is the Twitter Bootstrap library/framework. You can customize it to get only the CSS needed for basic layout and forms, if you want.

Thank you for the answer. But my approche was a little bit diferent. I´ll post it. — Marco Noronha, Dec 24 '12 at 20:40

score 0 · Accepted Answer · answered Dec 24 '12 at 20:47

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!

Layout problems with composite components and PanelGrid

2 Answers2