3

I have a Visualforce page running inside a Salesforce1 page. The page contains a sticky header (position: fixed, etc.). This works great everywhere except on iOS. If I render the page directly in Safari on the phone (iOS) the sticky header works as expected, but when I view the page inside Salesforce1 the sticky header stops working. It just scrolls with the rest of the page.

I believe it has to do with the page being rendered in an iFrame inside Salesforce1. Similar to this issue: https://stackoverflow.com/questions/27083740/why-does-positionfixed-not-work-when-viewed-in-an-iframe-using-an-iphone-or. The fixes I have seen are to set the height and width of the iFrame to 100%. But being inside Salesforce1 that can't be done. Right?

Has anyone encountered and/or solved this issue?

1

Influenced by this Stackoverflow answer I wrapped all my Visualforce page content inside a <div id="ScrolledArea"></div> and added the following CSS to the page:

#ScrolledArea {
    height: 1px;
    min-height: 100vh; /* Percent of viewport height */
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch; /* Allow momentum scrolling */
}
| improve this answer | |
0

We have also faced same issue in Salesforce1 for IOS. To resolve the fixed header issue in IOS we have used CSS as well as jquery code.

HTML Code :

Contacts

My Contacts

CSS: .slds-scrollable{ overflow-y:auto; }

Javascript :

$(document).ready(function(e){

        $(".slds-scrollable").attr('style','height:'+($(document).height()-$(".fixedHeader").height()-20)+'px');

});

| 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.