Title says it all - my divider is not lying in the middle of my text. My current result looks like this:
But I want my divider to be in the middle likeso (see red line)
What's weird is that the material ui documentation demonstrates that this is a default behavior but for some reason it is not the case for me.
My code is as follows:
<Divider textAlign="center" variant="inset"><Typography variant="h3">About</Typography></Divider>
Wrapping your Divider component in a div or a Box should do the trick:
<div>
<Divider>About</Divider>
</div>
I was having this issue and what i did to solve it is to give the typography a display flex, align and justifyContent to the center and also setting the width and the height to 100%
<Divider
textAlign="center"
sx={{
border: "1px solid #E6E6E"
}}
>
<Typography
variant="h3"
sx={{
display: "flex",
justifyContent: "center",
width: "100%",
height: "100%",
alignItems: "center",
}}
>
About
</Typography>
</Divider>
Related
Currently I have a code directly copying from mui v5 Card example, and I realized that the size of my flexbox is different from the mui example.
The mui example look like below. The image is pushed to the right side.
for me, the image remained in the middle. So I have applied a border to visualize the flexbox size, and I realized that the flexbox of my CardMedia does not follow his parent Card component. It look like this:
This is the code:
<Card sx={{ display: 'flex', border: 4 }}>
<Box sx={{ display: 'flex', flexDirection: 'column' }}>
<CardContent sx={{ flex: '1 0 auto' }}>
<Typography component="div" variant="h5">
Live From Space
</Typography>
<Typography variant="subtitle1" color="text.secondary" component="div">
Mac Miller
</Typography>
</CardContent>
<Box sx={{ display: 'flex', alignItems: 'center', pl: 1, pb: 1 }}>
<IconButton aria-label="previous">
{theme.direction === 'rtl' ? <SkipNextIcon /> : <SkipPreviousIcon />}
</IconButton>
<IconButton aria-label="play/pause">
<PlayArrowIcon sx={{ height: 38, width: 38 }} />
</IconButton>
<IconButton aria-label="next">
{theme.direction === 'rtl' ? <SkipPreviousIcon /> : <SkipNextIcon />}
</IconButton>
</Box>
</Box>
<CardMedia component="img" image={ablum} sx={{ width: 151, border: 4 }} alt="Live from space album cover" />
</Card>
Actually, I faced this problem a lot that I cannot control the flexbox size. Has anyone got an idea how I can push the photo to far right using something like justifyContent: 'flex-end'? But before that, I believes I need to fix the flexbox size first. Feel free to leave a comment if you got an idea. Thanks.
I have this code:
<td>
<WarningAmberIcon sx={{ color: '#cc0000' }} /> If you cannot print in colour, please click here for further instruction
</td>
When displayed on screen it looks like this:
How can the bottom of the icon be lined up with the bottom of the text?
You can add a custom style with css positioning
ex: sx={{ position: 'relative', top: '5px' }}
or you can wrap those icon and text in a new container and make it a flex container. then change the align-items value to flex-end
Using flex is one way of doing this:
<td>
<div style="display:flex; flex-direction: row; align-items: center">
your content
</div>
</td>
You might notice that text is not perfectly center, setting line-height to 1 will solve it.
I want to implement grid system from material-ui but facing a problem. Resizing the browser window has no effect on my grid items - they don't resize. I found out that this problem is caused by a parent div which has the style property "display": "flex".
I'm using a material-ui app-bar and drawer. Further I've built a reuseable container component for all the content and childrens. Without the style property "display": "flex" my whole page style gets broke. So how can I solve this? Any Idea?
Here is my code and the class root with the property "display": "flex"
Container.tsx
return (
<div className={classes.root}>
<TopBar /> // Material-UI AppBar
<Drawer /> // Reuseable Drawer Component
<main className={classes.contentContainer}>
<div>{children}</div>
</main>
</div>
);
Container Styles
const useStyles = makeStyles((theme: Theme) =>
createStyles({
contentContainer: {
flexGrow: 1,
marginTop: 63,
position: 'relative',
backgroundColor: colors.whiteB_8,
height: `calc(100vh - 63px)`,
// padding: theme.spacing(3),
'& > div:first-child': {
padding: `calc(${theme.spacing(1)}px + 35px)`,
},
},
root: {
display: 'flex',
},
}),
);
Then I can pass any component to this Container. Here my example component, where I want to have 3 columns inside my content container:
return (
<Grid container item xs={12} spacing={2}>
<Grid item xs={4}>
<Paper
style={{ backgroundColor: 'grey' }}
>
Test
</Paper>
</Grid>
<Grid item xs={4}>
<Paper
style={{ backgroundColor: 'grey' }}
>
Test
</Paper>
</Grid>
<Grid item xs={4}>
<Paper
style={{ backgroundColor: 'grey' }}
>
Test
</Paper>
</Grid>
</Grid>
);
The output looks like this:
And the items are not resized:
If I remove "display": "flex" it looks like this - the content is below the drawer:
I can't specifically recreate your issue, but I have a feeling if you add width: '100%' with the display: 'flex' that you say is breaking, it may help with the resizing, as currently the flexbox has no defined width, and so it is just going to shrink and fit to the components inside of it, but not shrink any further when you make the window smaller. As long as you define the width as some relative amount, either % or vw, it should shrink the content inside.
I am using Material ui Typography to display the content in Chip, but my contents are showing up in two different rows instead of one, i do not need line break. Below is my code
<Typography className={classes.title} style={{ display: 'inline' }} color="textSecondary" gutterBottom>
{chipName}
<img src={chipIIcon} style={{ marginLeft: '90%' }} alt="chipIIcon" />
</Typography>
What's wrong in my code and how can i show both chipName and img in same one row?
You can replace the marginLeft: 90% by float: right:
<Typography color="textSecondary" gutterBottom>
{chipName}
<img src={chipIIcon} style={{ float: 'right' }} alt="chipIIcon" />
</Typography>
Or, you can change the display of Typography to flex and set justifyContent to space-between (Ideally you will be using classes instead of inline styling):
<Typography style={{ display: "flex", justifyContent: "space-between"}} color="textSecondary" gutterBottom>
chipName
<img src={"chipIIcon"} alt="chipIIcon" />
</Typography>
Demo
I'm using grid-styled to make a layout.
I currently have the following:
How can I make the red/green items vertically centered in the blue container?
Here is my code, am I doing this correctly?
......
const Container = styled(Box)`
max-width: 1100px;
background: violet;
`;
Container.defaultProps = {
mx: 'auto',
};
.....
<Box style={{ backgroundColor: 'darkBlue', minHeight: 500 }}>
<Container>
<Flex wrap>
<Box
p={36}
width={[1, 1 / 2]}
style={{ backgroundColor: 'red' }}
>
{content[0]}
</Box>
<Box
p={36}
width={[1, 1 / 2]}
style={{ backgroundColor: 'green' }}
>
{content[1]}
</Box>
</Flex>
</Container>
</Box>
help appreciated.
You need to pass props to tell the Flex (flexbox) what you are trying to do.
<Flex> accepts the flexDirection align and justify props which will tell it how to align the children.
Try this:
<Flex flexDirection="row" align="center" justify="center" wrap>