hidden fixed buttons overlay content

MDB SupportCategory: MDB Angularhidden fixed buttons overlay content
1blick Pro User asked 1 week ago in MDB pro, version:4.5.5

1down votefavorite

I am using the mdbootstrap Pro 4.5.5 version and have the following problem. For providing context based actions i use the fixed buttons:


As us can see in the screen, the component overlays an hidden unordered list above the content. in this list the buttons are shown on hover or on click on mobile:

inspect fixed buttons

Problem is: if i have some links or other actions below the hidden list (that could happen on mobile, as u can see on the second scren), they are not clickable and the buttons are already shown when i will touch or click on the links under the list.

enter image description here

Would be very happy, if somebody could help.

Start your code here
1 Answers
1blick Pro User answered 7 days ago

Found the solution (more a hack than a solution) by myself. it depends on the init of velocity on the openFABMenu and closeFABMenu:

var closeFABMenu = function closeFABMenu(btn) {
$this = btn;
// Get direction option
var horizontal = $this.hasClass(‘horizontal’);
var offsetY = void 0,
offsetX = void 0;

if (horizontal === true) {
offsetX = 40;
} else {
offsetY = 40;

var time = 0;
$this.find(‘ul .btn-floating’).velocity(‘stop’, true);
$this.find(‘ul .btn-floating’).velocity({
opacity: ‘0’,
scaleX: ‘.4’,
scaleY: ‘.4’,
translateY: offsetY + ‘px’,
translateX: offsetX + ‘px’
}, {
duration: 80,
display: “none”

i overwrite the functions and insertet display: none and display:block on the inits of velocity. the problem was, that you only sets the opacity to 0 and do not hide the container of the buttons. atm it works for me, we hope the best. but the solution is not very clean, because i needed to change some of css and html. would be nice, if you could provide a solution that accounts on that….wondering, if i am the only person with the problem of the overlaying container….