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>
  • Have you tried <apex:pageBlockSection title="Reminder" columns="1"> although you may have to wrap the grid in an outputpanel – Eric Aug 25 '15 at 2:53
  • @Eric Tried but still same result – javanoob Aug 25 '15 at 2:55
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

  • Excellent..It worked fine..I thought of deploying without aligning the fields :) – javanoob Aug 25 '15 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 '15 at 3:29

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.