0

I have a VF page created for Salesforce classic using Lightning Design System. The page works fine in Classic. But when I try to view it in Lightning Experience, it doesn't load (CSS) properly. Any reasons for the issue? I have enabled the 'Available for Lightning Experience, Lightning Communities, and the mobile app' checkbox as well. Please note that I added static resource to load the LDS css too but it didnt work out.

<apex:page id="sConfigId" controller="VF_Controller" showChat="false" showHeader="true" sidebar="false" standardStylesheets="false" applyBodyTag="false" applyHtmlTag="true" showQuickActionVfHeader="false" docType="html-5.0">

    <head>
        <title>Title</title>

        <apex:includeScript value="{!URLFOR($Resource.SR_SR, '/js/jquery-1.12.3.min.js')}"/>
        <apex:includeScript value="{!URLFOR($Resource.SR_Connect, '/js/jquery-ui.js')}"/>
        <apex:stylesheet value="{!URLFOR($Resource.SR_Connect, '/css/jquery-ui.css')}" />

        <!-- Import aljs and momentjs for Date pickers -->
        <apex:includeScript value="{!URLFOR($Resource.SR_Connect, '/js/jquery.dataTables.min.js')}"/>
        <apex:includeScript value="{!URLFOR($Resource.SR_Connect, '/js/dataTables.colReorder.min.js')}"/>
        <apex:stylesheet value="{!URLFOR($Resource.SR_Connect, '/css/jquery.dataTables.min.css')}" />

        <!-- Import Datatables and jquery -->
        <!-- Import aljs and momentjs for Date pickers -->
        <!-- Import SDLS --> 
        <apex:slds />

    </head>

enter image description here

  • Can you add the Screenshot of the VF page in Lightning Environment for reference and indicate what is wrong with that? – Amit Singh Jul 16 '18 at 9:24
  • hey, attached the screen shot. Inspect doesn't show me any errors too – L Mudiyanse Jul 16 '18 at 9:35
  • Which specific CSS is not loading? Are you expecting to show your VF with lightning styles? If so, try setting lightningStylesheets. This will work ok if you have used standard apex tags in your page. Any custom styles my still need updating to work with lightning version though. – Ranga Jul 16 '18 at 9:37
  • Yes. I tried adding lightningStylesheets="true" on <apex: page lightningStylesheets="true"> but still doesn't work. any idea? – L Mudiyanse Jul 16 '18 at 9:41
  • In lightning experience, after rendering the page if you look at the source, are you able to identify which css is not loading? – Ranga Jul 16 '18 at 10:25
0

I think it should work if you adds class="slds-scope" to your body element.

<body class="slds-scope">
   ...
   your html code
   ...
</body>
0

Have you tried using lightningStylesheets in your apex:page tag. See example below

<apex:page id="sConfigId" controller="VF_Controller" showChat="false" showHeader="true" sidebar="false" standardStylesheets="false" applyBodyTag="false" applyHtmlTag="true" showQuickActionVfHeader="false" docType="html-5.0" lightningStylesheets="true">

Winter 18 – Automatic Styling of Visualforce Pages in Lightning Experience

  • Added already. Nothing changed – L Mudiyanse Jul 16 '18 at 10:11

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.