hidden fixed buttons overlay content

Topic: hidden fixed buttons overlay content

1blick pro asked 7 years ago

1down vote favorite 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:

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.

Would be very happy, if somebody could help.

Start your code here

Add comment

IRC Finance AG premium answered 5 years ago

0 0 Best answer

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 5 years ago

Do you use MDB Angular or jQuery version?

Add comment

1blick pro answered 7 years ago

0 0 Best answer

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.

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....

Add comment

Write

Create snippet

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

1blick

Pro User 10Support score
1Questions 1Answers 0Snippets