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
Joe StolzJoe Stolz 

How can I arrange inputField Labels to the top of the input field?

I have a number of inputfields where I would like the label to be above the input. Is there a standard easy way to accomplish this that my Google searching missed?

My Code is:
<apex:page standardController="Opportunity" showHeader="false" sidebar="false">     
<apex:form >        
    <apex:pageBlock title="" id="OppPageBlock" mode="edit">             
        <apex:pageMessages />             
            <apex:pageBlockButtons location="bottom" >                 
                <apex:commandLink value="Save" action="{!save}" target="_parent" styleClass="btn" style="text-decoration:none;padding:4px;"/>                 
                <apex:commandButton value="Cancel" action="{!cancel}"/>             
            </apex:pageBlockButtons>                        
        
<!-- Qualification Stage -->        
        
        <apex:pageBlockSection title="Qualification Fields" columns="1" showHeader="FALSE" rendered="{!opportunity.StageName == 'Qualification_RPA'}">                 
            <apex:inputField value="{!opportunity.Accept_or_Reject_Work_Order_Email__c}"/> 
            <apex:inputField value="{!opportunity.NTE_Certified_Partner__c}"/> 
            <apex:inputField value="{!opportunity.Reason_for_Rejection__c}"/> 
            <apex:inputField value="{!opportunity.Save_WO_Email_to_Box__c}"/> 
            <apex:inputField value="{!opportunity.Create_Job_in_Sage_PJ__c}"/>             
        </apex:pageBlockSection>

And here is the result:
User-added image

I have a narrow space to work with and things would be much better if the label could be formatted over top of the input.

Thank you,
Joe
Best Answer chosen by Joe Stolz
Shashikant SharmaShashikant Sharma
You could use this sort of design :
 
<apex:page standardController="Account">
    
    <apex:form>
        <apex:pageBlock mode="Edit">
            
            <apex:pageBlockSection columns="1">
                
                <apex:pageBlockSectionItem>
                    <apex:outputLabel value=""></apex:outputLabel>
                    <apex:outputLabel value="Account Name"></apex:outputLabel>
                </apex:pageBlockSectionItem>
                <apex:pageBlockSectionItem>
                    <apex:outputLabel value=""></apex:outputLabel>
                    <apex:inputField value="{!Account.Name}"/>
                </apex:pageBlockSectionItem>
                
            </apex:pageBlockSection>
                            
        </apex:pageBlock>
    </apex:form>
    
</apex:page>

Thanks
Shashikant

All Answers

Shashikant SharmaShashikant Sharma
You could use this sort of design :
 
<apex:page standardController="Account">
    
    <apex:form>
        <apex:pageBlock mode="Edit">
            
            <apex:pageBlockSection columns="1">
                
                <apex:pageBlockSectionItem>
                    <apex:outputLabel value=""></apex:outputLabel>
                    <apex:outputLabel value="Account Name"></apex:outputLabel>
                </apex:pageBlockSectionItem>
                <apex:pageBlockSectionItem>
                    <apex:outputLabel value=""></apex:outputLabel>
                    <apex:inputField value="{!Account.Name}"/>
                </apex:pageBlockSectionItem>
                
            </apex:pageBlockSection>
                            
        </apex:pageBlock>
    </apex:form>
    
</apex:page>

Thanks
Shashikant
This was selected as the best answer
Joe StolzJoe Stolz
That was the answer. Thank you Shashikant!