+ Start a Discussion
SamuelDeRyckeSamuelDeRycke 

Loss of css styling on rerendered content, repeater content styles not applied after rerender.

This has been driving me insane for the last few hours, and I can't find a solution. I hope someone with more VF experience can help me out.

 

I have a VF page which uses a template, but in addition to the stylesheets linked in the template,  I link an additional one in the pages with specific css. In the output it's added to the page head correctly, and all page content on the page is styled as should be. Including the content in the repeater. But when rerendering, it's content isn't styled.

 

The linked css is actually a VF mage with content type txt/css, I tried using a static resource css file, but that made no difference.

 

<apex:page cache="true" showHeader="false" contentType="text/css">
.. css content
</apex:page>

 

My page displays a list  (using apex:repeater) of sf idea's (but that ofc should not be relevant), and has a prev&next page commandlink on the bottom of the page which uses the nex soql offset to imlement pagination. You get the point, the repeater showing the content is reloaded , works perfectly, all data is there but BAM , none of the additional css styles applied to it whatsoever. However, some of the css linked in the css template are applied. But even when adding the additional styles to the page template, they are not applied either.  Where am I going wrong here ?

 

the page:

 

<apex:page id="test_ideahome" showHeader="false" title="{!$Label.site.site_login}" standardStylesheets="false" controller="SW_IdeaHomeController">
     <apex:stylesheet value="{!$Page.SW_IdeaCSS}" />
  <apex:composition template="{!$Site.Template}"> 
    <apex:define name="body" > 
   
       <div class="button-center-wrap">
         <apex:Outputlink styleclass="button addIdea" value="{!$Page.SW_IdeaNew}">Post your own idea</apex:Outputlink>
       </div>
       <hr/>
       <apex:form >
            <apex:pageblock id="idea_list">
                <apex:outputtext style="padding:20px;" value="The Idea community could not be found !" rendered="{!noCommunity}" />
                  <apex:outputtext style="padding:20px;" value="There are no idea's yet, click the link above to post one yourself!" rendered="{!noideas}" />
                    <section id="ideas">
                       <apex:repeat value="{!Ideas}" var="idea" id="ideaRepeater" rendered="{! noideas==false}">
                           <article>
                                <div class="content-wrap">
                                    <span class="score">
                                        <apex:outputText value="Score: "/>
                                        <apex:outputText styleclass="score-number" value="{! text(idea.VoteTotal) }"/>
                                    </span>
                                    <div class="text">
                                        <h1>
                                            <apex:commandLink action="{!gotopage}" value="{!idea.title}" ><apex:param name="id" value="{!idea.Id}"/></apex:commandLink>
                                        </h1>
                                                                        
                                        <p>
                                            <apex:outputText value="{! idea.body }" escape="false"/>
                                        </p>
                                    </div>
                                </div>
                                    
                                <aside>
                                    <strong class="comments"><apex:outputText value="{! text(idea.numcomments)}"/></strong>
                                    <apex:outputText value="comments"/><span>|</span>                  
                                    <apex:outputText value="posted on:"/>
                                    <strong>
                                        <apex:outputtext value=" {0,date,yyyy.MM.dd}" >
                                            <apex:param value="{! idea.createddate}" />
                                        </apex:outputtext>
                                    </strong><span>|</span>
                                    <apex:outputText value="posted by:"/>
                                    <strong><apex:outputtext value="{! idea.createdby.communitynickname}" /></strong><span>|</span>
                                    <apex:outputText value="lastcomment on:"/>
                                    <strong><apex:outputtext value="{! text(idea.lastcommentdate)}" /></strong><span>|</span>
                                    <apex:outputText value="status:"/>
                                    <strong><apex:outputtext value="{!idea.status}" /></strong>
                                </aside>
                            </article>
                         </apex:repeat>
                    </section>
            <div class="pager">
                <apex:commandlink styleclass="button prevButton" value="Previous page" action="{! prevPage}" rerender="idea_list" rendered="{! page_offset!=0}"/> <apex:commandlink styleclass="button" value="Next page" action="{! nextPage}" rerender="idea_list" rendered="{! noideas==false}"/>
            </div>
            <hr />
            <div class="button-center-wrap">
                <apex:Outputlink styleclass="button addIdea" value="{!$Page.SW_IdeaNew}">Post your own idea</apex:Outputlink>
            </div>
            </apex:pageblock>
            
        </apex:form>
     </apex:define>
    </apex:composition>  
</apex:page>

 All of this is on Authentication site pages, but I doubt that is relevant, the profile of the user with which i'm testing has access to all pages, including the css page, etc. All is styled fine on pageload, including the content in the repeater. But when rerendering, it's content isn't styled.

 

It happens in chrome,FF and IE so its not browser related.

 

 

SamuelDeRyckeSamuelDeRycke

A responce for the sake of those who might encouter this problem too.

 

First of all do not use "view source code" in chrome, this makes a new request and will not consider js changes to the page. Use the inspect element functionality, this sidetracked me for quite a while.

 

The issue turned out to be that html5 elements did not get rerenderd, I have not found out why they are rendered in the original pageload, but not in the rerender. We're on a deadline so redid the layout using div's instead of html 5 elements, this work around worked. 

 

We're using a template VF page, which has a "doctype=html-5.0". When not adding that to the page, this seems to be ignored and the page doctype is the html 4 transitional default. When adding html5 doctype to the page, it was enforced, but solved nothing to the problem at hand.

 

 

udaykumar kudaykumar k
thanks alot SamuerlDeRycke "We're on a deadline so redid the layout using div's instead of html 5 elements", is it referring to SVG, USE tags?..we are facing same issue, replaced the SVG''s with apex:image tags..rerendering data is coming but loosing the CSS(Custom css) ..we are building it in SLDS(ofcourse div's) still not able to get the custom css after rerendering!! any thought would be great help , thanks in advacnce.