function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
bozotheclownbozotheclown 

Basic (hopefully) Formatting Question

Hello.  I have run into what I think is a pretty simple formatting question...but I have no idea how to accomplish what I want.

 

In short, I want to display four pieces of data within a PageBlock (an employee's name, age, birthday, birthplace).  These are not inputFields...but instead the values of variables.  My goal is to display this information on two lines...I would like for the name and age to display on the first line...and the birthday and birthplace to display on the second line.

 

Unfortunately, what I have below looks messy (the top right column does not always align with the bottom right column).  I tried using the <apex:column> command...but this only works for data tables (and I am obviously not displaying a table of records here).

 

Any suggestios on how to get this information to line up would be much appreciated.

 

<apex:pageBlockSection title="Employee Details" columns="2">
<apex:pageBlockSectionItem >
<b>Name: </b> {!EmpName}
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<b>Age:</b> {!EmpAge}
<b>Birthdate: </b> {!EmpBDay}
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<b>Birthplace: </b> {!EmpBPlace}
</apex:pageBlockSectionItem>
</apex:pageBlockSection>

 

 

 

 

Best Answer chosen by Admin (Salesforce Developers) 
sravusravu

Try the following code:

 

 

<apex:pageBlockSection title="Employee Details">
	<apex:pageBlockSectionItem >
		<table>
			<tr>
				<td>Name
				</td>
				<td>{!EmpName}
				</td>
				<td>Age
				</td>
				<td>{!EmpAge}
				</td>
			</tr>
			<tr>
				<td>Birthdate
				</td>
				<td>{!EmpBDay}
				</td>
				<td>Birthplace
				</td>
				<td>{!EmpBPlace}
				</td>
			</tr>
		</table>
	</apex:pageBlockSectionItem>
</apex:pageBlockSection>

 You can style attribute in all the tags to make it look better

 

 

Hope this helps you

All Answers

larkinrichardslarkinrichards

What about using the apex:outputField tag?

 

 

 

 

<apex:pageBlockSection title="Employee Details" columns="2">
	<apex:outputField value="{!EmpName}"/>
	<apex:outputField value="{!EmpAge}"/>
	<apex:outputField value="{!EmpBDay}"/>
	<apex:outputField value="{!EmpBPlace}"/>
</apex:pageBlockSection>

If the fields are sObject fields then labels will be taken care of automatically, and you'll get two columns as you specified that in the pageBlockSection attribute.

 

 

 

 
sravusravu

Try the following code:

 

 

<apex:pageBlockSection title="Employee Details">
	<apex:pageBlockSectionItem >
		<table>
			<tr>
				<td>Name
				</td>
				<td>{!EmpName}
				</td>
				<td>Age
				</td>
				<td>{!EmpAge}
				</td>
			</tr>
			<tr>
				<td>Birthdate
				</td>
				<td>{!EmpBDay}
				</td>
				<td>Birthplace
				</td>
				<td>{!EmpBPlace}
				</td>
			</tr>
		</table>
	</apex:pageBlockSectionItem>
</apex:pageBlockSection>

 You can style attribute in all the tags to make it look better

 

 

Hope this helps you

This was selected as the best answer
bozotheclownbozotheclown

Thanks for both responses.  The OutputField idea would not work since I am not displaying SObject fields...but the <table> suggestion worked.

 

I appreciate the help.
larkinrichardslarkinrichards

In that case, you can use apex:outputText with apex:outputLabel to retain the salesforce formatting.

 

 

 

...
	
	<apex:pageBlockSectionItem>
		<apex:outputLabel value="Name" for="empname"/>
		<apex:outputText value="{!EmpName}" id="empname"/>
	</apex:pageBlockSectionItem>
	
	<apex:pageBlockSectionItem>
		<apex:outputLabel value="Age" for="empage"/>
		<apex:outputText value="{!EmpAge}" id="empage"/>
	</apex:pageBlockSectionItem>
	
...

 

 
bozotheclownbozotheclown

Thanks.  That makes sense.

 

One question though.  I am able to bold the value of the OutputText with the command style="font-weight:bold;" .  However, there are no changes when I add this code to the OutputLabel command.  Any thoughts?

 

Again, thanks for the help.
larkinrichardslarkinrichards

I believe the outputLabel is already bold due to inheriting the label style from salesforce, which scales lable font to be slightly smaller than outputText but bold.  If you changed it to style="font-weight:normal;" you should see a difference.
bozotheclownbozotheclown

Great point.  I checked and you were right. Thanks again.