How to position the play button in the center using Material UI and Flexbox

Seeking advice on achieving a centered play button with borders in this layout. Struggling with flexbox to position the play button within the code provided.

    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" gutterBottom>
              Order cofee beans
              </Typography>
              <div className="form-divider"></div>
                <Typography variant="body2" color="textSecondary">
                  Process of Description
                </Typography>
              </Grid>
            </Grid>
            <Grid item>
              <Typography variant="subtitle">Workers Assigned</Typography>
              <Grid item xs={3}>
        <i class="far fa-play-circle"></i>
      </Grid>
              <Typography variant="h6" gutterBottom>
              0/25</Typography>
            </Grid>
          </Grid>
        </Grid>
      </Paper>
    </div>
  );
}

Currently unsure if the issue lies with the Grid structure or if a different approach is needed. Any feedback on achieving the intended layout (linked below) would be appreciated:

Image

Answer №1

Instead of using flex to position the button in that way, consider the following approach:

const styles = theme => ({
  box1: {
    display: "flex",
    position: "relative",
    "& .playButton": {
      position: "absolute",
      top: "50%",
      transform: "translateY(-50%)"
    }
  }
});

const YourComponent = props => (
  <div>
    {...}
    <Grid item classes={{ root: props.classes.box1}}>
      <Typography variant="subtitle">Workers Assigned</Typography>
      <Grid item xs={3} className="playButton">
        <i class="far fa-play-circle"></i>
      </Grid>
      <Typography variant="h6" gutterBottom>0/25</Typography>
    </Grid>
    {...}
  </div>
);

YourComponent = withStyles(styles)(YourComponent);

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 on maintaining the Parent menu in a hovered state when the mouse is over the child menu within a Dropdown Menu

I have been working on creating a dropdown menu that functions correctly. However, I am facing an issue where the top menu, when hovered, turns white, but as soon as I move down to the submenus, the top menu reverts back to its original color. Is there a ...

What is the best way to add a specific class to another class in my CSS code?

Is it possible to apply a CSS class defined in css1.css to another HTML class defined in css2.css? In css1.css: div.classPredefined { border: solid 1px #000; } In css2.css: div.newClass { background: #CCC; /*apply-class: classPredefined;*/ } Although ...

Unfold an HTML element and reveal a sneak peek of its content with the aid of JQuery

I need a way to organize and display a set of 5 lines of text vertically. Specifically, I want them arranged like this: 1) Line one 2) Line two 3) Line three 4) Line four 5) Line five However, I have a special requirement where only the first ...

What is the solution to incorporating a scrollbar in a popup when I increase the zoom level?

When trying to add a scrollbar to the popup, I am facing an issue where the scrollbar does not appear when zoomed in to 75% or 100%. It works fine for fit screen but not on zoom. Can anyone help me identify what is wrong with my code and suggest how to han ...

What is the best way to separate two <a> tags using only Bootstrap?

Currently, I am utilizing a PHP for loop to display 10 tags on an HTML page. My challenge lies in wanting the <a> tags to be displayed on separate lines with some spacing. It's common practice to handle this through custom CSS, however, is ther ...

The process of setting up a carousel for tables using jQuery

I can successfully implement jquery for an image carousel, but now I need to find a way to create a sliding table format. Any assistance on this matter would be greatly appreciated. Here is the code I currently have: <ul> <li><a style= ...

What is the best way to insert images into a div in Ionic framework?

I am facing an issue with fitting an image inside a div container. Here is my code structure: <div style="background-color: red; height: 200px; width: 200px;"> <ion-img src="{{kategori[i].img}}"></ion-img> & ...

Enhancing Material-ui Select with custom components

I'm currently attempting to insert a <Button /> within the Material-ui <Select /> component, with the specific requirement of closing the drop-down dialog when the button is clicked. However, I am facing an issue where the button is behavi ...

Tips on customizing the selected icon color in Material-UI's BottomNavigationAction styling

I'm facing an issue with Material-UI styled components and could use some assistance. My goal is to create a BottomNavigation bar in React using Material-UI v5 where the selected option's icon displays in red (#f00) while the unselected icons sho ...

Scroll bars on JQuery UI dialog

When using the jquery UI Dialog modal, everything appears correctly in Firefox and Chrome. However, in IE8, scroll bars suddenly appear. Is there a way to remove them? ...

``Do not forget to close the modal window by clicking outside of it or

I am looking for a way to close the modal window either when a user clicks outside of it or presses the escape key on the keyboard. Despite searching through numerous posts on SO regarding this issue, I have been unable to find a solution that works with ...

Issue with Typescript typing for the onChange event

I defined my state as shown below: const [updatedStep, updateStepObj] = useState( panel === 'add' ? new Step() : { ...selectedStep } ); Additionally, I have elements like: <TextField ...

The animation of the background color over an image appears glitchy when viewed on Safari

I've been attempting to create an animation that changes the background color over an image. Everything seems to be working fine on all browsers and operating systems except for Safari on macOS. I've searched extensively on SO and Google but have ...

"Enhance your website with a sleek Bootstrap navigation system featuring dividers and

Need help with creating a Bootstrap nav menu similar to this design made in Photoshop? Wondering about the best way to position the logo and create dividers between menu items like shown in this image. Here's the HTML code currently being used: & ...

The addition of one-page navigation in Angular 7 seems to be experiencing some glitches

I recently added a new menu option to my Angular 7 project, but it's not functioning correctly. I used Bootstrap 4 and followed this example from here. Can anyone help me figure out the correct way to implement this? Check out the sample on StackBlit ...

Issue with Tailwind CSS: The 'overflow-y' property does not scroll all the way to the bottom when using 'top-[63px]'

I'm facing an issue with my Tailwind CSS code that is hindering me from scrolling to the bottom of an aside element. <body> <div> <nav class=" bg-white px-2 py-2.5 dark:bg-gray-800 sm:px-4 fixed w-full z-20 border-b borde ...

Adjust the size of the sliding tool with images of varying dimensions

My mobile-first slider features three different types of images: tall, horizontally long, and square. I want the size of the slider to be determined by the horizontally long image and then scale and center the other images to fit its size. To achieve this, ...

How to keep the Bootstrap column in place while making it fixed

I'm struggling to make the second column (yellow part) stay fixed in position. I've tried using CSS position:fixed, but the column keeps shifting to the left. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/cs ...

React Sticky sidebar implementation throughout the various components

My goal is to implement a sticky sidebar that moves smoothly across specific components on my webpage. The challenge I am facing is that the CSS 'sticky' property only allows movement within the component it was created in. So, my question is - w ...

Is there a way to modify the height and width of a div layer?

How can I adjust the height and width of the layer on the card? Also, I want only the close button to be clickable and everything else to be unclickable. Can anyone help me find a solution? <link rel="stylesheet" href="https://stackpath.bootstrapcdn. ...