Topic: hidden fixed buttons overlay content

1blick pro asked 5 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: 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

milster@financesoft.ch 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 5 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.

FREE CONSULTATION

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

Status

Answered

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: Yes
  • Provided link: Yes
Tags