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, 2016 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? May 25, 2016 at 6:07
  • @SantanuHalder , any work around did you find for fixing the div.
    – Raj_SFDC
    May 27, 2016 at 11:31
  • Yes, please see my answer to this question. May 30, 2016 at 9:06

2 Answers 2


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. Jun 14, 2016 at 11:39

You must log in to answer this question.

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