CODEWITHSUNDEEP
htmlmaterial-ui
János
János

Reputation: 35050

How to position Material-UI component horizontally

I have MenuList and a Grid. Unfortunately they are positioned vertically, top-down, but I need them left-right. Why is div as nesting element used for Grid in rendered HTML? How can I use the two components not a block but like floating HTML elements?

All I did I read carefully Grid documentation, but I did not found any useful info: https://material-ui.com/components/grid/

class MainPage extends React.Component {
  render() {
    return (
      <div>
      <ThemeProvider theme={theme}>
      <MenuList>
        <MenuItem>Profile</MenuItem>
        <MenuItem>My account</MenuItem>
        <MenuItem>Logout</MenuItem>
      </MenuList>
      </ThemeProvider>
      <Grid container spacing={1} direction="column" alignItems="center" justify="center" style={{ minHeight: '100vh' }}>
        <Grid item>
          <ButtonGroup size="small" aria-label="small outlined button group">
            <Button>Buy</Button>
            <Button>Sell</Button>
          </ButtonGroup>
        </Grid>
      </Grid>
      </div>
    )
  }
}

enter image description here

I tried add display="inline" to Grid, but it has no effect.

Upvotes: 1

Views: 3617

Answers (1)

Ido
Ido

Reputation: 5748

add display: flex to the parent div:

  <div style={{ display: 'flex' }}>

also, delete the minHeight: 100vh from Grid style:

  <Grid container spacing={1} direction="column" alignItems="center" justify="center">

Your component should look like that:

class MainPage extends React.Component {
  render() {
    return (
      <div style={{ display: 'flex', flexDirection: 'row' }}> // flex direction: row is not a must because row is the default
      <ThemeProvider theme={theme}>
      <MenuList>
        <MenuItem>Profile</MenuItem>
        <MenuItem>My account</MenuItem>
        <MenuItem>Logout</MenuItem>
      </MenuList>
      </ThemeProvider>
      <Grid container spacing={1} direction="column" alignItems="center" justify="center">
        <Grid item>
          <ButtonGroup size="small" aria-label="small outlined button group">
            <Button>Buy</Button>
            <Button>Sell</Button>
          </ButtonGroup>
        </Grid>
      </Grid>
      </div>
    )
  }
}

Upvotes: 1

Related Questions