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>
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>
  • 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? – ClevelandDan Sep 19 '17 at 14:15
  • Check my answer and let me know if you are facing any issues – Santanu Boral Sep 19 '17 at 14:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.