Apex Code Development You need to sign in to do that
Don't have an account?
pu 7 VF page Showing Different view on site.com
Hi All,
I facing an issue with my VF page in which I have used slds for styling. When I tried to preview the page from VF page it shows fine but when using same VF page on site and tried to preview it as admin it shows diffrent styling.
<apex:page showheader="false" sidebar="false" standardStylesheets="false" applyHtmlTag="false" lightningStyleSheets="true" applyBodyTag="false" docType="html-5.0" id="leadcaptureform" >
<html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" lang="en">
<head>
<apex:slds />
</head>
<body>
<apex:image id="theImage1" value="{!$Resource.Test}" width="150" height="40" alt="abc" style=""/>
<div class="slds-scope">
<div class="slds-page-header" style="background-color:green;">
<div class="slds-align_absolute-center" style="background-color:green;height:60px;">
<apex:image id="theImage" value="{!$Resource.Test}" width="150" height="40" alt="ttt" style=""/>
</div>
</div>
</div>
</body>
</html>
</apex:page>
Although It must show as per below screenshot.
Same scenario when I implemented in my dev org it is working fine and showing page fine on site as well but in sandbox it is not behaving as expected.
Please suggest anything which I'm missing. Thanks in advance.
I facing an issue with my VF page in which I have used slds for styling. When I tried to preview the page from VF page it shows fine but when using same VF page on site and tried to preview it as admin it shows diffrent styling.
<apex:page showheader="false" sidebar="false" standardStylesheets="false" applyHtmlTag="false" lightningStyleSheets="true" applyBodyTag="false" docType="html-5.0" id="leadcaptureform" >
<html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" lang="en">
<head>
<apex:slds />
</head>
<body>
<apex:image id="theImage1" value="{!$Resource.Test}" width="150" height="40" alt="abc" style=""/>
<div class="slds-scope">
<div class="slds-page-header" style="background-color:green;">
<div class="slds-align_absolute-center" style="background-color:green;height:60px;">
<apex:image id="theImage" value="{!$Resource.Test}" width="150" height="40" alt="ttt" style=""/>
</div>
</div>
</div>
</body>
</html>
</apex:page>
Although It must show as per below screenshot.
Please suggest anything which I'm missing. Thanks in advance.
use the lightning design system styles as a static resource and try
First set, lightningStyleSheets="false"
And then, align the image as required, by referring to visualforce page.
Now, when you see in your site, it will render perfectly.
Hope this helps you.
Please mark this as 'Best Answer' if my reply was helpful. It will make it available for other as the proper solution.
Best regards,
Durairaj Saravanan
I tried to use static resource but still it is working as it is, no change.
Please suggest me any other thing to resolve it.
Regards,
Puneet