Display flex causing Mui LinearProgress Bar to disappear

Looking for a way to create a unique bullet graph using material UI? How about two MuiLinearProgress bars placed side by side with a vertical Divider in between them. Struggling to get them displayed next to each other?

<div className={classes.bulletGraph}>
  <div>
   <LinearProgress
    className={classes.firstBar}
    value={80}
    variant="determinate"
    title="test"
   />
  </div>
  <div>
   <LinearProgress
    className={classes.secondBar}
    value={0}
    variant="determinate"
   />
  </div>
</div>

Experimented with display flex and inline block on the parent, but ended up with disappearing elements. Any suggestions or alternatives to achieve this layout?

cssreactjsflexboxmaterial-uiprogress-bar

Answer №2

To implement the LinearProgress component using Flexbox, you can follow these steps:

<div style={{ display: "flex", flexDirection: "row" }}>
 <LinearProgress
  value={80}
  variant="determinate"
  title="test"
  style={{ width: "100%", marginRight: "4px" }}
 />
 <LinearProgress
  color="secondary"
  value={0}
  variant="determinate"
  style={{ width: "100%" }}
 />
</div>

By setting the width to 100%, you can prevent the issue of the component disappearing when used with Flexbox. Typically, these styles would be placed in a CSS file, but for simplicity, they are included in a style property here.

You can view this implementation in action here:

https://codesandbox.io/s/mui-linearprogress-bar-stops-displaying-on-display-flex-f5eqi0?fontsize=14&hidenavigation=1&theme=dark

Answer №3

Simply apply the flex-grow property to every LinearProgress element when the container is using display: flex:

.progressbar {flex-grow: 1;}

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

Tips to prevent elements from overlapping in Angular applications

I am facing an issue with my Angular-based app where I dynamically populate the page with table rows. There is an app-console element below the page that has a fixed position. Whenever I click the button to add a new row, it overlaps with the app-console. ...

javascripthtmlcssangular

Understanding React and TypeScript Higher Order Components: How to Resolve the Type '{}' is not assignable to Type P Error

While following along with the Learning React with TypeScript book, I encountered a problem where I hit a wall while coding. Despite surrendering and copying code directly from the book, the compiler is still unhappy As a temporary solution, I have resort ...

reactjstypescripttypesreact-propshigher-order-components

What is the best approach to dynamically update CSS using onChange in TypeScript?

I am facing an issue with 2 input fields on my website. I want to create a functionality where if a user enters data into one field, the CSS of the other field changes dynamically. For instance, I would like to change the class "changeAmount" to "display:n ...

reactjstypescript

Error encountered: Unexpected character 'u' found at the start of JSON parsing. Position 0

