[SalesForce] Visualforce with SLDS spinner embedded in a page layout

I'm trying to embed SLDS' spinner into a standard visualforce while it loads. The issue is I am getting the spinner when I test my Visualforce by itself /apex/myVisualforceName, but not once embedded in the page layout.

My code regarding the spinner and the action status is:

<apex:page id="CustomHistoryTracker" standardController="Oferta__c" extensions="CustomHistoryTrackerController">

    <apex:slds />

    <apex:form id="form">
        <!-- SPINNER -->
        <apex:actionStatus id="status">
            <apex:facet name="start">
                <div class="slds-spinner_container" style="position: fixed;" >
                    <div role="status" class="slds-spinner slds-spinner--large slds-spinner--brand">
                        <div class="slds-spinner__dot-a"></div>
                        <div class="slds-spinner__dot-b"></div>
                    </div>
                </div>
            </apex:facet>
        </apex:actionStatus>
        <!-- / SPINNER -->

So when I test the visualforce, I get the spinner:
enter image description here

But in the Page layout I do not (it's blank until the visualforce renders):
enter image description here

Any ideas on why this is happening?

Best Answer

You are missing the <div class="slds-scope"> container which is needed when inline vf.

<apex:page id="CustomHistoryTracker" standardController="Account" >

    <apex:slds />
    <div class="slds-scope">
    <apex:form id="form" style="height: 200px;">
        <!-- SPINNER -->
                <div id="spinner" class="slds-spinner_container slds-is-relative" >
                    <div role="status" class="slds-spinner slds-spinner--large slds-spinner--brand">
                        <div class="slds-spinner__dot-a"></div>
                        <div class="slds-spinner__dot-b"></div>
                    </div>
                </div>
        <!-- / SPINNER -->
    </apex:form>
    </div>

    <script>
        setTimeout(function(){ document.getElementById('spinner').className += ' slds-hide' }, 3000);
    </script>
</apex:page>

I also removed the action status (because I did not know what you were doing to invoke the status) and added a timeout (to hide it) so you could see that it does indeed work. But without the <div class="slds-scope"> the SLDS styles are not used and thus no matter what you do you will not see the spinner

You can test it out by using the above. Then simple put an x in front of slds-scope and make it xslds-scope and try again. You will see it never shows up. Then start adding back in your code and testing to ensure you do not break it

Related Topic