Simple Guide to Inserting Items in a Column with Flexbox and Material UI

I've been struggling to position these items on the modal and could use some advice. I'm aiming to include the item counter as text and stars below it, with the unassigned text at the bottom. Despite trying various layouts, I can't seem to get it right. Here's my current code:

 const styles = theme => ({
  root: {
    flexGrow: 1,
    overflow: 'hidden',
    padding: theme.spacing(0, 3),
  },
  paper: {
    maxWidth: 800,
    margin: `${theme.spacing(2)}px auto`,
    padding: theme.spacing(2),
  },
  textField: {
    marginLeft: theme.spacing(1),
    marginRight: theme.spacing(1),
    width: 200,
  },
    playButton: {
      display: "flex",
      flexDirection: "column",
      justifyContent: "center",
      alignItems: "center",
      "& .rating": {
        flex: 1
    },
  }
});

function Tasks(props) {
  const { classes } = props;
  return (
    <div className={classes.root}>
      <Paper className={classes.paper}>
        <Grid container spacing={2}>
          <Grid item xs={12} sm container>
            <Grid item xs container direction="column" spacing={2}>
              <Grid item xs>
              <div className="name-label">
              Name
              </div>
              <Typography variant="h6">
              Order coffee beans
              </Typography>
              <div className="form-divider"></div>
                <Typography variant="body2" color="textSecondary">
                  Process Description
                </Typography>
              </Grid>
            </Grid>
            <Grid item classes={{ root: props.classes.playButton}}>
      <Grid item xs={3} className="playButton">
        <i class="far fa-play-circle fa-2x"></i>
      </Grid>
      <div className="workers-assigned-label">
      Workers Assigned
    </div>
    <div>
      count / total
    </div>
    <div className="rating">
      Stars go here
    </div>
    <div>
      unassigned
    </div>
    </Grid>
          </Grid>
        </Grid>
      </Paper>
    </div>
  );
}

export default withStyles(styles)(Tasks);

To provide clarity on what I'm attempting to achieve, I have attached a screenshot of the design.

Image: view screenshot here

Answer №1

If you're looking to make something stretch and take up extra space, consider using flex: 1 in your CSS.

const styles = theme => ({
  playButton: {
    display: "flex",
    flexDirection: "column",
    justifyContent: "center",
    alignItems: "center",
    position: "relative",
    "& .playButton": {
      position: "absolute",
      top: "80%",
      left: "-55px",
      transform: "translateY(-50%)",
    },
    "& .rating": {
      flex: 1
    }
  }
});

const YourComponent = props => (
  {...}
  <Grid item classes={{ root: props.classes.playButton}}>
    <Grid item xs={3} className="playButton">
      <i class="far fa-play-circle fa-2x"></i>
    </Grid>
    <div className="workers-assigned-label">
      Workers Assigned
    </div>
    <div>
      count / total
    </div>
    <div className="rating">
      stars go here
    </div>
    <div>
      unassigned
    </div>
  </Grid>
  {...}
);

For more information on utilizing flexbox, I recommend exploring this helpful resource.

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

Looking to implement pagination on a table using Material UI within a React project?

I'm in the process of designing a table to display data. I would like to incorporate pagination similar to the one shown in the image provided, with numbers on the left-hand side and "Results per page" on the right-hand side in the footer. ...

switch the visibility of the p tag based on its content

It seems like solving this shouldn't be too challenging, but I'm still learning when it comes to Javascript or JQuery. HTML: <p><span id="AddLine1Summary"></span>,</p> <p><span id="AddLine2Summary"></span& ...

Dynamic header showing various sections of the image depending on screen size

Looking to create a responsive header image for my website using the 'mobile first' approach. I have a specific picture in mind that I want to display differently depending on the device's screen size, all while using the same image file. Fo ...

Trouble encountered in adjusting the alignment of labels

I'm struggling with aligning my links properly. https://i.sstatic.net/W5G4Z.png I want Yesterday This week This month to line up perfectly with the DateTime From and Last 2 days Last 7 days Last 30 days labels for DateTime To. This is how it appear ...

