Unwanted transparency issue in MaterialUI (MUI) BottomNavigation

Greetings fellow hobby developer! I recently embarked on a project using create-react-app and incorporated MUI dependencies. One feature I added was a fixed BottomNavigation, which you can view in action here.

Interestingly, in CodeSandbox, the BottomNavigation doesn't appear transparent as I anticipated. However, on my local machine, it does have a transparent quality. This means that when scrolling through lengthy pages, the content is visible beneath the BottomNavigation.

I'm puzzled by this discrepancy. Could it be a bug in the MUI version I'm using, or should I investigate something in my code?

Any insights or assistance would be greatly valued!

Thank you for your time,

Maarten

javascriptcssreactjsmaterial-uijsx

Answer №1

Whether the BottomNavigation is transparent doesn't matter (because it isn't) -- the issue lies in the default TextField labels having a zIndex value of 1, while the BottomNavigation has no defined zIndex. This results in the label appearing to "float above" the BottomNavigation within the current stacking context. To fix this, you can add a zIndex of 1 (or higher) to the sx prop of the BottomNavigation. See example below:

<BottomNavigation
  sx={{
    position: "fixed",
    bottom: 0,
    left: 0,
    right: 0,
    zIndex: 1 // Setting zIndex
  }}
>

Just a heads up: The BottomNavigation component API does not include an elevation prop. That property is used by Paper for the drop shadow effect (which I assume was where you found your example).

For a functional CodeSandbox example, visit: https://codesandbox.io/s/unwanted-transparant-bottomnavigation-forked-cz97df

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

Display visual information without requiring the parameters to be filtered beforehand in vue.js

Upon opening my page, I encountered an issue where the graphics appear blank. This is because I set up the callback for generating graphic data through params request. I wish to first fetch the general data when the page opens, and only load with params w ...

javascriptvue.jsquasar-framework

The elements are out of sync and not properly aligned

Having trouble creating a navbar and encountering two issues. The search text bar's width is not 100%, it should fill the width to 100% of its column. The Glyphicons are not vertically aligned. For reference, you can check out this JSFiddle link A ...

jqueryhtmlcsstwitter-bootstrap

"Utilizing JavaScript to Disable a MenuItem in ASP .NET: A Step-by-Step

I have successfully designed a customized menu interface using ASP.NET. <asp:Menu ID="Name1" runat="server" OnMenuItemClick="DoSth_MenuItemClick" Visible="true"> <Items> <asp:MenuItem Text="Function description" Value="Val" ToolTip=" ...

c#javascriptasp.netmenuitem

Boost your website's loading time by utilizing the async and defer attributes

Looking to enhance the speed of my webpage, particularly focusing on improving initial page speed. Research suggests that using the async and defer attributes for JavaScript can be beneficial. All JavaScript scripts are currently placed just above the cl ...

javascriptcsshtmlsrc

React component properties fail to update

Hey there! I am currently working on developing a React Component that consists of a simple label which changes its content whenever a SignalR method is triggered. Below is an example of my React component: var PersonalityStatusApp = React.createClass({ ...

reactjs

Controlling opacity with jQuery animate() function using a click event

I have a specific requirement for an animation. When the button is clicked, I need the element to transition from 0 opacity to full 1 opacity within 300 milliseconds. The issue I am facing is that when the button is clicked, the animation does not work a ...

javascriptjqueryhtmlcss

Having trouble implementing a CSS style for a Kendo-checkbox within a Kendo-treeview component

I am facing a The issue I am encountering is that while the CSS for k-treeview is being applied from the scss file, it is not being applied for the kendo-checkbox I attempted to resolve the problem by using the following code: <kendo-treeview ...

cssangularkendo-uikendo-treeview

Refresh content on an HTML page using information retrieved from an external PHP post request

So, I have a problem with communication between my two web pages - mobile.html and video.php. The idea is for mobile.html to send an AJAX post request containing a single variable to video.php. Video.php should then read this variable and pass it to a Java ...

javascriptphphtmlajaxpost

The appearance of an SVG image inside an absolutely positioned div varies between Firefox and Chrome

The web page I am working on can be found at the following link: This webpage consists of text and SVG images, with the hex bolts positioned over specific areas of the text. Achieving this effect requires absolute positioning within a relatively positione ...

htmlcsstextflexboxgraphical-logo

Rails is being overwhelmed by an excessive number of icons being added by Bootstrap

I'm having an issue with adding a user icon to my header. When using Bootstrap, it seems to be adding more icons than I have specified in my code. Can anyone help me figure out what's going on? Thanks in advance! <ul class="nav pull-right"> ...

ruby-on-rails-3csstwitter-bootstraptwitter-bootstrap-rails

What advantages come from caching the document object for improved performance?

Usually, I cache DOM objects used in a script. However, recently I found myself having to reference the document object within a jQuery wrapper. I started questioning whether caching $(document) is necessary since there's only one document object per ...

javascriptjqueryperformancecachingdom-traversal

Passing parameters in a jQuery function through a button click

I am trying to figure out how to pass the @item.Id value as a parameter in the click function for a button. Here is the code snippet: <button id="buttonEdit" style="color:darkgreen" data-toggle="modal" data-target="#Ed ...

javascripthtmljquerycssmodel-view-controller

Tips for waiting for a page to load in Selenium using Java

I am currently seeking a method to delay page execution until all elements have been fully updated. An example scenario would be waiting for a screen value to change after clicking a button, thus ensuring that the new value has been displayed. My objectiv ...

javareactjsselenium

Is there a way to avoid overlapping in CSS3 transforms?

Check out my jsfiddle demo: http://jsfiddle.net/WLJUC/ I have noticed that when you click to rotate the larger container, it overlaps the smaller one. This poses a problem as I am attempting to create a picture gallery where users can rotate and enlarge ...

jquerycssz-indextransform

Using Javascript to replace elements with input fields and text areas

I'm currently working on a unique project for my Wordpress blog, where I am developing a custom block editor using JavaScript on the frontend. The goal is to convert all elements from the post content into a series of inputs and textareas. To begin, ...

javascriptphphtmlwordpress

Modifying ID styling using JavaScript on Internet Explorer

I need to change the CSS display property from none to block using JavaScript, but only for Internet Explorer. My current code is not working for the ID #backfill-image. <script> function checkForIE() { var userAgent = navigator.userAgent; ...

javascripthtmlcssinternet-explorerdisplay

Issue with Mongoose Promise failing to transfer data to the following chain

When querying MongoDB using mongoose with promises, I encounter an issue where the result is only accessible in the initial .then(function(results){ // can send the result from here..}). However, when I manipulate the results and attempt to pass them to th ...

javascriptnode.jsmongoosepromisebluebird

Unable to eliminate the default styling of Material UI table using an external CSS file

Currently, I am incorporating a Material Ui table into my project. My goal is to eliminate the border and adjust the padding of the table. Upon investigation, I came across a default className for material ui table known as MuiTableCell-root-40. Below is t ...

javascripthtmlcssreactjsmaterial-ui

Having trouble loading CSS and JavaScript files in CodeIgniter?

In my project, I am utilizing Bootstrap as a template. However, when attempting to access Bootstrap in Codeigniter, the page fails to load the CSS and JavaScript files. I have included the URL in autoload.php $autoload['helper'] = array('url ...

javascriptphphtmlcsscodeigniter

Checking to see if an object is null using Javascript/AngularJS

Below is the code snippet: function getBestBlock(size){ var bestBlock = {}; var blockEnteredTest = true; for(var i = 0; i < $scope.blocks.length; i++) { if($scope.blocks[i].state == "Free") { i ...

javascriptjqueryangularjsobject