[SalesForce] Fixed div in Salesforce1 using lightning components

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!

Best Answer

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

Related Topic