Can a YouTube video be triggered to play when a specific CSS style is selected?

I am searching for a method to display and play different YouTube videos based on a selected CSS style from a drop-down menu. I believe JavaScript can be utilized to detect the chosen CSS. Include the following in the html header of the page. <script ...

Avoid choosing the menuItem when clicking on the icon within the Material UI select component

I am trying to create a dropdown menu that allows users to delete items. However, when I click on the delete icon within a menu item, the entire menu item gets selected automatically. How can I prevent this default behavior? Here is my code: { dropd ...

Position the button at the bottom of the page with MUI v5 in a React application

How can I ensure the button is always positioned at the center bottom of the page, regardless of the content height? This is a snippet from my code: const useStyles = makeStyles({ button: { bottom: 0, right: 0, position: "absolute" ...

Trouble with Click event not working in Electron and mouse cursor not changing when hovering over an HTML button?

I'm in the midst of a project that involves using the electron framework. Within my project, I have an HTML file, a CSS file, and a Javascript file. The issue at hand is that when I hover over a button, the expected hand pointer icon fails to appear d ...

Creating a unique scroll icon for your Material-UI scrolling Tabs

Currently, I am utilizing the Scrollable tabs feature from Material-UI. How can I go about changing the icon of the scroll arrows in SVG format? I came across the TabScrollButton component that is available for use. Would I need to create separate ones fo ...

Troubleshooting problem with Material-UI and Next.JS in Webpack

I have encountered an error while trying to add the code from this file: https://github.com/mui-org/material-ui/blob/master/examples/nextjs-with-styled-components-typescript/next.config.js When I include the next.config.js code provided below, I receive ...

The temporary drawer is causing issues with the functionality of the Material-UI datagrid filter

When utilizing the datagrid component within a 'temporary' drawer (using the drawer's variant prop set to temporary), I've encountered an issue where the filter functionality is not working. Switching the drawer variant to 'permane ...

Positioning of background images

My goal is to display a full background image on a website, ensuring that the bottom of the image aligns with the bottom of the browser window without any cropping. I want the image to be positioned at the bottom left corner, cutting off anything above o ...

Include previous input as a "phantom" thumbnail to the slider element of type "range"

https://i.stack.imgur.com/JnuCN.png Using a tutorial from w3schools, I have customized a regular range slider. The objective is to send a new value command to an external MQTT-based home automation system and display the previous value as a ghost-thumb in ...

Stacking two divs for the team section layout

Although I'm new to this, I've been struggling to achieve a specific layout for a team page. My goal is to display a picture on the left side and text on the right for each team member. The design includes the person's name, title, and a set ...

Dynamic banner image

I currently have a jumbotron image in the background, but it isn't as responsive and I'm struggling to get the whole image to display properly. Here is what it looks like currently: https://i.sstatic.net/IpuDi.png Here is the full image for ref ...

Revealing a detailed image upon hovering

<body> <div id="content" > <img id="Image1" src = "img.png" /> </div> </body> I am looking to implement a functionality where a close image appears on the top right corner when hovering over another image, specifically I ...

Rows within distance

There seems to be too much space between the grid rows. I tried adding more photos or adjusting the height of the .image class to 100%, but then the image gets stretched out. The gap between items with classes .description and #gallery is too wide. When ...

Elegant bespoke input box

I am looking to create a customized input text feature similar to StackOverflow's tag editor, but with some minor differences. The goal is for the input field to function like a regular text input until a word is enclosed in curly brackets. Once enclo ...

Using the built-in API to populate default values in MUI Text field

I created a form using material UI and I want the default values to come from an API. The goal is to have an Edit screen where users can update details and save them. However, I am struggling to make it work. To fetch the data, I use axios.get request: ...

Issue with CSS/JS resolved: figured out a way to create a page/menu that overlaps with their individual scrollbars

I am encountering an issue with a scrollbar that is related to a fullscreen menu appearing on a page and causing the page scrollbar to reset due to a display: none property. The images below provide a visual representation of the problem: Below is the Ty ...