blank space JSF not rendered components - jsf

Question

I have the following code:
<h:form id="mainForm">
<p:panelGrid columns="2" layout="grid">
<h:panelGroup styleClass="containers" layout="block">
<p:outputLabel for="document" value="Document" />
<p:inputText id="document"
value="#{dIGRCController.digrc.documento}" readonly="true" />
<h:link styleClass="searchLink" value="Search Documents"
outcome="searchDigrc.xhtml"></h:link>
<!-- #{dIGRCController.digrc.impresn == 'S'} -->
<p:outputLabel for="concept" value="Concept" />
<p:selectOneMenu id="concept"
value="#{dIGRCController.digrc.qconce}"
requiredMessage="You must select a Concept" required="true">
<f:selectItem itemLabel="Select" itemValue="" />
<f:selectItems
value="#{cCRX1Controller.ccrx1.concepts.entrySet()}"
var="concept" itemValue="#{concept.key}"
itemLabel="#{concept.value.tbdesc}" />
<p:ajax listener="#{dIGRCController.setDropDownSelectedCcrx1}"
update="hiddenSections, searchAgentsLink, agenteName, documentValue, containerDocQty, containerMethodPayment" />
</p:selectOneMenu>
<p:outputLabel for="todaysDate" value="Date" />
<p:inputText id="todaysDate" readonly="true"
value="#{dIGRCController.digrc.fecha}" />
</h:panelGroup>
<h:panelGroup styleClass="containers" layout="block">
<h:panelGroup>
<p:outputLabel for="agenteName" value="Agent Name" />
<p:inputText id="agenteName"
readonly="#{dIGRCController.digrc.selectedDropDownCcrx1.tbqcon == 'D'}"
value="#{dIGRCController.digrc.nombre}" required="true"
requiredMessage="You must enter an Agent Name" />
<h:panelGroup id="searchAgentsLink">
<h:link styleClass="searchLink" value="Search Agents"
rendered="#{dIGRCController.digrc.selectedDropDownCcrx1.tbqcon == 'D'}"
outcome="searchAgex1">
<f:param name="concept" value="#{dIGRCController.digrc.qconce}" />
<c:if test="#{not empty dIGRCController.digrc.documento}">
<f:param name="documento"
value="#{dIGRCController.digrc.documento}" />
</c:if>
</h:link>
</h:panelGroup>
</h:panelGroup>
<p:outputLabel for="documentValue" value="Document Value" />
<p:inputText id="documentValue"
value="#{dIGRCController.digrc.documVal}" required="true"
requiredMessage="You must enter a Document Value"
validatorMessage="The Document Value must be greater than 0"
readonly="#{dIGRCController.digrc.selectedDropDownCcrx1.tbqcon == 9 or
dIGRCController.digrc.selectedDropDownCcrx1.tbqcon == 1 or
dIGRCController.digrc.selectedDropDownCcrx1.tbqcon == 'F'}">
<f:validateDoubleRange minimum="0.01" />
<p:ajax event="change" update="containerIdTwo"></p:ajax>
</p:inputText>
<h:panelGroup styleClass="containers" layout="block"
id="containerDocQty">
<h:panelGroup
rendered="#{dIGRCController.digrc.selectedDropDownCcrx1.pideqtysn == 'S'}">
<p:outputLabel for="documentQuantity" value="Document Quantity" />
<p:inputText id="documentQuantity"
value="#{dIGRCController.digrc.qtyDoc}" required="true"
requiredMessage="You must enter a Document Quantity" />
</h:panelGroup>
</h:panelGroup>
</h:panelGroup>
</p:panelGrid>
<p:panelGrid columns="1" layout="grid" id="hiddenSections">
<h:panelGroup styleClass="containers" layout="grid" id="moneyOrder"
rendered="#{dIGRCController.digrc.selectedDropDownCcrx1.tbqcon == 1}">
<h2>Money Orders</h2>
<p:outputLabel for="moneyOrdersQty" value="Quantity" />
<p:inputText id="moneyOrdersQty"
value="#{dIGRCController.digrc.moqty}" />
<p:outputLabel for="moneyOrdersVal" value="Value" />
<p:inputText id="moneyOrdersVal"
value="#{dIGRCController.digrc.moval}">
<p:ajax update="documentValue" event="change"
listener="#{dIGRCController.setDocValueToMoneyOrderValue()}" />
</p:inputText>
</h:panelGroup>
<h:panelGroup styleClass="containers" layout="block"
rendered="#{dIGRCController.digrc.selectedDropDownCcrx1.tbqcon == 8}">
<h2>Transfer Documents</h2>
<p:outputLabel for="numeroConduce" value="Transfer Number" />
<p:inputText id="numeroConduce"
value="#{dIGRCController.digrc.notransf}" required="true"
requiredMessage="You must enter a Number." />
<p:outputLabel for="suplidor" value="Supplier" />
<p:inputText id="suplidor" value="#{dIGRCController.digrc.c8supli}"
required="true" requiredMessage="You must enter a Supplier" />
<p:outputLabel for="tipoEnvio" value="Type of Transfer" />
<p:selectOneMenu id="tipoEnvio"
value="#{dIGRCController.digrc.c8tpenvio}"
requiredMessage="You must select a Type of Transfer"
required="true">
<f:selectItem itemLabel="Select" itemValue="" />
<f:selectItem itemLabel="Regular" itemValue="R" />
<f:selectItem itemLabel="Official" itemValue="O" />
<f:selectItem itemLabel="Express Regular" itemValue="E" />
<f:selectItem itemLabel="Express Official" itemValue="F" />
<p:ajax event="change" update="containerExtraEnvio"></p:ajax>
</p:selectOneMenu>
<p:outputLabel for="envioDestino" value="Destination" />
<p:selectOneMenu id="envioDestino"
value="#{dIGRCController.digrc.c8destino}"
requiredMessage="You must select a Destination" required="true">
<f:selectItem itemLabel="Select" itemValue="" />
<f:selectItem itemLabel="Capital" itemValue="C" />
<f:selectItem itemLabel="Interior" itemValue="I" />
</p:selectOneMenu>
<h:panelGroup id="containerExtraEnvio">
<h:panelGroup
rendered="#{dIGRCController.digrc.c8tpenvio == 'O' or dIGRCController.digrc.c8tpenvio == 'F'}">
<p:outputLabel for="envioAdicionales" value="Extra" />
<p:inputText id="envioAdicionales"
value="#{dIGRCController.digrc.c8qadi}" required="true"
requiredMessage="You must enter an Extra" />
</h:panelGroup>
</h:panelGroup>
</h:panelGroup>
</p:panelGrid>
</h:form>
Inside the first panelGrid, there is an drop down with ID concept. When an item is selected, this will update the container with ID hiddenSections. If the concept selected is 1, then it should show Money Orders. If the concept is 8, it should show Transfer Documents (see the panelGrid with id hiddenSections).
The image below shows the seven DIV elements that are empty inside. For code clarity, I am only showing two of them (If you wanted to, you should be able to reproduce with two).
Those seven DIV elements represent seven panelGroups that are rendered given the conditions I explained above. When the user first gets to the screen, none of them are rendered because the concept is not yet set. In this case, I see empty spaces which I don't want. How do I get rid of those empty spaces?

Answer 1

In this case, I see empty spaces which I don't want. How do I get rid of those empty spaces?
Your question is vague and I understood it 3 ways ( excuse me if I misunderstood as the answers seems obvious in all cases ).
When a component is not rendered, it doesn't figure in the html at all. So if by empty space you meant space characters then those are outside the tags in question.
If the table generated takes space because of css you want that part to be empty at page load then you can use rendered for that.
I think that one is what you were asking: Since your selectItem is initially null, none of the panelGroup out of the 8 are rendered and you'd like a default one to be rendered when the selected item is at null. Then just include a check to see if the value is empty for your default panelGroup.
Sorry if I misunderstood the question.