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">

    <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">
                    <!-- //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)}..." />
                                    <apex:variable var="noItems" value="{!noItems-1}" />
              <!-- //CONTENT TYPE -->

<!-- //CONTENT -->



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


(see here)


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?



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.