2

We have created a Lightning APP and added Docked Utility Bar. The problem is it not fixed at the bottom of the screen. User need to scroll down to see the buttons. We tried to manipulable the CSS and added JS to move it to bottom of screen but is not working as expected.

Here are screen shots to give you better idea: enter image description here

enter image description here

Here is Code for this component:

<aura:component implements="flexipage:availableForAllPageTypes,force:appHostable" > 

<body bgcolor="red">
<div>
    Line 1<br/>Line 2<br/>Line 3<br/>Line 4<br/>Line 5<br/>     
</div>

<footer class="slds-utility-bar_container" aria-label="Utility Bar">
  <h2 class="slds-assistive-text">Utility Bar</h2>
  <ul class="slds-utility-bar">
    <li class="slds-utility-bar__item">
      <button class="slds-button slds-utility-bar__action" aria-pressed="false">

        <span class="slds-utility-bar__text">Call</span>
      </button>
    </li>
    <li class="slds-utility-bar__item">
      <button class="slds-button slds-utility-bar__action" aria-pressed="false">

        <span class="slds-utility-bar__text">History</span>
      </button>
    </li>
  </ul>
</footer>
</body>

Can anyone please help me to fix this issue?

  • 1
    I apologize, but I don't think you can fix it. You'll have to write your own. The problem is that it is not supported on mobile: Docked Utility Bar explicitly says "Desktop only". I've recreated the issue and didn't see an easy solution to it, either. – sfdcfox Nov 29 '17 at 5:57
  • 1
    Thank you for your comment and confirming that we can not fix that quickly. – AtulRajguru9 Nov 29 '17 at 7:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.