hidden fixed buttons overlay content

1blick asked 2 months ago

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

1blick answered 2 months 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....

Please insert min. 20 characters.


Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: Yes
  • Provided link: Yes