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
Madhura BMadhura B 

Alignment of Custom picklist and Label

Hi

I have a VF page with a pageblock section which displays fields from an object

 

<apex:outputpanel>

  <apex:pageblocksection>

 

      <apex:inputfield value="{!contactinfo.ABC__c}" >
                       <apex:actionSupport event="onchange" reRender="yeargroup"/>
        </apex:inputfield>

  

 

  <apex:outputPanel id="yeargroup" >
                 <apex:pageblocksection rendered="{!flag}">
                  
                      <apex:outputLabel value="Year Group" styleClass="labelCol first last" for="year" style="align:left;"/>
                            <apex:selectList value="{!SelectedYearGroup}" size="1" id="year">
                             <apex:selectOptions value="{!YearGroup1KS3}"/>
                           </apex:selectList>
                    
               </apex:pageblocksection>

</apex:outputPanel>

</apex:pageblocksection>

</apex:outputpanel>

 

 

I have used outputpanel as i am reRendering this section based on what's selected on the previous field.

 

(if i don't use outputpanel the alignment is fine but onclick function doesn't work)

 

All works fine except for the alignment of my custom picklist. The outputLabel Year Group and the custom picklist are aligned very far from each other.

style="align:left;"  for and id for SelectList nothing seem to help.

 

Any idea how this can be achieved?

 

Thanks

Best Answer chosen by Admin (Salesforce Developers) 
Madhura BMadhura B

Tried PanelGrid with an appropriate width instead of outputPanel and it worked fine .

 

 <apex:PanelGrid id="yeargroup" width="70%">

 <apex:pageblocksection rendered="{!flag}">

     <apex:pageBlockSectionItem>

                           <apex:outputLabel value="Year Group" styleClass="labelCol first last" for="year"/>
                            <apex:selectList value="{!SelectedYearGroup}" size="1" id="year">
                                 <apex:selectOptions value="{!YearGroup1KS3}"/>
                           </apex:selectList>

    </apex:pageBlockSectionItem>

</apex:pageblocksection>

</apex:panelGrid>

All Answers

Alok_NagarroAlok_Nagarro

Hi Madhura,

 

Just put your label and picklist within pageBlockSectionItem.

 

<apex:outputPanel id="yeargroup" >
<apex:pageblocksection rendered="{!flag}">

<apex:pageBlockSectionItem>

                           <apex:outputLabel value="Year Group" styleClass="labelCol first last" for="year"/>
                            <apex:selectList value="{!SelectedYearGroup}" size="1" id="year">
                                 <apex:selectOptions value="{!YearGroup1KS3}"/>
                           </apex:selectList>

</apex:pageBlockSectionItem>

</apex:pageblocksection>

</apex:outputPanel>

 

i think it should work.

S91084S91084

Try setting the columnss attribute to "1" in you apex:pageblocksection tag

 

<apex:pageblocksection columns = "1">

</apex:pageblocksection>

Madhura BMadhura B

Tried PanelGrid with an appropriate width instead of outputPanel and it worked fine .

 

 <apex:PanelGrid id="yeargroup" width="70%">

 <apex:pageblocksection rendered="{!flag}">

     <apex:pageBlockSectionItem>

                           <apex:outputLabel value="Year Group" styleClass="labelCol first last" for="year"/>
                            <apex:selectList value="{!SelectedYearGroup}" size="1" id="year">
                                 <apex:selectOptions value="{!YearGroup1KS3}"/>
                           </apex:selectList>

    </apex:pageBlockSectionItem>

</apex:pageblocksection>

</apex:panelGrid>

This was selected as the best answer