1

This is my first time embedding a lightning app into a visualforce page so I might be missing something obvious or doing something that's not allowed. Please forgive me!

I'm embedding a Lightning app into a VisualForce page and the CSS styles of the lightning design system don't seem to be all populating through. It seems like the box sizes are going through but the button styles are not all registering.

The styles were showing when I had them in the lightning app.

Here is my lightning application named FeedbackApp:

<aura:application access="GLOBAL" extends="ltng:outApp">
<aura:dependency resource="c:StarRating" />
<div aura:id="blankStuff" >
    Stuff...
</div>
</aura:application>

Here is the component named StarRating.cmp:

<aura:component >
<div class="slds-grid slds-m-top--x-small slds-grid--pull-padded">
      <!-- Had a lot of other code here that were styled with SLDS -->
              <button class="slds-button--brand slds-not-selected" onclick="{!c.hidePopover}">
              </button>
          </div>
        </div>
    </div>
    <div class="slds-size--1-of-8 slds-text-align--center">
        <!-- more markup here... -->
    </div>  
</div>

And my visualforce page

<apex:page standardController="Account">
<apex:stylesheet value="{!URLFOR($Resource.slds214, 'assets/styles/salesforce-lightning-design-system-vf.css')}" />
<apex:includeLightning />
<script type="text/javascript">

$Lightning.use("c:FeedbackApp", function() {
        $Lightning.createComponent(
            "c:StarRating", null, "starRating"
        );
    });
  //more scripts...
 </script>
 <div class="myOrg">
     <div id="starRating" />
 </div>
 <!-- more markup down here not related to the lightning component -->

I have tried putting the stylesheet include into the component but that still results in a slds-button--brand button that looks weird.

  • Do you have other css files in the VF page? And what does the developer tool for your browser show? – Lance Shi Nov 14 '16 at 23:21
  • @LanceShi So I'm inspecting the button and I see that nothing is overriding the background-color of the brand button and it shows its proper color. However, when it renders onto the page, it's a bland white. – akcorp2003 Nov 14 '16 at 23:49
  • Is the version of slds you are using scoped? If so, I don't see a scoping class outside your startRating div. Lighting out automatically does its own scoping now (see developer.salesforce.com/forums?id=9060G000000XcfcQAC) so you could opt to use that and not load your own version of the design system from a static resource. – dsharrison Nov 15 '16 at 1:14
  • @D.S. Now I have added scoping to my example. Hopefully that's the way to do it. I followed your link and I tried adding the scope <div class="slds-scope"> but it still had the problem before. – akcorp2003 Nov 15 '16 at 15:38
  • @askcorp2003 You should not need to add that scoping class yourself. Lightning Out should add it automatically. Would you be able to update your example to include the contents of the myOrg div after Lightning Out has injected your component in? – dsharrison Nov 15 '16 at 19:12
0

Switch of the standard stylesheets and header else you will run into bunch of conflicts

<apex:page standardController="Account" standardStylesheets="false" showHeader="false" sidebar="false">
  • I have just checked my VF pages, I didn't switch the standard stylesheets off and the slds buttons are still working for me though. – Lance Shi Nov 14 '16 at 23:33
  • 1
    Okay. So when I set the showHeader and sidebar to false. The buttons appear as what the SLDS shows. However, I still want the headers and sidebar to be there. Is there another way around that? – akcorp2003 Nov 14 '16 at 23:44
  • You may have to namespace the SLDS CSS and use along with namespace to avoid conflicts. – Mohith Shrivastava Nov 14 '16 at 23:48
  • Hm. I tried wrapping the entire body of my VisualForce page with <div class="myCompany"> ... </div> and I used the scoped VF CSS version of the SLDS but the button is still not displaying with the correct colors. – akcorp2003 Nov 14 '16 at 23:56
  • Can you inspect element and see whats messed up .I am sure it's CSS conflicts – Mohith Shrivastava Nov 14 '16 at 23:58
0

If your SLDS theming is not being passed through make sure your Aura App has the following set in its declaration:

<aura:application extends="ltng:outAppUnstyled" access="GLOBAL">

with the Unstyled part being the key.

You will also need to make sure your VisualForce page contains the SLDS tag

  <apex:slds />

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.