Although this may not be salesforce specific issue but its remotely related to Salesforce and occurring only in Salesforce1 mobile app.

I am trying to fix a div at the bottom of my screen using the following markup. Its working fine for Desktop browsers, Mobile Browsers i.e Google Chrome & Salesforce1 Simulator. However its not working on Salesforce1 app in an actual mobile device. My current mark up:

 <div class="slds-grid" style=" position:fixed !important;  width:100%; bottom:0px !important; left:0px !important; right:0px !important; background-color:white;-webkit-backface-visibility:hidden;">
         <div class="slds-col slds-box slds-text-align--center slds-text-heading--medium" onclick="{!c.toggleFilterPanel}">
              Awesome Filters

The above div has a parent div which has a style of position: relative;

I am looking for some CSS tricks which will allow a div to stick at the bottom of the screen in Salesforce1 app in android devices.

Any help regarding this will be appreciated. Thanks in advance!

  • Look in the Salesforce1 Emulator using Chrome's Developer Tools and it will show you who's CSS is "winning". It's up to the browser to determine which CSS actually gets applied. Developer Tools should show you what's happening. You may need to namespace them to resolve the conflicts. See the VF Dev Guide for more on that. – crmprogdev May 24 '16 at 15:38
  • 1
    Thanks for the head's up but its working fine in Salesforce1 Emulator, the right css is winning and showing right effects. However, its not working Salesforce1 app in an actual mobile device. How do I check which css is winning in mobile device? – Santanu Halder May 25 '16 at 6:07
  • @SantanuHalder , any work around did you find for fixing the div. – Raj_SFDC May 27 '16 at 11:31
  • Yes, please see my answer to this question. – Santanu Halder May 30 '16 at 9:06

Try adding transform: translate3d(0,0,0); to the div having the position:fixed; bottom:0; style.

It worked for me without using any external script


After trying-and-testing various solutions for couple of days, I came up with an alternative/way around.

There is a footer div in Android App(Not sure about iOS though) which is available across the whole app, any page, any component. Here is the standard mark up:

<footer class="actionButtons hidden oneActionBar oneCenterStage" aria-hidden="true" data-aura-rendered-by="426:2;a">..some html..</footer>

Now what I did is: after all my scripts are loaded, using jQuery I removed the hidden class and applied all the properties in actionButtons except

    transform: translate3d(0,0,0);
    transition: transform .3s,visibility .3s;

Code to remove the classes and applying properties:

        $("footer").css({"z-index": "10","position": "absolute","bottom": "0","width": "100%","box-sizing": "border-box","height": "3.75rem",  "border-top": "1px solid rgb(216, 221, 230)","background-color": "rgb(255, 255, 255)","visibility": "visible","display": "block"});

and then remove actionButtons class as well. After all this, add your own customized html into this footer. Something like this:

    $("footer").html('<div  class="slds-grid" style="background-color:white;">
        <div id="filters" class="slds-col slds-box slds-text-align--center slds-text-heading--medium">Filters</div>

And you will have your sticky footer in Android App.

I know this is kind of a hack and may not be the most recommended way of doing it. But this provided a solution when nothing else worked.

Please let me know if there is any other proper solutions to this.

  • 3
    thanks for the details. I think this wont work with Locker Service enabled. Is there any other proper solution? We are also in search of similar requirement. – Pintu Francis Jun 14 '16 at 11:39

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.