1

apex:slds tag works in Lightning Experience where as it is not working in Napili Community.This visualforce page is added as action button.

<apex:page standardController="Account">
 <apex:slds/>
 <apex:pageBlock >
 <apex:pageblockSection columns="2">
 <apex:outputField value="{!Account.Name}"/>
 <apex:outputField value="{!Account.Type}"/>
 <apex:outputField value="{!Account.BillingStreet}"/>
 <apex:outputField value="{!Account.BillingCity}"/>
 <apex:outputField value="{!Account.BillingState}"/>
 </apex:pageblockSection>
 </apex:pageBlock>
</apex:page>

enter image description here

enter image description here

Improve this question
3
  • do you have any css rules that only apply to the lightning community? under branding for example
    – glls
    Oct 19, 2017 at 19:14
  • I didn't added any css rules under branding.
    – sfdc
    Oct 19, 2017 at 19:15
  • Looks like the apex tags you are using are not fully supported by SLDS as mentioned below.
    – glls
    Oct 20, 2017 at 15:06

2 Answers 2

Reset to default
2

While it's true that SLDS doesn't support apex:pageBlock, what you do see is the global font and spacing changes provided by SLDS.

I'm guessing the iFrame used in Lightning Communities doesn't pre-scope the markup for you. Try wrapping it in a <div class="slds-scope"> [content goes here] </div>?

But if you're not even trying to use SLDS classes, maybe you might want to experiment with a brand-spanking-new feature to style Visualforce pages like Lightning. So you could also try removing <apex:slds/> and instead adding the attribute lightningStylesheets="true" to your apex:pageBlock. Make sure the Visualforce page has API version set to 41.

Improve this answer
5
  • none of those options will work (tested) additionally, its the SLDS that doesn't fully support those tags, not really a question of enabling lightningStylesheets or using the apex:slds tag, since all they do is actually reference the SLDS.
    – glls
    Oct 21, 2017 at 22:13
  • lightningStylesheets actually does not use the SLDS sheet at all. It's a special stylesheets that skins the standard Visualforce classes with styles that fit in with Lightning.
    – Charles T
    Oct 22, 2017 at 5:20
  • O.o, good to know. Still, doesn't work though :/
    – glls
    Oct 22, 2017 at 13:13
  • Does seem like a strange bug though. I guess the temp workaround is to hard-code a static resource stylesheet?
    – Charles T
    Oct 22, 2017 at 15:01
  • Wrapping with <div class="slds-scope"> [content goes here] </div> solved this issue. Thank you @CharlesT
    – sfdc
    Oct 23, 2017 at 17:52
1

From the SLDS Documentation:

Apex tags such as <apex:pageblock> and <apex:inputField> are not yet supported for use with the Salesforce Lightning Design System.

So, it is normal that SLDS is not applied to your page.

However, a few remarks:

If you check your network tab, you will see that the static resource for loading the Lightning design system is never actually found - it returns a 404 when loading in the Iframe from Lightning communities (in preview mode). This part looks like a bug.

enter image description here

If you remove the tag, you will see that there is no attempt to load it at all.

After publishing your site and accessing it (not in preview mode), the url path of the static resource will be the correct one (Status 200). Thus you might be unable to fully test SLDS tags in VF pages within communities until you publish your site and access it.

Improve this answer
2
  • 2
    That seems like a bug of the incorrectly constructed url variety.
    – Adrian Larson ♦
    Oct 19, 2017 at 22:20
  • 2
    for site preview and builder yes, however, once the community is published (and accessing the live site), the url seems to work, however, the end result is the same, no styling applied - pageblock is not supported by SLDS
    – glls
    Oct 19, 2017 at 22:29

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.