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:

https://mdbootstrap.com/components/buttons/#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;
}

$this.removeClass(‘active’);
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….