OutputPanel causing extra lines on VF page

Question

For a long time, I was trying to find out why there have been extra lines on my VF page and I just figured it out. Its due to me wrapping an outer panel with another outer panel. What I'm trying to do is reRender a section inside an output panel but for some reason, I had to wrap it around another output panel which makes no sense to me. I just want to remove the extra lines on my VF page.

VF :

<apex:outputPanel id="op1">
  <apex:outputPanel rendered="{!listToMigrate!=null}">
     <apex:pageBlockSectionItem>
       <apex:pageBlockTable columns="1" id="t1" rows="5" value="{!listToMigrate}" var="temp">
            <apex:column width="5px;">
               <apex:facet name="header">Child Objects to Move </apex:facet>
               <apex:outputpanel >
                  {!temp}
               </apex:outputpanel>
            </apex:column>
       </apex:pageBlockTable>
    </apex:pageBlockSectionItem>
 </apex:outputPanel>

If I comment out the outer output panel then it just doesn't render. Why is that? And how do we go around this??

Answer 1

For your wrapper outputPanel op1 set layout ="none" and then inside that put your conditionally rendered components.

You need the outer panel because if inner components are not rendered when page is constructed server-side, you cant reference those components later. By using wrapper op1 with no layout, you can request a re-render of it and its components anytime.