As apex:pageblock is not supported in SLDS it's suggested to use slds-panel and slds-panel_section to replace page block and pageblocksection respectively. In my existing code I use rendered property of pageblock section extensively. Is it possible to apply same conditions to a div that replaces the pageblocksection? for example:

    <apex:pageBlock title="Account & Opportunity Information" rendered="{!myCondition}">

Can this be replaced with

<div class="slds-panel slds-grid slds-grid--vertical slds-nowrap slds-form--compound" aria-labelledby="newaccountform" 

<div class="slds-panel__section"  rendered="{!myCondition == null}">
  • Why not just style the entire page as slds? developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/… – EricSSH Apr 23 '18 at 16:10
  • Entire page is slds styled. Inside the existing VF page, there are several pageblocks and pageblocksections which are rendered conditionally. I am converting/restyling these pages to SLDS styling (no lightning components or app). My question is in that context. As I read 'rendered' attribute can only be applied to VF controls, I wanted to check if someone has done rendering the 'div's conditionally? I also tried retaining the pageblocks and pageblocksections, but when slds styled controls added inside pagblocksection, nothing shows up on my page, that section does not show up at all. – Quest_sfdc Apr 23 '18 at 16:20

To render a div you use an apex:outputPanel with layout="block". What you want to do is:

   styleClass="slds-panel slds-grid slds-grid--vertical slds-nowrap slds-form--compound"
          ... content of DIV here ...

that should do the trick. Attributes that are native to the to-be-rendered div can be prefixed with html- to get passed unmodified (without the prefix) to the resulting component.

Hope that helps

| improve this answer | |

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.