What's the right way to float right or left using the material-ui appbar with material-ui-next?

Question

I can't figure out if I'm using the right approach to get the login/logout buttons to float right in while using material-ui-next ("material-ui": "^1.0.0-beta.22",)

It seems they removed iconElementRight= from the api. Do we have to use the <Grid> now in the appbar? It feels kinds of cludgy. What's the right way to float buttons (e.g. login) in the appbar?

<AppBar position="static">
      <Toolbar>
        <Grid container spacing={24}>
          <Grid item xs={11}>
            <Typography type="title" color="inherit">
              Title
            </Typography>
          </Grid>

          <Grid item xs={1}>
            <div>
              <HeartIcon />
              <Button raised color="accent">
                Login
              </Button>
            </div>
          </Grid>
        </Grid>
      </Toolbar>
    </AppBar>

Idan Dagan · Accepted Answer · 2018-08-12T13:05:38.430

89

@Kyle You had it right :)

just add to the grid container:

justify="space-between"

With your example:

<AppBar position="static">
  <Toolbar>
    <Grid
      justify="space-between" // Add it here :)
      container 
      spacing={24}
    >
      <Grid item>
        <Typography type="title" color="inherit">
          Title
        </Typography>
      </Grid>

      <Grid item>
        <div>
          <HeartIcon />
          <Button raised color="accent">
            Login
          </Button>
        </div>
      </Grid>
    </Grid>
  </Toolbar>
</AppBar>

edited Aug 12 '18 at 13:05

answered Aug 12 '18 at 11:31

Idan Dagan

10,273
5
34
41

justify="space-between" // Add it here :) container spacing={24} these three line helped me, thanks. – Rajkumar M Jun 07 '21 at 10:42

score 66 · Answer 2 · answered Dec 07 '17 at 05:41

66

You need to add flex: 1 to your <Typography /> component so it pushes the <div /> to the rightmost part of the AppBar:

<AppBar position="static">
  <Toolbar>
    <Typography type="title" color="inherit" style={{ flex: 1 }}>
      Title
    </Typography>
    <div>
      <HeartIcon />
      <Button raised color="accent">
        Login
      </Button>
    </div>
  </Toolbar>
</AppBar>

answered Dec 07 '17 at 05:41

Jaye Renzo Montejo

1,812
2
12
25

2

this sent me down a flexbox rabbit hole. I still don't quite get how this works but I should be able to figure it out – Kyle Pennell Dec 10 '17 at 21:43
9

I figured out this solution. "Flex: 1" means "flex-grow: 1" which means that the Typography element should receive all the used space, That pushes the icons, etc to the right. – Iteria Jul 08 '18 at 21:39
1

I'd also add that if one wants to **right-align a `` component**, in addition to giving it the `flexGrow: 1` style one should also add `align: "right"` to its props as seen in [the API](https://material-ui.com/api/typography/). [The App Bar demo](https://material-ui.com/demos/app-bar/) currently only demos right-aligned icons, not text. – Felipe Maia Aug 14 '18 at 21:19
1

Do not forget to add `display:'flex'` in the container – YouneL Sep 25 '18 at 15:25
Yes, although `` is `flex` itself already, `` too – Valen Nov 01 '19 at 16:27
This should be the correct solution, it's by far them most simple. – Zargoon Jul 12 '21 at 22:07
simple .yet powerful – d-feverx Apr 07 '22 at 16:06

score 3 · Answer 3 · answered Oct 10 '22 at 09:53

<Toolbar>
  <Box sx={{ flexGrow: 1 }}>
    <Button variant='text' color='inherit'>Button1</Button>
    <Button variant='text' color='inherit'>Button2</Button>
    <Button variant='text' color='inherit'>Button3</Button>
  </Box>
  <Button variant='text' color='inherit'>Button4</Button>
</Toolbar>

Now Button4 will be positioned in the far right!

score 1 · Answer 4 · answered Dec 17 '21 at 11:30

1

Just use the property align="right" as shown here https://mui.com/api/typography/

answered Dec 17 '21 at 11:30

Mosta

868
10
23

1

Going by the docs you linked, using the `align` property will *"Set the text-align on the component."*. I think this would set the buttons text alignment within the button, which is not what OP was asking for. – devklick Feb 26 '22 at 22:45

score 0 · Answer 5 · answered Aug 24 '22 at 14:20

0

Fresh variant:

<Grid
  container
  direction="row"
  justifyContent="space-between"
  alignItems="center"
>
    <Grid item>Back</Grid>
    <Grid item>Next</Grid>
</Grid>

answered Aug 24 '22 at 14:20

Serhii Zelenchuk

175
2
7

What's the right way to float right or left using the material-ui appbar with material-ui-next?

5 Answers5

Linked