function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
dev401hasdev401has 

pageBlockSectionItem still not aligning outputLabel and fields

 

Scenario: To make components appear and hide using the 'rendered' attribute on base of a selected value in picklist. 

 

I have used an ouput panel around the pageblocksectionItem to be shown and hidden, and by using the id of the output panel in the 'reRender' attribute of the action support.

 

but by using OutputPanel the aligment is distrurbed and even the outputlabel is not coming in bold as it should be with standard functionality.

 

can anyone provide solution without using OutputPanel or keep the styling same as Salesforce even using OutputPanel?



Rehan DawtRehan Dawt

Hi,

 

Can you post u r code here.I hope you don't have to specify the outputPanel.

dev401hasdev401has

Check this out:

 

<apex:page standardController="Opportunity" sidebar="false">  
   <apex:sectionHeader title="Edit Opportunity" subtitle="{!opportunity.name}"/>  
   <apex:form >  
     <apex:pageBlock title="Edit Opportunity" mode="edit">  
       <apex:pageMessages />  
       <apex:pageBlockButtons >  
         <apex:commandButton value="Save" action="{!save}"/>  
         <apex:commandButton value="Cancel" action="{!cancel}"/>          
       </apex:pageBlockButtons>  
       <apex:actionRegion >  
         <apex:pageBlockSection title="Basic Information" columns="1">  
           <apex:inputField value="{!opportunity.name}"/>  
           <apex:pageBlockSectionItem >  
             <apex:outputLabel value="Stage"/>  
             <apex:outputPanel >  
               <apex:inputField value="{!opportunity.stageName}">  
                 <apex:actionSupport event="onchange" rerender="thePanel"  
                           status="status"/>  
               </apex:inputField>  
               <apex:actionStatus startText="applying value..." id="status"/>  
             </apex:outputPanel>  
           </apex:pageBlockSectionItem>  
           <apex:inputField value="{!opportunity.amount}"/>  
           <apex:inputField value="{!opportunity.closedate}"/>  
         </apex:pageBlockSection>  
       </apex:actionRegion>  
       <apex:outputPanel id=”thePanel”>        
          <apex:pageBlockSection title="Closed Lost Information" columns="1"  
                   rendered="{!opportunity.stageName == 'Closed Lost'}">  
         <apex:inputField value="{!opportunity.Reason_Lost__c}"/>  
       </apex:pageBlockSection>  
      </apex:outputPanel>  
     </apex:pageBlock>  
   </apex:form>  
 </apex:page>

 

The OutputPanel "thePanel" is making the UI uneven.

 

Let me know the solution if this can be done without OutputPanel.

Rehan DawtRehan Dawt

Hi,

 

Hey as the Reason_Lost__c was not present in my Org. I test with this Opportunity Name and it is working fine.

 

<apex:page standardController="Opportunity" sidebar="false">  
   <apex:sectionHeader title="Edit Opportunity" subtitle="{!opportunity.name}"/>  
   <apex:form >  
     <apex:pageBlock title="Edit Opportunity" mode="edit">  
       <apex:pageMessages />  
       <apex:pageBlockButtons >  
         <apex:commandButton value="Save" action="{!save}"/>  
         <apex:commandButton value="Cancel" action="{!cancel}"/>          
       </apex:pageBlockButtons>  
       <apex:actionRegion >  
         <apex:pageBlockSection title="Basic Information" columns="1">  
           <apex:inputField value="{!opportunity.name}"/>  
           <apex:pageBlockSectionItem >  
             <apex:outputLabel value="Stage"/>  
             <apex:outputPanel >  
               <apex:inputField value="{!opportunity.stageName}">  
                 <apex:actionSupport event="onchange" rerender="thePanel"  
                           status="status"/>  
               </apex:inputField>  
               <apex:actionStatus startText="applying value..." id="status"/>  
             </apex:outputPanel>  
           </apex:pageBlockSectionItem>  
           <apex:inputField value="{!opportunity.amount}"/>  
           <apex:inputField value="{!opportunity.closedate}"/>  
         </apex:pageBlockSection>  
       </apex:actionRegion>  
       <apex:outputPanel id="thePanel">        
          <apex:pageBlockSection title="Closed Lost Information" columns="1"  
                   rendered="{!opportunity.stageName == 'Closed Lost'}">  
         <apex:inputField value="{!opportunity.Name}"/>  
       </apex:pageBlockSection>  
      </apex:outputPanel>  
     </apex:pageBlock>  
   </apex:form>  
 </apex:page>

 Just check with this only for testing purpose. and also let me know what is data type of the Reason_Lost so that i can know exactly what is UI issue.