1

enter image description here

In the above picture, How do I align the fields(Reminder checkbox, Date field and time dropdown) same as the status field in the above pageBlockSection.

Below is the code I am using. I think I can use css styling but just curious if there is any Visualforce trick that can make it work??

    <apex:pageBlockSection title="Reminder" columns="2">
        <apex:pageBlockSectionItem>
            <apex:panelGrid columns="1">
                <apex:panelGroup>
                    <apex:outputLabel value="Reminder" for="reminderCheckBox"/>
                    <apex:inputField value="{!taskObjTwo.IsReminderSet}" id="reminderCheckBox"/>
                    <apex:inputField value="{!dummyTask.ActivityDate}" label=""/>
                    <apex:selectList value="{!selectedReminderTime}" size="1">
                        <apex:selectOptions id="reminderTime" value="{!reminderTimeSlots}"/>
                    </apex:selectList>
                </apex:panelGroup>
            </apex:panelGrid>
        </apex:pageBlockSectionItem>
    </apex:pageBlockSection>
2
  • Have you tried <apex:pageBlockSection title="Reminder" columns="1"> although you may have to wrap the grid in an outputpanel
    – Eric
    Aug 25, 2015 at 2:53
  • @Eric Tried but still same result
    – javanoob
    Aug 25, 2015 at 2:55

1 Answer 1

1

Moving the label outside of the panel grid it what did it as well as changing the columns to 1

This seems to work for me:

<apex:page standardController="Opportunity">
<apex:form >
<apex:pageBlock >

<apex:pageBlockSection title="Test" columns="1">
            <apex:inPutField value="{!Opportunity.Name}"/>
    </apex:pageBlockSection>




<apex:pageBlockSection title="Reminder" columns="1">

            <apex:pageBlockSectionItem >
            <apex:outputLabel value="Reminder" for="reminderCheckBox"/>
            <apex:panelGrid columns="1">
                <apex:panelGroup >

                    <apex:inputField label="myLabel" value="{!Opportunity.Name}" id="reminderCheckBox"/>
                    <apex:inputField value="{!opportunity.RADAR_Updated__c}" label=""/>
                </apex:panelGroup>
            </apex:panelGrid>
            </apex:pageBlockSectionItem>

    </apex:pageBlockSection>

</apex:pageBlock>
</apex:form>
</apex:page>

Now adjust slowly from here to get to where you want to end up

2
  • Excellent..It worked fine..I thought of deploying without aligning the fields :)
    – javanoob
    Aug 25, 2015 at 3:27
  • 1
    Been there. Almost anything can be done with enough time, research and effort. If something is not working do not just give up :). Browser page inspector is an invaluable tool in helping identifying why something is not working and allows you to make changes directly to see what you need to change in your code to make it work.
    – Eric
    Aug 25, 2015 at 3:29

You must log in to answer this question.

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