0

I have a strange issue that I can't figure out. I have a HTML table being created within an apex:outputpanel that gets put through an apex:repeat. It will list certain attributes for a particular field. On the Chrome browser everything works fine. On IE however, the first element of the table is included with the header, then the table begins. This issue is making the first element's formatting inconsistent with the rest of the table's elements. I have no idea why the first element is stuck with the header in IE and not Chrome. I'll post as much code as I can here.

 <table>
<tr>
    <th/>
    <th/>
    <th style="text-align:left; font-weight:bold"><apex:outputText value="1" rendered="{!someVar}"/></th>
    <th style="padding-right:30px; font-weight:bold"><apex:outputText value="2" rendered="{!someVar}"/></th>
    <th style="text-align:left; padding-right:10px; font-weight:bold"><apex:outputText value="3" rendered="{!someVar}"/></th>
    <th style="text-align:left; white-space:nowrap; font-weight:bold"><apex:outputText value="4" rendered="{!someVar}"/></th>
</tr>
<apex:repeat var="row" value="{!someValue}">
    <apex:outputPanel layout="none" rendered="{!someVar}">
        <apex:outputPanel layout="inline">

                <tr style="padding: 0px 0px 0px 0px; height: 24px">
                    <td style="width: 20px; text-align: center;">
                        <apex:image />
                        <apex:image />
                    </td>
                    <td style="width: 10px; text-align: center;">
                        <apex:outputText rendered="{!someVar}"><span class="footnote" style="font-size: large;">*</span></apex:outputText>
                        <apex:outputText rendered="{!someVar}"><span class="footnote">&Dagger;</span></apex:outputText>
                    </td>

                    <td style="width: 600px">                       
                        <apex:outputLink value="JavaScript:newPopup('{!URLFOR($Page.myPage)}#scrs');">
                            <apex:outputText value="{!myValue}" rendered="{!someVar}"/>
                            <apex:outputText value="{!myValue2}" rendered="{!someVar}"/>
                            <apex:outputText value="{!myValue3}"/>
                        </apex:outputLink>
                    </td>           
                    <td> <span style="padding-right: 10px; text-align:center;"> <apex:outputText rendered="{!someVar}" value="{!myValue4}"/></span></td>
                    <td>
                        <apex:outputLink value="JavaScript:newPopup('{!URLFOR($Page.myPage2)}#domains');"> 
                            <span style="padding-right: 10px;"> <apex:outputText rendered="{!someVar}" value="{!myValue5}"/></span>
                        </apex:outputLink>
                    </td>
                    <td> <span style="white-space: nowrap;"> <apex:outputText rendered="{!someVar}" value="{!myValue6}"/></span></td>                
                 </tr>

        </apex:outputPanel>
    </apex:outputPanel>
</apex:repeat>
    </table>

I'm using all generic variables and rendered conditions because the data itself isn't issue. It's the formatting. Within this repeat, the first iteration will put the element with the headers created right before this repeat. This only occurs in IE...not Chrome or Firefox. Any thoughts?

  • Could you post the resulting HTML in addition to the visualforce code? Given that it is a discrepancy between two browsers, it's likely just an HTML issue. – VictorKilo Aug 9 '13 at 20:05
0

There were a few issues that may cause the issue.

On line 16: Added ') to the value attribute.

On line 28: Added ! to value attribute

I have updated the code here:

<apex:repeat var="row" value="{!someValue}">
    <apex:outputPanel layout="none" rendered="{!someVar}">
        <apex:outputPanel layout="inline">

                <tr style="padding: 0px 0px 0px 0px; height: 24px">
                    <td style="width: 20px; text-align: center;">
                        <apex:image />
                        <apex:image />
                    </td>
                    <td style="width: 10px; text-align: center;">
                        <apex:outputText rendered="{!someVar}"><span class="footnote" style="font-size: large;">*</span></apex:outputText>
                        <apex:outputText rendered="{!someVar}"><span class="footnote">&Dagger;</span></apex:outputText>
                    </td>

                    <td style="width: 600px">                       
                        <apex:outputLink value="JavaScript:newPopup('{!URLFOR($Page.myPage)}#scrs')">
                            <apex:outputText value="{!myValue}" rendered="{!someVar}"/>
                            <apex:outputText value="{!myValue2}" rendered="{!someVar}"/>
                            <apex:outputText value="{!myValue3}"/>
                        </apex:outputLink>
                    </td>           
                    <td> <span style="padding-right: 10px; text-align:center;"> <apex:outputText rendered="{!someVar}" value="{!myValue4}"/></span></td>
                    <td>
                        <apex:outputLink value="JavaScript:newPopup('{!URLFOR($Page.myPage2)}#domains');"> 
                            <span style="padding-right: 10px;"> <apex:outputText rendered="{!someVar}" value="{!myValue5}"/></span>
                        </apex:outputLink>
                    </td>
                    <td> <span style="white-space: nowrap;"> <apex:outputText rendered="{!someVar}" value="{!myValue6}"/></span></td>                
                 </tr>

        </apex:outputPanel>
    </apex:outputPanel>
</apex:repeat>
  • Thanks for the help Brad. These errors however were caused because I apparently can't copy from my files very well. I have fixed the typos in the block of code, but these are correct in my original document. Good eye though! Thanks. – El Duderino Aug 9 '13 at 19:08
  • I try! Do you have the <table> wrapper handy to paste in too? – Brad Ullery Aug 9 '13 at 19:17
  • Yeah, i updated the code to include the table tag and the headers. Now the code is exactly the way it looks in my file generalized. – El Duderino Aug 9 '13 at 19:21
0

I found out a fix to this issue. I was adding the headers into spans and noticed that not all of the th's were being gathered in the header span for some reason. So I added a "phantom" span:

<span><th style="display:none"></th></span>      <-----phantom
<span><th/></span>
<span><th/></span>
<span><th style="text-align:left; font-weight:bold"><apex:outputText value="1" rendered="{!someVar}"/></th></span>
<span><th style="padding-right:30px; font-weight:bold"><apex:outputText value="2" rendered="{!someVar}"/></th></span>
<span><th style="text-align:left; padding-right:10px; font-weight:bold"><apex:outputText value="3" rendered="{!someVar}"/></th></span>
<span><th style="text-align:left; white-space:nowrap; font-weight:bold"><apex:outputText value="4" rendered="{!someVar}"/></th></span>

Now the phantom is getting moved instead of the first blank header. This worked strangely enough.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.