0

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: enter image description here

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

enter image description here

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>

2 Answers 2

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.

0

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>
2
  • The rendered where it is in your outputPanel doesn't seem to do anything? i moved it back onto the selectlist and its still not doing css correctly? Commented Sep 19, 2017 at 14:15
  • Check my answer and let me know if you are facing any issues Commented Sep 19, 2017 at 14:44

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .