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 '17 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 '17 at 1:03
  • Weird. Glad you found a wohrk around. – Keith C Aug 26 '17 at 7:56
  • check out my answer here (salesforce.stackexchange.com/a/306494/25289) – Jake Richter May 18 '20 at 18:39

Your Answer

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

Browse other questions tagged or ask your own question.