+ Start a Discussion
DrawloopSupportDrawloopSupport 

CommandLink Spacing vs. OutputLink Spacing

Visualforce for first image:

 

<apex:commandLink value="Edit" />&nbsp;|&nbsp;<apex:commandLink value="Del" />

 correct action

 

Visualforce for second image:

 

<apex:outputLink>Edit</apex:outputLink>&nbsp;|&nbsp;<apex:commandLink value="Del" />

 

 

Does anyone have an idea as to why the extra space after the pipe comes in on the first row if I use an outputLink instead of a commandLink? The extra space is present whether or not I use a space or nbsp notation. The links are contained in a pageBlockTable column.

 

Thanks.

 

 

Sam.arjSam.arj

In firefox look at the generated HTML code and compare them, they should have some rendering difference even though it seems odd.

 

DrawloopSupportDrawloopSupport
In the first row, between the pipe and the Del link, there is a script tag that I think is causing the extra space. Why is this script tag not present in any subsequent rows? I believe it somehow belongs to the commandLink for Del.
Jake Hebert 19Jake Hebert 19
(7 year later...)

I just ran into this same thing. Browser or VF or something is adding an extra space in front of my command link, but in subsequent rows it's not there.

Doing the exact same thing as the OP I imagine - just creating some rows in a page block table:
 
<apex:pageBlockTable value="{!oliList}" var="oli">
				<apex:column headerValue="Action">
					<apex:outputLink target="_top" value="/{!oli.Id}/e">Edit</apex:outputLink>&nbsp;|&nbsp;
					<apex:outputLink target="_top" value="/{!oli.Id}/e">Del</apex:outputLink>&nbsp;|&nbsp;
					<apex:commandLink action="{!NewStores}">Stores</apex:commandLink>
				</apex:column>
				<apex:column value="{!oli.Product2.Name}"/>
				<apex:column value="{!oli.ListPrice}"/>

(... more fields)

			</apex:pageBlockTable>

2 spaces on the first row, one space on the following rows...

Solution/workaround: Not really a solution I suppose, but if the order of the links is not critical this should work. I moved the Command link to live in front of the Output link and it stopped adding spaces:
 
<apex:pageBlockTable value="{!oliList}" var="oli">
				<apex:column headerValue="Action">
				
					<apex:commandLink action="{!NewStores}">Stores</apex:commandLink>&nbsp;|&nbsp;
					<apex:outputLink target="_top" value="/{!oli.Id}/e">Edit</apex:outputLink>&nbsp;|&nbsp;
					<apex:outputLink target="_top" value="/{!oli.Id}/e">Del</apex:outputLink>
					
				</apex:column>
				<apex:column value="{!oli.Product2.Name}"/>
				<apex:column value="{!oli.ListPrice}"/>
				
(... more fields)

			</apex:pageBlockTable>