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
Patrick DixonPatrick Dixon 

Bug - VF producing html with missing </div>s

I have the following VF page using custom objects and a custom controller to generate the page content:-

 

<apex:page showHeader="false" controller="PageRenderer" title="FusionExperience" >
<apex:stylesheet value="{!URLFOR($Resource.fusionexperience, 'css/reset.css')}" />
<apex:stylesheet value="{!URLFOR($Resource.fusionexperience, 'css/style.css')}" />
<apex:stylesheet value="{!URLFOR($Resource.fusionexperience, 'css/type.css')}" />

<!-- CONTENT -->
<div id="content">

    <!-- PAGE ELEMENTS (PASSED THROUGH PGL PAGE PARAM) -->
    <apex:outputPanel rendered="{!NOT(elements.size=0)}">
        <apex:repeat var="el" value="{!elements}" >

            <!-- (LIST OF) CONTENT TYPE -->

            <apex:variable var="clRender" value="{!NOT(ISNULL(el.Content_Type__c))}" />
            <apex:outputPanel rendered="{!clRender}" layout="block" styleClass="box">
                <div class="viewdiv {!el.Box_Size__c}">
                    <!-- BOX TITLE -->
                    <!-- uses content type title -->
                    <div class="latestnews headline">
                        <h3>{!el.content_type__r.Title__c}</h3>
                    </div>
                    
                    <!-- //BOX TITLE -->
                    
                    <!-- OUTLINED BOX -->
                    <div class="latestnews content">
                        <ul class="latestnews">
                            <apex:variable var="noItems" value="{!el.content_type__r.List_Length__c}" />
                            <apex:repeat var="cl" value="{!ContentList}" >
 
                                <!-- Only list content of THIS content type -->
                                <apex:variable var="clRender" value="{!AND(noItems>0, cl.Content_Type__c=el.Content_Type__c)}" />
                                <apex:outputPanel rendered="{!clRender}" >
                        
                                    <!-- IMAGE/URL -->
                        
                                    <apex:variable var="isPDF" value="{!IF(cl.Attachment__c='pdf', cl.Use_Attachment__c, false)}"/>
                                    <apex:variable var="isFlash" value="{!IF(cl.Attachment__c='flash', cl.Use_Attachment__c, false)}"/>
                                    <apex:variable var="readMore" value="{!IF(cl.content_type__r.Read_More__c,true,false)}" />

                                    <!-- establish pdf string -->
                                    <apex:variable var="pdfLink" value="{!IF(isPDF, IF(cl.Attachments.size=0, '', cl.Attachments[0].id), '')}"/>
                                    <apex:variable var="pdfLink" value="/servlet/servlet.FileDownload?file={!pdfLink}" />
                                
                                    <!-- establish flash string -->
                                    <apex:variable var="flashLink" value="{!IF(isFlash, IF(cl.Attachments.size=0, '', cl.Attachments[0].id), '')}"/>
                                    <apex:variable var="flashLink" value="fe?id={!cl.Content_Type__r.Read_More_Dest__c}&mov={!flashLink}" />
                        
                                    <!-- establish URL string for new page view -->
                                    <apex:variable var="itmLink" value="{!IF(cl.Contents__r.size=0, '', cl.Contents__r[0].id)}" />
                                    <apex:variable var="itmLink" value="fe?id={!cl.Content_Type__r.Read_More_Dest__c}&itm={!itmLink}" />
                                    <apex:variable var="itmLink" value="{!IF(cl.Contents__r.size=0, '', itmLink)}" />

                                     <apex:variable var="link" value="{!IF(readMore, IF(isPDF, pdfLink, IF(isFlash, flashLink, itmLink)), cl.URL_Link__c)}" />


                                     <!-- TEXT BLOCK -->
                                    <li class="latestnews">
                                        <a href="{!link}" class="latestnews">{!cl.Heading__c}<br /></a>
                                        <apex:variable var="sRender" value="{!NOT(cl.Content_Type__r.Synopsis_Length__c=0)}" />
                                        <apex:outputText rendered="{!sRender}" escape="false" styleClass="latestintro" value="{!LEFT(cl.Synopsis__c,cl.Content_Type__r.Synopsis_Length__c)}..." />
                                    </li>
                                    <apex:variable var="noItems" value="{!noItems-1}" />
                                </apex:outputPanel>
                            </apex:repeat>
                        </ul>
                    </div>
                </div>
             </apex:outputPanel>
 
              <!-- //CONTENT TYPE -->
                     
        </apex:repeat>
    </apex:outputPanel>

<!-- //CONTENT -->

</div>
</apex:page>

 

However, it's not formatting correctly in the browser, and when looking at the html code produced:

 

(see here) http://www.yatecourtbarn.adsl24.co.uk/images/test.html

 

It seems to be producing code that is missing the closing </div> tags, and hence screwing-up the css layout.

 

AFAICS, it has opening nested <div> tags for 'box', 'box-left viewdiv', and 'content latestnews', but only closes two of them before the next opening sequence.

 

Has anyone come across this before and/or can anyone offer a solution?

 

Thanks.

 

Orion@gmail.comOrion@gmail.com

I have run into the same issues which are holding up a few projects. Is there anybody who might know how to fix it?

Patrick DixonPatrick Dixon

I still think this is a bug, but I discovered that it doesn't like me re-using the apex:variable 'clRender' (presumably because the first div is unclosed when I reuse it).  If I change the 2nd occurance to cl2Render, it all formats correctly - although it still seems wrong to me that valid vf code can produce invalid html code  ...

 

Hope that helps you too.