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

2 Answers 2

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 */
    }
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');

});

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .