Topic: hidden fixed buttons overlay content

1blick pro asked 6 years 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 premium answered 4 years ago

I cant use the button because the problems with different screen resolutions are not solvable for me.

Fixed Button

I'm testing your hack now. I don't like hacks, because they often lead to problems later on and are difficult to document.

Thanks for your work!

Arkadiusz Idzikowski staff commented 4 years ago

Do you use MDB Angular or jQuery version?

1blick pro answered 6 years 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....

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: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: Yes
  • Provided link: Yes