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
ssoftwaressoftware 

Salesforce1 embedded visualforce page: background color issue

Hi All,

The following visualforce page when embedded in a detail record looks OK when accessed from a web browser. However, when it is accessed from Salesforce1App, its background color is white. The option "Available for Salesforce mobile apps" is checked for the page.

How can I fix it so that the same page looks properly in both the cases?

--------------------------------------
<apex:page standardController="Lead" docType="html-5.0" showHeader="false" sidebar="false">
<apex:outputText value="Hello World" />
</apex:page>
--------------------------------------

Following is the screenshot from Salesforce1 App:

salesforce1 screenshot

Thanks in advance
Madhav
Sfdc CloudSfdc Cloud
Hi Madhav,
On Visualforce pages Pageblock , PageblockSection, PageblockSectionItem frequently used. These components are good for non-mobile devices but on mobile they looks awkward and looks very small and uncomfortable. Following components must not be used on Salesforce1 compatible pages and Salesforce1 don’t recommend them to use:

1<apex:pageBlock>
2<apex:pageBlockButtons>
3<apex:pageBlockSection>
4<apex:pageBlockSectionItem>
5<apex:pageBlockTable>

Refer below link for more learn about Salesforce1 Look & Feel
http://www.sharealltech.com/articles/12-customise-visualforce-pages-for-salesforce1

Check Below link for (Change Salesforce1 App Branding for Your Organization)
http://help.salesforce.com/apex/HTViewHelpDoc?id=customize_sf1_branding_edit.htm&language=en_US

If this answer will help ,Please mark it as best answer to help others :)
Thanks
ssoftwaressoftware
Hi,

Thank you for your repy. I am not using any of the mentioned apex page block settings. I am only using outputText. I tried using <p> tags as well but the issue remains the same.

I checked the links you sent me but they mostly talk about changing css to customize the vf page to l ook nice in Salesforce1 app , but doing so will change/break its look when you access the detail page from a web browser. Thus the challenge is how to use the same VF page to show properly in both the cases or is it just not possible?

Kind Regards
Madhav
Sfdc CloudSfdc Cloud
Hi Madhav

In that case you have to use HTML 5 in your code and browser compatibility Code in your page.
Below code working fine in my org for browser compatibility 
//It uses for device and browser compatibility
<meta name="viewport" content="width=getWidth(); height=getHeight(); initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>

//Stylesheet for your page
apex:stylesheet value="{!URLFOR($Resource.iTerm_resource, 'jquery.mobile-1.2.0.min.css')}"/>
<apex:includeScript value="{!URLFOR($Resource.iTerm_resource, 'jquery-1.8.2.min.js')}"/>
<apex:includeScript value="{!URLFOR($Resource.iTerm_resource, 'jquery.mobile-1.2.0.min.js')}"/ >

//Java Script function calling

function getWidth()
  {
    xWidth = null;
    if(window.screen != null)
      xWidth = window.screen.availWidth;
 
    if(window.innerWidth != null)
      xWidth = window.innerWidth;
 
    if(document.body != null)
      xWidth = document.body.clientWidth;
 
    return xWidth;
  }
function getHeight() {
  xHeight = null;
  if(window.screen != null)
    xHeight = window.screen.availHeight;
 
  if(window.innerHeight != null)
    xHeight = window.innerHeight;
 
  if(document.body != null)
    xHeight = document.body.clientHeight;
 
  return xHeight;
}
You have to override standard view of page with HTML5/CSS

Thanks
ssoftwaressoftware
Hi Nitin,

Thank you for your reply. I appreciate it. So if I understand you correctly, I need to use pure HTML to output the text, instead of <apex:outputText> for instance. Is it correct?

I am guessing that your code above could be working if you used it in a visualforce page and exposing the page as a tab in Salesforce1. However, have you tested it by placing the same page embedded in a detail record layout? Is the background color in this case white or does it able to inherit the Salesforce1 background?

Thanks
Madhav
Sfdc CloudSfdc Cloud
Hi Madhav
I haven't used for detail record layout and expose as a tab in salesforce1 but its working in any mobile when i used same url in mobile browser.
Could u replace detail view by using HTML .Might be it will work.

Thanks
ssoftwaressoftware
Hi Nitin,

For the specifc project I am working on, the visualforce page need to be displayed as embedded in a standard detail page record so that it appears just like any other field in the detail page. Thus writing the whole detail page as an html or using the visualforce page as a separate tab are not suitable options.

/Madhav
devindiaadevindiaa
Hi Madhav

Did you get a resolution to this? PLs share your code if you did.
I have a similar problem, its a simple text field taht is displayed on pagelayout via embedded VF page, but it looks bad -
background,
scrool bar,
border
and in general it doesnt blend with the Salesforce1 page.

Thanks
Laxmi
ssoftwaressoftware
Hi Laxmi,

No, it is not resolved. I could not figure a way to fix it.

Kinds regards
Madhav