<Container maxWidth="lg">
<AppBar position="static" color="inherit">
<Typography variant="h2" align="center">
Memories
</Typography>
<img src={memories} alt="memories" height="60" />
</AppBar>
<Grow in>
<Container>
<Grid
container
justifyContent="space-between"
alignItems="stretch"
spacing={3}
>
<Grid item xs={12} sm={7}>
<Posts />
</Grid>
<Grid item xs={12} sm={7}>
<Form />
</Grid>
</Grid>
</Container>
</Grow>
</Container>
I'm new to mui and following a tutorial.The problem is in tutorial the form
grid item is coming in row and here it is showing me vertically. I don't know what the issue is how can i align it horizontally
Related
I'm trying to have two columns with MUI grid. One column containing two boxes that take up 9/12 and then one column taking up 3/12 with 100% vh.
I've come close but can't get the second column to align to the top of the page.
<Grid container spacing={1}>
<Grid item xs={12} sm={7} lg={9}>
<Card className={classes.welcomeBar}>
<p className={classes.welcomeHeader}> Welcome back SpongeBob! </p>
</Card>
</Grid>
<Grid item xs={12} sm={7} lg={9}>
<Card className={classes.sectionHeight}>
<CardContent>
<p> This is the main content</p>
</CardContent>
</Card>
</Grid>
<Grid container item xs={12} sm={5} lg={3}>
<Card className={classes.tipsHeight}>
<CardContent>
<p> This is the tip bar</p>
</CardContent>
</Card>
</Grid>
</Grid>
I think you just need to adjust the layout a little... effectively you've got two grids, one that gives you the two-column layout, and then another grid inside the left-hand column that provides the rows. (Alternatively, you can use a Stack for the inner content layout of the left-hand column depending on what you want to put in there.)
<Grid container spacing={1} sx={{ width: '100vw', height: '100vh' }}>
<!-- LH column -->
<Grid container xs={12} sm={7} lg={9}>
<!-- LH column content - you can swap for another grid if you need -->
<Stack spacing={1} flex="1 1 0">
<Card>
<p> Welcome back SpongeBob! </p>
</Card>
<Card>
<CardContent>
<p> This is the main content</p>
</CardContent>
</Card>
</Stack>
</Grid>
<!-- RH column -->
<Grid container item xs={12} sm={5} lg={3}>
<Card>
<CardContent>
<p> This is the tip bar</p>
</CardContent>
</Card>
</Grid>
</Grid>
I'm working on a reactjs project and I need to display "books" in a row. I'm using Material UI grid system. I succeeded in showing the books on a big screen. However, The "books" overlapse when the screen gets smaller. I'm trying to make the row horizontally scrollable in the <Paper> component when the screen gets smaller without the overlapse occuring.
Here is my code with dummy data and codesandbox.
<Paper elevation={4} className={classes.root}>
<Grid container spacing={2}>
<Grid item xs={12}>
<Typography variant="h6">
Most Popular Books Of All Times
</Typography>
</Grid>
<Grid item xs={2} md={2}>
<img src="http://placekitten.com/200/250" alt="Test" />
</Grid>
<Grid item xs={2} md={2}>
<img src="http://placekitten.com/200/250" alt="Test" />
</Grid>
<Grid item xs={2} md={2}>
<img src="http://placekitten.com/200/250" alt="Test" />
<Typography >
Test Test Test Test Test Test Test Test Test
</Typography>
</Grid>
<Grid item xs={2} md={2}>
<img src="http://placekitten.com/200/250" alt="Test" />
</Grid>
</Grid>
</Paper>
add width: max-content; in the style of your main Grid tag
I have a vertical stepper I'm using in Material UI to render a pricing calculator. The animation is no longer working. Previously, the stepper would animate a collapse effect when the steps changed.
I suspect it may be due to the nesting of multiple transitions, but I'm not entirely sure.
Relevant render method for the calculator is below. Thanks!
return (
<Grid container>
<Grid item xs={12} sm={12} md={8} className="nocPricingCalculatorContainer">
<Collapse in={activeStep < 2}>
<Stepper elevation={0} activeStep={activeStep} className="nocPricingCalculatorStepper" connector={<StepConnector classes={{ line: classes.stepConnector }} />} orientation="vertical">
{steps.map((stepObj, index) => {
return (
<Step key={uuidv4()}>
<StepLabel classes={{ label: classes.stepLabel }} StepIconProps={{
classes: { text: classes.stepLabelText }
}}>{stepObj.label}</StepLabel>
<StepContent className={classes.stepContentBorder}>
<div className={classes.actionsContainer}>
<Grid container item xs={12}>
{getStepContent(index)}
</Grid>
<div>
{
(activeStep !== 0) ?
<Button
className="nocButtonClear"
onClick={handleBack}>
Back
</Button> :
<div></div>
}
<Button
variant="contained"
onClick={handleNext}
className="nocButtonYellow"
disableRipple
>
{activeStep === steps.length - 1 ? 'Finish' : 'Next'}
</Button>
</div>
</div>
</StepContent>
</Step>
)
})}
</Stepper>
</Collapse>
<Collapse in={activeStep >= 2}>
{activeStep === steps.length && (
<Grid item container className="nocPricingCalculatorFinalStep" alignItems="center" justify="center">
<Grid item container xs={12} justify="center" className="nocPricingCalculatorResetArea">
<Grid item>
<Button className="nocButtonClear nocPricingCalculatorResetButton" disableRipple onClick={handleReset}>
<RefreshIcon className="nocResetIcon" />Reset calculator
</Button>
</Grid>
</Grid>
<Grid item container xs={12} justify="center" className="nocPricingCalculatorPriceArea">
<Grid item container alignItems="center" justify="center" xs={12} className="nocPriceColumnLabel">
<CheckCircle className="nocPriceAreaCheckIcon" />
<Typography className="nocPricingCalculatorPricingHeader">
{pricingSectionTitle}
</Typography>
</Grid>
<Grid item container className="nocPricingCalculatorPriceColumn left" alignItems="center" justify="center" xs={12} sm={12} md={6}>
<Grid item xs={12}>
<Typography className="nocPricingCalculatorPricingRepairType">
{pricingColumnLeft.title}
</Typography>
<Typography className="nocPricingCalculatorPricingPrice">
{pricingColumnLeft.price}
</Typography>
</Grid>
<Grid item>
<List dense={true}>
{generateRenderableList(pricingColumnLeft.details)}
</List>
</Grid>
</Grid>
<Grid item container className="nocPricingCalculatorPriceColumn right" alignItems="center" justify="center" xs={12} sm={12} md={6}>
<Grid item xs={12}>
<Typography className="nocPricingCalculatorPricingRepairType">
{pricingColumnRight.title}
</Typography>
<Typography className="nocPricingCalculatorPricingPrice">
{pricingColumnRight.price}
</Typography>
</Grid>
<Grid item>
<List dense={true}>
{generateRenderableList(pricingColumnRight.details)}
</List>
</Grid>
</Grid>
</Grid>
</Grid>
)}
</Collapse>
</Grid>
</Grid>
);
}
Never mind. I accidentally put a random UUID key on the Step and that caused the stepper to jump to the next step without animating.
#reactprobs
I am interested in best way to present a React Material-UI with icon and text, so it is all vertically aligned. Right now it does not work as expected, especially with conditional rendering.
<Typography gutterBottom variant="subtitle2" component="h2" align="center">
<Grid container direction="row" alignItems="center" wrap="nowrap">
{p.numRooms > 0 && (
<Grid item xs={2} alignItems="center">
<HotelRoundedIcon color="secondary" />
{p.numRooms}
</Grid>
)}
{p.area > 0 && (
<Grid item xs={2}>
<AspectRatioRounded color="secondary" />
{p.area}
</Grid>
)}
</Grid>
</Typography>
You can add container in your secondary Grids to make icons and text vertically aligned.
<Typography gutterBottom variant="subtitle2" component="h2" align="center">
<Grid container direction="row" alignItems="center" wrap="nowrap">
{p.numRooms > 0 && (
<Grid item xs={2} container >
<HotelRoundedIcon color="secondary" />
{p.numRooms}
</Grid>
)}
{p.area > 0 && (
<Grid item xs={2} container>
<AspectRatioRounded color="secondary" />
{p.area}
</Grid>
)}
</Grid>
</Typography>
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>
#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>
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>
<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!
Just use the property align="right"
as shown here https://mui.com/api/typography/
Fresh variant:
<Grid
container
direction="row"
justifyContent="space-between"
alignItems="center"
>
<Grid item>Back</Grid>
<Grid item>Next</Grid>
</Grid>