CODEWITHSUNDEEP
jsfjsf-2primefaces
Jacob
Jacob

Reputation: 14731

Primefaces separator is displayed as a row element in panelgrid

How to use separator tag in primefaces effectively?

For the following output, separator is displayed as one of the element in next row. Ideally I would like separator in a single row and then display other input elements. I have attached screen shot of how separator is displayed, as it is displayed 5th element in second row.

Any help is highly appreciable.

JSF code

<p:panelGrid columns="4" id="mypanel">
 <f:facet name="header">
      Projects
      </f:facet>

<p:outputLabel value="Project: ">
    <p:inputText required="true"
 readonly="true">
 </p:inputText>
</p:outputLabel>

<p:outputLabel value="Project Title: " >
<p:inputText readonly="true">
</p:inputText>
</p:outputLabel>

<p:outputLabel value="Is selected " >
<p:selectBooleanCheckbox value="" />
</p:outputLabel>

<p:outputLabel value="Is approved"  >
<p:selectBooleanCheckbox value="" />
</p:outputLabel>

<p:separator>

</p:separator>  
    ... other elements

enter image description here

Upvotes: 1

Views: 6951

Answers (1)

Konstantin Yovkov
Konstantin Yovkov

Reputation: 62864

First, consider the usage of the for attribute of the <p:outputLabel> component. You're not supposed to nest <p:inputText> inside <p:outputLabel>.

Next, you can use <p:row> and <p:column> in order to describe a more complex structure of the content of a <p:panelGrid>.

Try out this:

<p:panelGrid id="mypanel">
    <f:facet name="header">Projects</f:facet>
    <p:row>    
        <p:column>
            <p:outputLabel value="Project:" for="project">
            <p:inputText required="true" readonly="true" id="project"/>  
        </p:column>
        <p:column>
            <p:outputLabel value="Project Title:" for="title" />
            <p:inputText readonly="true" id="title"/>
        </p:column>
        <p:column>
            <p:outputLabel value="Is selected:" for="isSel"/>
            <p:selectBooleanCheckbox value="" id="isSel"/>
        </p:column>
        <p:column>
            <p:outputLabel value="Is approved:" for="isApp"/>
            <p:selectBooleanCheckbox value="" id="isApp"/>
        </p:column>
    </p:row>
    <p:row>
        <p:column colspan="4">  
            <p:separator />
        </p:column>  
    </p:row>
    <p:row>
        <!-- Other elements. -->
    </p:row>
</p:panelGrid>

You can see the Live demo, as well.

Upvotes: 2

Related Questions