CODEWITHSUNDEEP
reactjsbuttonmaterial-uigridiconbutton
Vito Palmieri
Vito Palmieri

Reputation: 11

Put Button and IconButton components in the same row

So, I want to display a Button in the same row with an IconButton, they are in a Grid container with the prop align="center" and I think this might be what is causing the problem. I am a total beginner in material-ui, I tried multiple things but they didn't work, I need help!

CSS:

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#main {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

#app {
  width: 100%;
  height: 100%;
}

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

JSX:

<Grid container spacing={1} align="center">
   <Grid item xs={12} direction="row">
      <Button
         variant="contained"
         color="secondary"
         onClick={this.leaveButtonPressed}
      >
      Leave Room
      </Button>
   </Grid>
   <Grid item xs={12}>
      <IconButton color="primary" onClick={() => this.updateShowSettings(true)}>
         <SettingsIcon />
      </IconButton>
   </Grid>
</Grid>

I hope I left the right amount of code, if you need more just ask, thanks already!

Upvotes: 0

Views: 1417

Answers (1)

Rajiv
Rajiv

Reputation: 3772

to place the Button in the same row with an IconButton, reduce the xs value as 12 is the max value and by giving it 12, it'll take the whole width of the parent. So, give it 6 and also the other item to 6.

<Box>
    <Grid container spacing={1} align="center" direction="row">
        <Grid item xs={6} >
            <Button
                variant="contained"
                color="secondary"
                onClick={this.leaveButtonPressed}>
                Leave Room
            </Button>
        </Grid>
        <Grid item xs={6}>
            <IconButton color="primary">
                <Settings />
            </IconButton>
        </Grid>
    </Grid>
</Box>

Here is the working demo:
Edit awesome-bash-h8eoq

Upvotes: 1

Related Questions