Looking for guidance on writing jest test cases for a submit function that involves JSON.parse. The code and test case are provided below. handleFormSubmit = (e) => { e.preventDefault(); let requestData = JSON.parse ...

javascriptreactjsjestjs

jQuery Mobile - Implementing Persistent Toolbars along with a custom back button functionality

UPDATE Here is a fiddle of the problem: https://jsfiddle.net/9k449qs2/ - attempt to select the header using your picker, but every time you click it will select the whole page instead. I am currently working on a project that includes a persistent header ...

htmlcsscordovajquery-mobilesingle-page-application

"Optimize Magellan Sidebar for Mobile Devices by Relocating it to the Bottom of the Page

After spending a week working with Foundation 5 framework, I'm curious if there is a straightforward way to make my magellan sidebar shift to the bottom of the page when viewed on mobile or tablets. <div data-magellan-expedition="fixed"> <di ...

javascriptjqueryhtmlcsszurb-foundation

Ways to perfectly align three images side by side using CSS

I am trying to align 3 pictures horizontally, but they keep ending up on separate lines. Here is the code I have been using: HTML <section class="features"> <figure> <img src="....jpg" alt="..."> ...

htmlcssimageflexboxinline

Cannot read property 'focusVisible' of null error is occurring on the radio

Having a complex setup involving Gatsby 1.9, react-next, React 16.5.2, and Material UI 3.2.2. Encountering issues with Radio and RadioGroup components consistently causing a strange error to pop up (refer to the image below). Unfortunately, unable to upg ...

reactjsmaterial-uigatsby

Mobile device causing issues with Bootstrap navbar toggler functionality

I am having an issue with my Bootstrap 5 navbar. It is not functioning properly on mobile devices. When I click the toggle button, nothing happens. <nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="contai ...

htmlcssbootstrap-5

Strange rendering issues when using the react material-ui dialog

Exploring the Project Recently, I developed a front-end project focusing on a delivery service using React and Material UI. One interesting feature I added was a Dialog window that pops up when users click on an item, allowing them to customize it. Here i ...

javascriptreactjsmaterial-uireact-hooksrendering

The Material-ui Drawer does not function properly when used with an external CSS file

For my project, I'm working on a Sidebar design that is inspired by the Mini Variant drawer demo available at this link. However, the project requirements mandate that all CSS styling should be done in a separate CSS file rather than directly within t ...

javascriptcssreactjsmaterial-ui

Element that moves in conjunction with scroll (without using position:fixed)

A while back, I stumbled upon something that I can't seem to find now. I'm looking for a shopping cart similar to the one on the Apple store - a div element that isn't positioned absolutely or fixed. Ideally, it would be located in the cente ...

jquerycss

generating declaration files for components with accurate type definitions from propTypes

I am in the process of creating a react/js library using rollup. My approach involves utilizing typescript to generate declaration files for my components. Despite having propTypes defined for my components, I have noticed that the emitted .d.ts files as ...

reactjstypescriptrollupjsreact-proptypes

The React server is unable to retrieve req.body.value from the /get function, although it is successfully retrieved in the post function

I'm currently developing a movie review application using React. My express server is connected to a local MySQL database. Everything seems to be working fine, except for the fact that in the app.get(/get) function, the req.body.value returns as "unde ...

mysqlnode.jsreactjsexpressserver

What are the strategies for distinguishing between languages in React Native prior to mounting the component?

I had high hopes for this solution, but unfortunately it doesn't work as expected. The issue is that this.text.pupil is undefined. Could the problem possibly be related to componentWillMount? If so, how can I handle multiple languages outside of ...

javascriptreactjsreact-native

Encountering difficulties in npm installation of redux and datepicker

Attempted to use the npm command below to install redux, react-datepicker, and react-router-dom. npm i react-redux @reduxjs/toolkit react-datepicker react-router-dom@6 Realized that package.json was not being updated and received the following message in ...

reactjsnode.jsnpmnpm-install

What is the best way to position a div at the bottom of the main div?

How can I position a div with the class "boxLinks" at the bottom of the main box with the class "main-box"? Here's my idea: The main class has a width of 1200px; within this main class, there are 5 divs with each div having a width of 25%. .main- ...

htmlcss

The z-index property fails to function properly when used with a relative parent and after/before pseudo-elements

Here is the code snippet (prototype) that I am working with: .headerz { position: relative; padding: 5rem 0 0 5rem; margin: 3rem 0 0 0; color: #000; font-size: 3.8rem; text-transform: uppercase; z-index: 24; } .headerz::before { content ...

htmlcssz-indexpseudo-element

Creating an AngularJS directive specifically for a certain <div> tag

Recently, I began learning angularjs and came across a script to change the font size. However, this script ended up changing all <p> tags on the entire webpage. Is there a way to modify the font size of <p> tags only within the <div class=" ...

javascripthtmlcssangularjs

I am currently working with AlertDialog.adaptive, and I am facing an issue where I am unable to customize the background color of the dialog when it is displayed on

When working with AlertDialog.adaptive, I noticed a discrepancy between Android and IOS regarding the background color. In Android, specifying the color using backgroundColor works as expected, but on IOS it doesn't reflect the specified color. How ca ...

iosflutterdartmaterial-uiflutter-cupertino