function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Antoine LELEU 10Antoine LELEU 10 

CSS Sidebar problem : SLDS in Lightning Component Embedded in VF

Hi,

i'm developed a lightning component using SLDS Framework. The component is load in Lightning App and Embedded in VF.
The result is correct but when i want inculde header and side bar in the Salesforce Classic UI, there are display issues :

User-added image
Please, find the code below :

the vf page :

<apex:page controller="AlineaSearchController" showHeader="false" standardStylesheets="false" sidebar="false" applyHtmlTag="false" applyBodyTag="false" docType="html-5.0">

    <!-- ADD LIGHTNING COMPONENT -->
    <apex:includeScript value="/lightning/lightning.out.js" />
    <div id="lightning" />
    <script>
        $Lightning.use("c:AlineaSearch_App", function() {
          $Lightning.createComponent("c:AlineaSearch",{ label : "" },"lightning",function(cmp) {
          });
        });
    </script>

</apex:page>

And the page display in classic loadinf the original page  :

<apex:page standardController="Case" tabStyle="Case">
     <apex:include pageName="AlineaSearchPage"/>
 </apex:page>

Thanks for your help,
Antoine
Scott Haleo 4Scott Haleo 4
Hi Antoine,

Can you share with me some screenshot of UI ?

Regards,
Scott Haleo
Hytechpro
Antoine LELEU 10Antoine LELEU 10
Hi Scott,

Thanks for your answer.
Please find below, screen shots of UI.

This is the UI alone: 
UI Alone

And this is when i try to embedded the UI with Salesforce header and sidebar :

UI with Header and Sidebar
The CSS sidebar seems not apply correctly and the footer stay at the middle of the page.

Thanks,
Antoine