I have created a dashboard like visual force page with several components that retrieve account information, revenue data, stock information, twitter feeds, chatter, and show some attached images. I've gotten to where I can see the page but when it loads, I can't scroll down to see the data on my phone. Using the one.app in Chrome on my desktop, I can scroll using the imbedded scrollbar.

Any ideas?

  • How are you accessing the Visualforce page? I have a long page in a Visualforce tab, so accessible from the left hand menu, and it works fine for me. This is on iOS. – Bob Buzzard Jan 29 '14 at 9:02
  • 1
    Can you paste your VF code snippet? – Gaurav Kheterpal Jan 29 '14 at 12:15
  • OK so this is rather strange. A coworker pulled up the page using the Salesforce1 app on his iPhone and it crashes the app. I open it up on my Android phone and it won't scroll. Another coworker loaded it up on his iPad and it works just fine. In the Chrome browser on my Android if I use the one.app to view the account record, the button link to the VF page does not work. – Robert Harper Jan 29 '14 at 20:41
  • Does anyone have an example of scroll workin on Salesforce1? Pls share – user17091 Feb 12 '15 at 21:13

None of the above suggestions worked. I ended up opening a case with support and after some time, we found a solution to the problem. It seams that when the page is rendered for the Salesforce1 app, there is some code or HTML that is still generated for the header for a standard desktop browser. We were able to correct the scrolling by setting the "showHeader" attribute on the tag to be false. After setting it to false, the scrolling worked and it didn't matter so much if you used an or tag for the page.

I have a test in the controller to determine if the page is being rendered for a web browser on a desktop or in a Salesforce1/app.one application. I use this to either show one form of the page with two columns for a desktop or single column for the Salesforce1/app.one. I use the same variable to set the value for the showHeader attribute so that rendering for the different platforms is automatic.

I hope this helps someone else save weeks of trying to figure out what to do. There will be a Knowlegebase article on Salesforce.com soon.

Please refer the sample code, You will be able to scroll

EG:

<apex:page docType="html-5.0" showHeader="false" standardStylesheets="true" StandardController="Lead" extensions="TestLead" sidebar="false" id="thePage">
<head>
     <meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1, maximum-scale=1, user-scalable=no"/> 
</head>

These mobile browsers have issues when you have horizontal and vertical scrolling in iframes on mobile.

Try putting in a body { overflow-y: hidden; } and see if it now works.

  • Hard to say if that fixes anything. I'm back to the original display problem where I can't even properly view the account page layout. – Robert Harper Feb 4 '14 at 21:19
  • The odd thing about the failing display is that I haven't touched the app install since I got it working. Now I'm back to the same display as I posted originally. – Robert Harper Feb 4 '14 at 21:26
  • Just so many issues, it's hard to say without a full bug report and investigation. Sorry. :( – Kris Gray Feb 7 '14 at 19:25
  • The style didn't have any effect on things. – Robert Harper Feb 10 '14 at 14:11
  • Kris, what are the debugging tools for the apps. This seems to be a client side thing and I've not tried to debug what is going on with my phone. I've used the tools for IE, Chrome, and FireFox a lot but I'm not aware of anything similar for the phone. – Robert Harper Feb 10 '14 at 14:12
up vote 1 down vote accepted

Sorry I didn't update this sooner. The whole problem was using VisualForce tags on a page to be used in the SalesForce1 app. The tag doesn't work well in the app on the Android OS. Because I needed conditional rendering of the elements, I wrapped them in the tag. Then the rest of the elements are standard HTML tags and as few tags as possible. None of the above suggestions worked.

There is a note somewhere in the documentation, that I didn't see until someone showed me using a direct link, that states that you should not use VisualForce tags in pages created for mobile devices. Also it is recommended that your actions be done through Ajax calls instead of all the normal tricks used on VisualForce pages. Page refreshes are expensive, with respect to performance, on mobile devices and dynamic content is much more efficient through Ajax and javascript.

I tried all of the other solutions and the only thing that worked for me was:

    html,html body{
      overflow: auto;
      -webkit-overflow-scrolling:auto;
    }
    body{
      position:absolute;left:0;right:0;top:0;bottom:0;
      margin:0;
    }

I sourced this from: https://gist.github.com/msrivastav13/c84d835d13574d8403f0 so props to Mr. Shrivastava. Tested on ios9 and ios10.

Your Answer

 
discard

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.