0

The slds brand band disappears after the component is loaded into the div. How do i fix this issue so that i can have the salesforce background with my custom component.

Steps to reproduce:

lcvfTest.app:

<aura:application access="GLOBAL" extends="ltng:outApp">
    <aura:dependency resource="lightning:button"/>
</aura:application>

vfpage:

<apex:page standardController="Account" recordSetVar="records" applyBodyTag="false">
    <apex:includeLightning />
    <apex:slds />
    <div class="slds-scope">
        <div class="slds-brand-band slds-brand-band_cover slds-brand-band_medium">
            <div  id="litin"></div>
        </div>    
    </div>
    <script>
        document.body.style.backgroundColor ="#b0c4df";
        $Lightning.use("c:lcvfTest", function() {
          $Lightning.createComponent("lightning:button",
              { label : "Press Me!" },
              "litin",
              function(cmp) {
                console.log("button was created");
                // do some stuff
              }
          );
        });
    </script>
</apex:page>
0

The solution is the following:

looks like a bug in lightning out. it is overriding the background image for the brand-band with a bad url. Open lcvfTest.app and change this extends="ltng:outAppUnstyled". This will make it so the lightning out app doesn't load any css, since we are already including slds in our VF page there is no need to include it with our lightning out app.

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.