Fixed div in Salesforce1 using lightning components

Question

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
         </div>
</div>

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!

Answer 1

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

Answer 2

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").removeClass('hidden');
        $("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"});
        $("footer").removeClass('actionButtons');

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