1

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

Improve this question
7
  • Can you add the Screenshot of the VF page in Lightning Environment for reference and indicate what is wrong with that?
    – Amit Singh
    Commented Jul 16, 2018 at 9:24
  • hey, attached the screen shot. Inspect doesn't show me any errors too
    – L Mudiyanse
    Commented Jul 16, 2018 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
    Commented Jul 16, 2018 at 9:37
  • Yes. I tried adding lightningStylesheets="true" on <apex: page lightningStylesheets="true"> but still doesn't work. any idea?
    – L Mudiyanse
    Commented Jul 16, 2018 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
    Commented Jul 16, 2018 at 10:25

2 Answers 2

Reset to default
1

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

<body class="slds-scope">
   ...
   your html code
   ...
</body>
Improve this answer
0
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

Improve this answer
1
  • Added already. Nothing changed
    – L Mudiyanse
    Commented Jul 16, 2018 at 10:11

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .