+ Start a Discussion
matthew.w.hampton.ax1837matthew.w.hampton.ax1837 

Help With Label Spacing

Good Morning:

Please see the attached VF page and image. I am having trouble figuring out how to space out my field labels and fields so they are all symemtrical and easy to look at. Any help would be appreciated.

<apex:page standardController="Fioptics_Notify_Me__c" extensions="fiopticsNotifyMeExtension" sidebar="FALSE" showHeader="FALSE" standardStylesheets="False">
<style>
    .activeTab {background-color:white; color:black; background-image:none; font-weight: bold}
    .inactiveTab {background-color:lightgrey; color:black; background-image:none; font-weight:bold}
    .pageBlockStyle {text-align:left; width:30%}
    .bPageBlock .pbBody {background:white;}
</style>   
        <apex:form styleClass="pageBlockStyle">      
            <apex:tabPanel switchType="client" selectedTab="fioptics2" id="theTabPanel" tabClass="activeTab" inactiveTabClass="inactiveTab">
                <apex:tab label="Fioptics" name="fioptics1" id="tabOne" labelWidth="50px">
                    <apex:pageBlock >
                        <apex:pageBlockSection title="Customer Information" columns="1">
                            <apex:inputField label="Name" value="{!Fioptics_Notify_Me__c.Name}" required="TRUE" style="width: 200px; height: 20px nowrap;"/>
                            <apex:inputField label="Contact Number" value="{!Fioptics_Notify_Me__c.Contact_Number__c}" required="TRUE" style="width: 200px; height: 20px nowrap"/>
                            <apex:inputField label="Address" value="{!Fioptics_Notify_Me__c.Address__c}" required="TRUE" style="width: 200px; height: 20px nowrap"/>  
                            <apex:inputField label="Customer Email" value="{!Fioptics_Notify_Me__c.Customer_E_mail__c}" style="width: 200px; height: 20px nowrap"/>
                        </apex:PageBlockSection>
                        <apex:pageBlockSection title="Consultant Information" columns="1">  
                            <apex:inputField label="Store" value="{!Fioptics_Notify_Me__c.Store__c}" required="TRUE" style="width: 300px; height: 20px nowrap"/> 
                            <apex:inputField label="Consultant Email" value="{!Fioptics_Notify_Me__c.Consultant_Email__c}" required="TRUE" style="width: 300px; height: 20px nowrap"/>      
                            <apex:inputField label="Consultant" value="{!Fioptics_Notify_Me__c.Consultant_Name__c}" required="TRUE" style="width: 300px; height: 20px nowrap"/>     
                        </apex:PageBlockSection>
                        <apex:pageBlockSection title="Products Information" columns="1">      
                            <apex:inputField label="Video" value="{!Fioptics_Notify_Me__c.Video__c}" style="width: 300px; height: 20px nowrap"/>  
                            <apex:inputField label="Internet" value="{!Fioptics_Notify_Me__c.Internet__c}" style="width: 300px; height: 20px nowrap"/>      
                            <apex:inputField label="Phone" value="{!Fioptics_Notify_Me__c.Phone__c}" style="width: 300px; height: 20px nowrap"/>    
                            <apex:inputField label="Notes" value="{!Fioptics_Notify_Me__c.Notes__c}" style="width: 300px; height: 50px nowrap"/>   
                            <apex:commandButton value="Submit" action="{!saveLead}" style="float:left"/>   
                        </apex:pageBlockSection>
                    </apex:pageBlock>
                </apex:tab>
                <apex:tab label="CBW" name="fioptics2" id="tabTwo" labelWidth="50px">
                    <apex:pageBlock mode="mainDetail">
                        <apex:pageBlockSection title="Customer Information" columns="1">
                            <apex:inputField label="Name" value="{!Fioptics_Notify_Me__c.Name}" required="TRUE" style="width: 300px; height: 20px nowrap"/>
                            <apex:inputField label="Contact Number" value="{!Fioptics_Notify_Me__c.Contact_Number__c}" required="TRUE" style="width: 300px; height: 20px nowrap"/>
                            <apex:inputField label="Address" value="{!Fioptics_Notify_Me__c.Address_Free__c}" required="TRUE" style="width: 300px; height: 20px nowrap"/>  
                            <apex:inputField label="Customer Email" value="{!Fioptics_Notify_Me__c.Customer_E_mail__c}" style="width: 300px; height: 20px nowrap" />                              
                        </apex:pageBlockSection>
                        <apex:pageBlockSection title="Consultant Information" columns="1">  
                            <apex:inputField label="Store" value="{!Fioptics_Notify_Me__c.Store__c}" required="TRUE" style="width: 300px; height: 20px nowrap"/> 
                            <apex:inputField label="Consultant" value="{!Fioptics_Notify_Me__c.Consultant_Name__c}" required="TRUE" style="width: 300px; height: 20px nowrap"/>  
                        </apex:PageBlockSection>
                        <apex:pageBlockSection title="CBW Information" columns="1">      
                            <apex:inputField label="#of Lines" value="{!Fioptics_Notify_Me__c.of_Lines__c}" required="TRUE" style="width: 300px; height: 20px nowrap"/>  
                            <apex:inputField label="Current Plan" value="{!Fioptics_Notify_Me__c.Current_Plan__c}" style="width: 300px; height: 20px nowrap"/>         
                            <apex:inputField label="Notes" value="{!Fioptics_Notify_Me__c.Notes__c}" style="width: 300px; height: 50px nowrap"/>  
                            <apex:commandButton value="Submit" action="{!saveLead}" style="float:left"/>   
                        </apex:pageBlockSection>
                    </apex:pageBlock>                                                      
                </apex:tab>                         
            </apex:tabPanel>                                  
        </apex:form>          
