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

Executing a function within a React component's render method

There's a specific code line I'm working with: <td>{device.ID}</td> My goal is to display the device type using the ID number and then call a function based on it. I attempted the following method after finding guidance here: < ...

reactjsjsx

Displaying a disabled div depending on the dropdown selection in Angular Material

My goal is to display filters in a dropdown after they have been selected. Currently, I have static disabled divs and a dropdown where filters can be selected. This is the dropdown: <mat-form-field> <mat-label>{{ 'supplier.showFilters&a ...

angularangularjstypescriptmaterial-uifrontend

Remove the bottom border from the active tab by utilizing the <div> and <a> elements

I am facing an issue with a tabbed menu on my webpage. While the menu is functioning correctly, I am struggling to remove the bottom border from the active tab. You can view all of my test code here. While I have come across solutions using <ul> an ...

javascripthtmlcss

Omit certain table columns when exporting to Excel using JavaScript

I am looking to export my HTML table data into Excel sheets. After conducting a thorough research, I was able to find a solution that works for me. However, I'm facing an issue with the presence of image fields in my table data which I want to exclude ...

javascriptexcelreactjstypescriptreact-table

Ensuring the bootstrap footer remains anchored at the bottom of the page content

I've been struggling for 3 days to get the footer to stay at the bottom of my webpage content. I've searched through many similar questions, but still can't find a solution. Here is my code: .container{position:relative;} footer{position: ...

htmlcsstwitter-bootstrap

When using React, I noticed that the AuthContext does not update when I change the state

After creating a useState ( [logined,setLogined] ) in authContext and sharing it as a value, I noticed that even when I change the logined value in signout, my Navbar does not re-render. This led me to place useEffect in Navbar to check the logined state ...

reactjsreact-context

Retrieve information from an array within a blockchain smart contract

My smart contract factory has the ability to deploy another smart contract. Within the factory contract, there is a specific function: address[] public migrations; ... function getMigrations() public view returns (address[] memory) { return migr ...

node.jsreactjsnext.jssolidity

Having an issue with a cropped CSS box?

I have created a CSS box with a red background color, but for some reason the bottom left corner is being cut off. Can you provide an explanation for this issue? (Refer to the image below) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...

jquerycss

Drupal 6 encountering an inline AJAX error

Is there a way to add custom inline error messages to a form in Node, including CCK and other elements? I have looked at multiple modules, but none of them seem to offer a complete solution as they lack CCK support, upload support, error messages, etc. ...

cssajaxdrupalinline-formset

In what ways does React outperform Angular 1.x?

After reading up on this, it seems like React aggregates all DOM changes before making them. Couldn't Angular employ a similar mechanism? It already knows which DOM nodes need to be altered after the digest cycle -- why not coordinate the updates alto ...

angularjsreactjs

Discovering all words enclosed by '#' in a string using React TypeScript

Trying to figure out how to extract words between '#' in a given string... For example: const str = `<Table striped bordered hover> <thead> <tr> <th>#project name#</th> <th>#First Name#& ...

reactjstypescriptreplacefind

What is the most effective way to handle state management within a React Native project using Expo?

I am currently developing a mobile app using React Native on Expo platform. Managing state is essential when building mobile applications, but I have encountered some limitations with Expo regarding certain modules. As a solution, I attempted to utilize R ...

reactjsreact-nativestateexpo

Enhance and soften images using CSS with smooth responsiveness across all web browsers

When an image is clicked, it should zoom in and become the background of the page with a blurred effect. I attempted to achieve this using the following code... <style type="text/css"> body{ position: absolute; margin-left: 100px; right: 0; z-inde ...

javascriptphpjqueryhtmlcss

An issue with jQuery and LESS causing stylesheets to update only once

Struggling with updating a custom CSS href - everything works perfectly the first time, but subsequent updates do not reflect any changes on the page. Even though I can see the href updating in Chrome debugger and there are no errors being thrown by LESS, ...

jquerycssstylesheetlessasp.net-mvc-4

Guide on exporting Excel data using Angular and TypeScript

My project involves managing a table of information that includes fields for FirstName, LastName, PhoneNumber, Age, and Date. I've created a function that allows me to export the data to an Excel file, but I only want to export specific fields like Fi ...

htmlcssangulartypescript

What are the steps to properly create an ordered list?

.book-summary ol { counter-reset: item ; } .book-summary ol li { margin-left:10px; margin-top:5px; display:block; } .book-summary ol li:before { content: counters(item, ".") " "; counter-increment: item; } <div class="book-summary"> ...

htmlcss

Update the background color on the sidebar

Objective: I want to change the background of the class="col-sm-3 blog-sidebar" to match the color shown in the image below. Essentially, I am looking to update the sidebar background to reflect the picture's color. Challenge: How can this be ach ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

What is preventing the table from extending to the full 100% width?

Displayed above is an image showing an accordion on the left side and content within a table on the right side. I have a concern regarding the width of the content part (right side) as to why the table is not occupying 100% width while the heading at the ...

javascriptjqueryhtmlcssjqgrid

Update an API call to switch from promises to observables, implementing axios

Recently, I have been experimenting with using rxjs for API requests in a React application and this is the approach that I have come up with. What are your thoughts on this method? Are there any best practices that you would recommend following? If you ...

javascriptreactjstypescriptrxjsrxjs6

Error code -4058 ENOENT indicates that the file or directory does not exist. This issue is usually caused when npm is unable to locate a specific file

Trying to start a react project on my D: drive while having node installed on the C: drive resulted in an error: D:\react> npm start npm ERR! code ENOENT npm ERR! syscall open npm ERR! path D:\react/package.json npm ERR! errno -4058 npm ERR! ...

javascriptnode.jsreactjsnpmnpm-start