outputPanel rerender css issue

Question

i have a selectlist which is rendered when a picklist option is selected, the issue i am having is when it is selected the selectlist label doesn't appear and styling goes all weird, i've looked at it start with removing the rendered option and outputPanel as below:

as soon as i add the outputPanel and required back in:

here is the code:

<apex:pageBlockSection columns="1">
            <apex:selectList value="{!action}" label="Select Request Type" size="1" >
                <apex:selectOptions value="{!ActionSelectList}"/>
                <apex:actionSupport event="onchange" reRender="ProductTypes" />
            </apex:selectList>   
        </apex:pageBlockSection>

        <br/>

        <apex:outputPanel id="ProductTypes">
            <apex:pageBlockSection title="Product Request" columns="2" rendered="{!IF(action == 'Product Request', true, false)}">
                <apex:inputField id="ProductName" value="{!ir.Request_Name__c}" label="Product Name" styleClass="formfields"/> 
                <apex:inputField id="ProductDescription" value="{!ir.Request_Description__c}" label="Product Description" styleClass="formfields"/> 
                <apex:inputField id="ProductFamily" value="{!ir.Product_Family__c}" styleClass="formfields"/> 
                <apex:inputField id="ProductCategory" value="{!ir.Product_Category__c}" styleClass="formfields">
                    <apex:actionSupport event="onchange" reRender="ExhibitSpace" />
                </apex:inputField>
                <apex:outputPanel id="ExhibitSpace">
                    <apex:selectList value="{!glaAction}" label="Select Exhibit Type" size="1" styleClass="formfields" rendered="{!IF(ir.Product_Category__c == 'Exhibit Space', true, false)}">
                        <apex:selectOptions value="{!ExhibitSelectList}" />
                        <apex:actionSupport event="onchange" />
                    </apex:selectList>
                </apex:outputPanel>
                <apex:inputField id="ProductFestival" value="{!ir.Festival__c}" styleClass="formfields" /> 
                <apex:inputField id="ProductPricebook" value="{!ir.PriceBook__c}" styleClass="formfields" /> 
                <apex:inputField id="ProductPrice" value="{!ir.List_Price__c}" styleClass="formfields" /> 
                <apex:commandButton action="{!SaveNewProduct}" value="Send product for approval" style="float:right;" />
            </apex:pageBlockSection>

Answer 1

Use apex:pageBlockSectionItem as mentioned by Santanu. Important thing is that apex:pageBlockSectionItem must contain 2 elements, apex:outputLabel and its input.

Also you can apply rendered property directly to sectionItem and id for rerender to selectList.

Check if following code helps-

<apex:pageBlockSection title="Product Request" columns="2" 
    rendered="{!IF(action == 'Product Request', true, false)}">

    <apex:pageBlockSectionItem rendered="{!IF(ir.Product_Category__c == 'Exhibit Space')}">

        <apex:inputField id="ProductCategory" 
            value="{!ir.Product_Category__c}" styleClass="formfields">
            <apex:actionSupport event="onchange" reRender="ExhibitSpace" />
        </apex:inputField>

        <apex:outputLabel for="ExhibitSpace">Select Exhibit Type</apex:outputLabel>
            <apex:selectList value="{!glaAction}" size="1" 
                styleClass="formfields" 
                id="ExhibitSpace">
            <apex:selectOptions value="{!ExhibitSelectList}" />
            <apex:actionSupport event="onchange" />
            </apex:selectList>
    </apex:pageBlockSectionItem>

</apex:pageBlockSection>

Note:

1. Boolean value doesn't need any comparison.

   //rendered="{!IF(ir.Product_Category__c == 'Exhibit Space', true, false)}"
   // can be replaced by
   rendered="{!ir.Product_Category__c == 'Exhibit Space'}"
   

2. With apex:pageBlockSectionItem you can specify field name and its input/output.

3. for attribute in apex:outputLabel good for user experience.

4. Remove label attribute from apex:selectList as you have apex:outputLabel for same porpose.

Answer 2

You need to wrap those elements within pageBlockSectionItem for proper alignment.

Also in rendered attribute IF with true or false not required to specify.

rendered="{!(ir.Product_Category__c == 'Exhibit Space')}" will work for you.

Here is the approach:

<apex:pageBlockSectionItem id="pgblItem1">
    <apex:outputPanel id="ExhibitSpace" rendered="{!(ir.Product_Category__c == 'Exhibit Space')}">
    <apex:outputLabel>Select Exhibit Type</apex:outputLabel>
    <apex:selectList value="{!glaAction}" label="Select Exhibit Type" size="1" styleClass="formfields">
        <apex:selectOptions value="{!ExhibitSelectList}" />
        <apex:actionSupport event="onchange" />
    </apex:selectList>
    </apex:outputPanel>
</apex:pageBlockSectionItem>