</apex:page>




VF Page Screenshot
Thanks,

Matt
Best Answer chosen by matthew.w.hampton.ax1837
dev_sfdc1dev_sfdc1
Hi matthew,

In your code, you directly getting the fields so you try this sample with based on your width setting like this below :


<table style="width:1000px;">
<tr>
     <td style="text-align:right"><apex:outputlabel value="Name" style="width:200px;"></apex:outputlabel></td>
     <td> <span style="margin-left:20px"> </span> <apex:InputField value="{!Fioptics_Notify_Me__c.Name}"  style="width:160px" />
     </td>
               
     <td style="text-align:right"> <apex:outputlabel value="Contact Number" style="width:200px;"> </apex:outputlabe></td>
     <td><span style="margin-left:20px"></span> <apex:InputField value={!Fioptics_Notify_Me__c.Contact_Number__c}" style="width:160px"/>
     </td>  
       
</tr>
</table>


I have created here with table format.If you don't need for table just you can use Span tag to set required pixels to get space between field labels and fields.

If it resolves your problem,please mark it as solution.

Thank you

All Answers

PrasanntaPrasannta (Salesforce Developers) 
Hi

Please try adding the css for label to have the proper space between the label and the text field and try adjusting the width as per your requirement.

For example-

label {
    width:180px;
    clear:left;
    text-align:right;
    padding-right:10px;
}

input, label {
    float:left;
}
dev_sfdc1dev_sfdc1
Hi matthew,

In your code, you directly getting the fields so you try this sample with based on your width setting like this below :


<table style="width:1000px;">
<tr>
     <td style="text-align:right"><apex:outputlabel value="Name" style="width:200px;"></apex:outputlabel></td>
     <td> <span style="margin-left:20px"> </span> <apex:InputField value="{!Fioptics_Notify_Me__c.Name}"  style="width:160px" />
     </td>
               
     <td style="text-align:right"> <apex:outputlabel value="Contact Number" style="width:200px;"> </apex:outputlabe></td>
     <td><span style="margin-left:20px"></span> <apex:InputField value={!Fioptics_Notify_Me__c.Contact_Number__c}" style="width:160px"/>
     </td>  
       
</tr>
</table>


I have created here with table format.If you don't need for table just you can use Span tag to set required pixels to get space between field labels and fields.

If it resolves your problem,please mark it as solution.

Thank you

This was selected as the best answer
dev_sfdc1dev_sfdc1
Hi matthew,

In your code, you directly getting the fields so you try this sample with based on your width setting like this below :


<table style="width:1000px;">
<tr>
     <td style="text-align:right"><apex:outputlabel value="Name" style="width:200px;"></apex:outputlabel></td>
     <td> <span style="margin-left:20px"> </span> <apex:InputField value="{!Fioptics_Notify_Me__c.Name}"  style="width:160px" />
     </td>
               
     <td style="text-align:right"> <apex:outputlabel value="Contact Number" style="width:200px;"> </apex:outputlabe></td>
     <td><span style="margin-left:20px"></span> <apex:InputField value={!Fioptics_Notify_Me__c.Contact_Number__c}" style="width:160px"/>
     </td>  
       
</tr>
</table>


I have created here with table format.If you don't need for table just you can use Span tag to set required pixels to get space between field labels and fields.

If it resolves your problem,please mark it as solution.

Thank you