You need to sign in to do that
Don't have an account?
matthew.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>
Thanks,
Matt
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>
Thanks,
Matt
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
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;
}
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
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