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:
But in the Page layout I do not (it's blank until the visualforce renders):
Any ideas on why this is happening?
Best Answer
You are missing the
<div class="slds-scope">
container which is needed when inline vf.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 spinnerYou 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