function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Jean Grey 10Jean Grey 10 

Remove white space when using conditional rendering on Visualforce component in Lightning view

I can't get rid of the white space above the Visualforce page that is embedded on my page layout. The Visualforce markup has conditional rendering depending on the user's display theme. The whitespace is only showing in Lightning, not in Classic (see screenshots). 
<apex:page standardController="Event" standardStylesheets="{!isClassic}" applyBodyTag="{!isClassic}" extensions="TZTranslateController" >

    <apex:outputPanel rendered="{! !isClassic}">
        <apex:slds />
    </apex:outputPanel>
    <div class="slds-scope">
            
    <apex:outputPanel rendered="{!isClassic}">
        <div style="font-size: 10;padding-left: 38%">
        Director's Time
        </div>
       
    </apex:outputPanel>
    
    <apex:outputPanel rendered="{! !isClassic}">
        <div class="slds-grid slds-m-top_none">
        Director's Time
        </div>
        
    </apex:outputPanel>    

    </div>
</apex:page>
User-added imageUser-added image
NagendraNagendra (Salesforce Developers) 
Hi,

Try this. 
<apex:outputPanel rendered="{!isClassic}">
    <div style="font-size: 10;padding-left: 38%">
    Director's Time
    </div>

</apex:outputPanel>

<apex:outputPanel rendered="{! !isClassic}" layout="block" styleClass="slds-scoped">
    <apex:slds />
    <div class="slds-grid slds-m-top_none">
    Director's Time
    </div>

</apex:outputPanel>    

</apex:page>
Thanks,
Nagendra