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

April 15, 2014
·
Like
0
·
Follow
1

Best Answer chosen by matthew.w.hampton.ax1837

dev_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

April 15, 2014
·
Like
0
·
Dislike
0

Prasannta (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;
}

April 15, 2014
·
Like
0
·
Dislike
0

This was selected as the best answer

April 15, 2014
·
Like
0
·
Dislike
0

You need to sign in to do that.

Need an account? Sign Up

Have an account? Sign In

Dismiss

Browse by Topic

Welcome to Support!

Show

sorted by

Help With Label Spacing

All Answers

You need to sign in to do that.