You need to sign in to do that
Don't have an account?
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
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
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.
Try setting the columnss attribute to "1" in you apex:pageblocksection tag
<apex:pageblocksection columns = "1">
</apex:pageblocksection>
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>