Menu
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> 
649
Float Right or Left in MUI with Justify Content With display=”flex” applied to the MUI Box component, we can use justifyContent=”space-between” to move a Button to the far left and to the far right. Recall the screenshot in the intro that showed an example of this.
Just use position="sticky" instead of position="fixed" for your AppBar. Thanks! Works perfectly.
To align a component to the center or right with React Material UI, we can add a flex container with the Grid component. We add the Grid component and add the container prop to make it a flexbox container. Then we set the justify prop to flex-end to align the child components on the right side.
Material-UI Grid Align Right If you need to horizontally align using only CSS, remember that justify-content horizontally aligns using the following values: flex-start: horizontally aligns left. center: horizontally aligns center. flex-end: horizontally aligns right.
@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> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
