Concealed floating buttons that overlay content from MDB are a great way to

I am currently using version Pro 4.5.5 of mdbootstrap and encountering a specific issue. To enable context-based actions, I am utilizing fixed buttons:

As shown in the screenshot, the component displays a hidden unordered list above the content. This list reveals the buttons on hover or click on mobile devices:

https://i.sstatic.net/3fnzX.png

The problem arises when there are links or other interactive elements below the hidden list (as seen in the second screenshot), making them inaccessible as the buttons cover them when touched or clicked.

https://i.sstatic.net/ZFKU8.png

I would greatly appreciate any assistance in resolving this issue. Additionally, I welcome suggestions for alternative examples or solutions to implement a fab-button-bar using HTML and JS.

javascriptcssbootstrap-4material-designmdbootstrap

Answer №1

I managed to find a workaround for the issue myself, although it's more of a hack than a proper solution. The problem lies in how the velocity is initialized on the openFABMenu and closeFABMenu functions, where only the opacity is set to 0, hiding the buttons but leaving the container visible:


    var closeFABMenu = function closeFABMenu(btn) {
    $this = btn;
    // Determine 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"**
    });

Currently, I have modified the closeFABMenu/openFABMenu functions by adding display: none and display: block to the initialization of velocity. This seems to be working for me at the moment, though it's not the most elegant solution as it required some changes to the CSS and HTML. It's surprising to me that I seem to be the only one experiencing this overlaying issue.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the reason behind my resizer bar not changing color to green?

Whenever I resize the bar between the West and Inner Center areas, it turns green. However, the bar between the Inner Center and Inner South areas does not change color. How can I make it turn green when resizing, including adding the orange highlight for ...

javascriptjquerycssjquery-ui

Error Occurred: With Twitter Bootstrap wizard, the container has been found to

When using the twitter bootstrap wizard, I am encountering a 'TypeError: container is undefined' error in the console after clicking the 'next' chevron. Despite the error, the wizard continues to display the next tab. What could be caus ...

javascriptjquerybootstrap-4twitter-bootstrap-wizard

I find myself grappling with the connection error in connect-mongo

Encountering an issue with connect-mongo, I received the following error message: this.options = options ?? {}; SyntaxError: Unexpected token ? My code snippet is as follows: // Setting up database connection const mongoose = require('mongoose&apo ...

javascriptnode.jsmongodbexpressmongoose

jQuery Ajax request encounters error when trying to access correct URL

I am facing a challenge while trying to access a REST Web Service from an HTML/JavaScript application. I have set up both the web application and the Web Service on Apache HTTPD 2.2 server. Interestingly, when I directly call the Web Service's GET met ...

javascriptjqueryajaxweb-servicesrest

Tips on prefixing Bootstrap 4 classes to prevent conflicts with CSS classes

Recently, I've been focusing on creating small applications for websites. The websites hosting these apps may or may not use a css framework. To prevent any potential conflicts, I have decided to add a unique prefix to all Bootstrap classes. For insta ...

csstwitter-bootstrapbootstrap-4

The Ajax POST method may not be initialized, but it can still trigger a portion of a PHP if statement

Having trouble with Ajax when trying to send data from page1 to page2. Even though an if statement on page2 indicates that $_POST is not set, some of the code still runs, but not all. This issue is occurring on both XAMPP and my web-server. Here's th ...

phpajaxbootstrap-4

Button functions properly after the second click

import { Input, Box, Text, Divider, Button } from '@chakra-ui/react'; import { useState } from 'react'; export default function GithubSearchApp() { const [username, setUsername] = useState(''); const [data, setData] = use ...

javascriptnext.jsgithub-api

Angular 6 and Bootstrap 4 Collaborate for a Dynamic Multi-Level NavBar

(UPDATE: Issue Resolved - I discovered that I needed to include the JavaScript within $(document).ready(function()), which was previously missing. The example below worked perfectly for me.) I am attempting to implement a Multi-Level Navbar with Angular 6 ...

cssangularbootstrap-4navbar

Driving a Car using THREE.js on the Highway

I'm currently developing a car game using THREE.js. I've encountered an issue where I have created a road using Plane geometry and placed the car on it. Now, I have also made a terrain but am unsure of how to link the car to the road so that it m ...

javascriptthree.jswebgl

What is the best way to handle a server response when using the Ajax Post method?

I'm faced with a simple task in my application that involves retrieving data from a combobox after its selection event. Upon triggering the select event, the data is sent to a jQuery function which then requests an operation from the server side. Wh ...

javajavascriptajaxjqueryspring-mvc

Passing a variable from Twig to VueJS in Symfony 2.8 and VueJS 2: A beginner's guide

My Symfony 2.8 application now includes VueJs 2 as the front-end framework for added flexibility. Although my application is not single page, I utilize Symfony controllers to render views which are all enclosed in a base Twig layout: <!DOCTYPE html> ...

javascriptphpsymfonyvue.jstwig

What could be causing my inability to accurately guess people's ages?

My latest project involves developing a game where players have to guess names from images. Each game consists of 10 rounds, followed by a bonus round where participants must wager their points on guessing the age of the person in the image within a 2-year ...

javascripthtmlcss

Is it necessary to exclude the 'scripts' folder from your Aurelia project's .gitignore file?

Should I exclude the 'scripts' directory that Aurelia is building to in my CLI project from Git by adding it to .gitignore, or is there a specific purpose for tracking changes to this directory? ...

javascriptgitaurelia

Tips for preserving CSS styling following a hover event

While working on implementing a Menu control using jQuery and CSS, I encountered the following issue: Here is a live demo that demonstrates my current problem When I hover over 'Menu Item 1', this item successfully changes its style (background ...

jquerycss

Angular element fails to display properly

I'm currently working on developing a website using Angular and creating a header component. To generate the necessary files, I used the command ng g c commons/header which creates the HTML, SCSS, TS, and .spec.ts files. I then made modifications to t ...

htmlangularbootstrap-4

Router failure resulted in an internal server error

When navigating to a page in my router, I make a REST API request to retrieve data from the server in the beforeEnter clause as shown below: beforeEnter: (to, form, next) => { getData().then( (response) => { ...

javascripttypescriptvue.jstoast

The unhandled promise rejection error occurs when attempting to set headers after they have already been sent

I am trying to create an if-else return statement for control, but I keep getting this error: "UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: Can't set headers after they are sent." exports.delete = function ( ...

javascriptnode.jsmongodbmongoosepromise

Having trouble looping through Html5 canvas with JavaScript in Rails?

I am working on a rails project where I have a model called microposts: class Micropost < ActiveRecord::Base attr_accessible :content, :avatar belongs_to :user mount_uploader :avatar, ImageUploader To display the microposts, I created a partial ...

javascriptruby-on-railsrubyhtmlcanvas

Positioning the camera for an infinite ThreeJs gaming experience

I am currently learning Three.js and attempting to create my first game: an endless runner. After reading this article, I aim to create a similar game where the main character, a blue ball, rolls infinitely forward while dodging obstacles that appear in i ...

javascriptthree.js

Having trouble sending a GET request from the client to my backend route using axios in a React-Node.js/Express setup. Where did I go wrong?

Struggling with making an API request from my backend route (using nodes/express). I'm making an axios request from the client site using React. The express backend route works fine, so the issue must be in my client-side code. I've been stuck on ...

javascriptreactjsexpresshttprequestnodes