I have a visualforce page that gets initially loaded, then an action function is triggered that does a webservice callout. Once the action is finished and the output panel rerenders, I am losing the styles from the SLDS.

Here, I have an overlay running while the spinner is running, but you can tell that the styles are applied. IE, you can see the box around it.

enter image description here

But here, after the outputPanel gets re-renedered after my action function has rerendered, it looks like this:

enter image description here

Tested this using the generic card example from SLDS, but removed the SVG, as I do not need it, and it seemed to have caused problems in the past based on my searching.

<apex:outputPanel id="FlexAccountPanel">
    <article class="slds-card">
        <div class="slds-card__header slds-grid">
            <header class="slds-media slds-media_center slds-has-flexi-truncate">

                <div class="slds-media__body">
                        <a href="javascript:void(0);" class="slds-card__header-link slds-truncate" title="[object Object]">
                            <span class="slds-text-heading_small">Card Header</span>
            <div class="slds-no-flex">
                <button class="slds-button slds-button_neutral">New</button>
        <div class="slds-card__body slds-card__body_inner">Card Body (custom goes in here)</div>
        <footer class="slds-card__footer">Card Footer</footer>

And my actionFunction in case you want to see it

<apex:actionFunction name="getClaimData" action="{!getFlexInfo}" rerender="FlexAccountPanel, FlexClaimPanel" status="sts" oncomplete="resetTableSort();">
        <apex:param name="CustomerNo" value="" assignTo="{!CustomerNo}"/>

It may be important to note that I do not lose my table styles when my other panel gets rerended using the SLDS, I just seem to lose the card styling, mostly the container it would seem.

  • I suggest you use your browser's "Inspect" feature to examine the HTML~ before and after the re-render to confirm that the HTML/CSS is the same. If it is the same, try a browser that has a different rendering engine e.g. Firefox if you are using Chrome and vice versa to try ti see if it is a browser rendering bug.
    – Keith C
    Aug 25, 2017 at 8:28
  • @KeithC I ended up changing the <article to <div and it seemed to work better for what I needed. Which was basically the box. Once I had the box back with the div, the gray background came back. I don't know why the article tag didn't work.
    – JRiffe
    Aug 26, 2017 at 1:03
  • Weird. Glad you found a wohrk around.
    – Keith C
    Aug 26, 2017 at 7:56
  • check out my answer here (salesforce.stackexchange.com/a/306494/25289) May 18, 2020 at 18:39


You must log in to answer this question.