+ Start a Discussion
Jeffrey KoJeffrey Ko 

Automatically Style Existing Visualforce Pages with Lightning Experience Stylesheets (Beta) -> Not working in Mobile

Since Winter '18, Salesforce provided this new feature to automatically style existing VF pages to have the Lightning look-and-feel (https://releasenotes.docs.salesforce.com/en-us/winter18/release-notes/rn_vf_lightningstylesheets.htm).  I tried adding the "lightningStylesheets" attributes to a test VF page and it worked for me!

However, when I tested in on a mobile browser and Salesforce1 app, the VF page is still displayed in Classic UI.  :(

Anyone else have this issue and have a solution for it?  I guess this is still in Beta, but I thought it would work since the Release Notes say it will work for mobile too ...
Alain CabonAlain Cabon
Hi,

Can you post an example of your VFP ?

Are there lists ?

The responsive design works with lightningStylesheets = true but there are not supported tags for the VFP in SF1.

https://developer.salesforce.com/events/webinars/visualforce-in-salesforce1

Do you use these "not supported" tags below ?

User-added image

 Sandeep Bhanot Mobile Geek:  https://www.slideshare.net/developerforce/visualforce-in-salesforce1-1-1
 
Jeffrey KoJeffrey Ko
I was testing with a really simple VF page only (please see below).  Looks like I had the tags listed as "Supported but avoid if possible", but looks like the entire page is in Classic UI? 
 
<apex:page lightningStylesheets="true"
           standardController="Test__c">
  
  <apex:sectionHeader title="Lightning UI Styling Test" subtitle="TEST"/>
  
  <apex:form >
      <apex:pageBlock title="Page Block">
          <apex:pageBlockButtons >
              <apex:commandButton value="Save" action="{!save}"/>
          </apex:pageBlockButtons>

          <apex:pageBlockSection title="Sec 2" collapsible="false" columns="1">
                <apex:inputField value="{!Test__c.Value__c}"
                                style="width:180px;" />
          </apex:pageBlockSection>
      </apex:pageBlock>
  </apex:form>
   
</apex:page>

 
maryem bourhi 20maryem bourhi 20
Having the same issue, lightningstylesheets is not working on mobile