Topic: sticky-bottom / floating-buttons

iparker free asked 4 years ago


I want to floating buttons centered in a sticky div at the bottom of a page.

I tried following code:

<div class="text-center fixed-bottom">
            <mdb-btn tag="a" color="green" floating size="lg" @click.native="accept()" ><mdb-icon icon="check"/></mdb-btn>
            <mdb-btn tag="a" color="yellow" floating size="lg" @click.native="cancel()" ><mdb-icon icon="times"/></mdb-btn>

With this I have the problem that the the buttons are not displayed complete but cut off.

I don't know if its better to use the sticky-directive ( I tried this but it seems that sticky bottom is not supported?

Can you help me with this? Why are the buttons not displayed completly?

Best regards,


enter image description here

Mikołaj Smoleński staff answered 4 years ago

Hi there,

In such advanced case You will have to style floating buttons manually, by adding some css rules. I suggest to use position absolute and bottom key in this situation.

Best regards

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Vue
  • MDB Version: 6.2.0
  • Device: x
  • Browser: x
  • OS: x
  • Provided sample code: No
  • Provided link: Yes