function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
benwrigleybenwrigley 

Strange misalignment on table

Hi There,

 

This is a tiny detail but it's been bugging me for a while. I'm using pageBlockTables all over the place in my VF pages and I'm using commanLinks in most of them. *All* of them have a strange misalignment in the first row (see screenshot)

 

Is everyone having this problem or is it just me?

 

Here is the code:

 

 

         <apex:pageBlock mode="view">
                <apex:pageBlockButtons >
                    <apex:commandButton action="{!createPriceBreak}" value="Add PriceBreak"/>
                </apex:pageBlockButtons>
                     <apex:pageBlockSection title="Products" columns="1" >
                     <apex:pageBlockTable value="{!Products}" var="p">
                        <apex:column width="70px" headerValue="Action">
                        
                     |<apex:commandLink action="{!deleteProduct}" value="Del" id="deleteProductLink">
                            <apex:param name="productID" value="{!p.ID}" />
                        </apex:commandLink>|

                        </apex:column>
                    <apex:column style="font-weight:bold" headerValue="Name" width="320px">
                        <apex:commandLink action="{!viewRateCardProduct}" value="{!p.Name}" id="viewRateCardProductLink">
                            <apex:param name="productID" value="{!p.ID}" />
                        </apex:commandLink>
                    </apex:column>

                        


                    </apex:pageBlockTable>
                </apex:pageBlockSection>
            </apex:pageBlock>

 

 

DanCurryJrDanCurryJr

Have you tried this: 

 

|&nbsp;<apex:commandLink action="{!deleteProduct}" value="Del" id="deleteProductLink"> <apex:param name="productID" value="{!p.ID}" />
</apex:commandLink>&nbsp;|
Pradeep_NavatarPradeep_Navatar

It seems that you are using wrong syntax in visual force code. Remove the '|' from your code and see if it works fine.

aballardaballard

Can you view source and post what was generated for those two rows in your screenshot that have different spacing?

benwrigleybenwrigley

Thanks all for your advice.

 

Sorry I should have been clear. I *want* the pipes in the layout to replicate other places where Salesforce does this.

 

I've tried the non breaking spaces and I get the same effect.

 

The source code for the field with the extra space is

 

 

<td class="dataCell  " id="j_id0:j_id4:j_id15:j_id18:j_id19:0:j_id20" colspan="1" width="70px">
                        
                     |
<script type="text/javascript" language="Javascript">function dpf(f) {var adp = f.adp;if (adp != null) {for (var i = 0;i < adp.length;i++) {f.removeChild(adp[i]);}}};function apf(f, pvp) {var adp = new Array();f.adp = adp;var ps = pvp.split(',');for (var i = 0,ii = 0;i < ps.length;i++,ii++) {var p = document.createElement("input");p.type = "hidden";p.name = ps[i];p.value = ps[i + 1];f.appendChild(p);adp[ii] = p;i += 1;}};function jsfcljs(f, pvp, t) {apf(f, pvp);var ft = f.target;if (t) {f.target = t;}f.submit();f.target = ft;dpf(f);};</script>
<a id="j_id0:j_id4:j_id15:j_id18:j_id19:0:deleteProductLink" href="#" onclick="var a=function(){return confirmDeprecate();};var b=function(){if(typeof jsfcljs == 'function'){jsfcljs(document.getElementById('j_id0:j_id4'),'j_id0:j_id4:j_id15:j_id18:j_id19:0:deleteProductLink,j_id0:j_id4:j_id15:j_id18:j_id19:0:deleteProductLink,productID,01t20000000Fa4WAAS','');}return false};return (a()==false) ? false : b();">Del</a>|</td>

 The source code for the correct one is:

 

<td class="dataCell  " id="j_id0:j_id4:j_id15:j_id18:j_id19:1:j_id20" colspan="1" width="70px">
                        
                     |<a id="j_id0:j_id4:j_id15:j_id18:j_id19:1:deleteProductLink" href="#" onclick="var a=function(){return confirmDeprecate();};var b=function(){if(typeof jsfcljs == 'function'){jsfcljs(document.getElementById('j_id0:j_id4'),'j_id0:j_id4:j_id15:j_id18:j_id19:1:deleteProductLink,j_id0:j_id4:j_id15:j_id18:j_id19:1:deleteProductLink,productID,01tR0000000p0erIAA','');}return false};return (a()==false) ? false : b();">Del</a>|</td>

 

 

Playing around with these a bit more shows that having a linebreak between the first pipe and the 'a' tag causes the space. The only reason that linebreak seems to be there is all that extra javascript that has been added in.

 

Any other thoughts?

 

aballardaballard

Right; it looks like some javascript gets emitted the first time and has unneccessary white space which messes up the formatting.   You might want to create a support case to get that looked at. 

 

You might be able to get it to come out the same in all rows by adding  a space (not a non-breaking space) between the pipe and the link so that all rows have white space there, not just the first.   But that may not be exactly what you want.