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.
Related
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>
I am working on a project in which i need to write a number over a icon.
I am using MaterialUI ModeComment icon and i want to write some text over it .
I tried the following things but didn't worked .
<ModeComment color='primary'>
<Typography>2</Typography>
</ModeComment>
<ModeComment color='primary'>
<span>2</span>
</ModeComment>
How can I do this? Thanks in Advance
Unfortunately, passing a children prop like you did will not work for material-ui's Icon component. It expects the children to be the name of the icon font ligature.
A possible solution would be to create a custom component for your requirements - a ModeCommentIconWithNumber component maybe? Then it would have predefined styles to position its icon and number elements.
Below code would help you achieve what you want. You could modify this component, like accepting an icon prop to render or maybe a color prop that defines the color of the icon.
...
import { makeStyles } from "#material-ui/core/styles";
const useStyles = makeStyles({
root: {
position: "relative",
display: "inline-flex",
justifyContent: "center",
alignItems: "center"
},
icon: {
fontSize: "2.5em"
},
count: {
position: "absolute",
lineHeight: 1,
color: "#fff",
top: "0.5em",
fontSize: "1em"
}
});
function ModeCommentIconWithNumber({ size = 16, count = 0 }) {
const classes = useStyles();
return (
<div className={classes.root} style={{ fontSize: size }}>
<ModeCommentIcon color="primary" className={classes.icon} />
<Typography component="span" className={classes.count}>
{count}
</Typography>
</div>
);
}
You can use Badge of material ui. link
<Badge
badgeContent={4}
anchorOrigin={{
vertical: 'center',
horizontal: 'center',
}}
color="white">
<ModeComment />
</Badge>
Ciao, there is no way to put text in icon (like a child as you did). You could put Typography outside the icon and use some css. Something like:
const styles = {
typography: {
color: "white",
fontSize: 13,
position: "absolute",
top: "1.2%",
left: "2%"
}
};
function TextIcon() {
return (
<div>
<Typography style={styles.typography}>2</Typography>
<ModeComment color="primary" />
</div>
);
}
Here a codesandbox example.
I don't think Mui provide such customization. You could write text in parallel to icon and align it over the top of it using absolute position.
I am trying to design a custom accordion with these fancy red lines connecting parent and children (see photo).
I am using Grommet components here but in summary, the layout it's just a bunch of divs (the Box tag) and a collapsible panel component for the children(the Collapsible tag). Children panels can be opened and show more content.
After a couple of tries, what I did to connect parent and children is to wrap the outer box with a left-border and then remove the extra border on the bottom using a white box on top of it (the Stack tag of the second example code). The horizontal line connecting the card and the left-border is just a styled div placed next to the Child tab ( inside the SubMenuElement component ).
I think this is quite an intricate solution ( also because I need to make the white box responsive ) but I couldn't think about a simpler one.
Do you have any suggestion on how can I improve or re-do the red connections?
Thanks in advance for the help!
Please note that I am aware all the panels are using the same variables on click
<MenuButton
open={openMenu}
label="PARENT TAB-XYZ"
onClick={() => {
const newOpenMenu = !openMenu;
setOpenMenu(newOpenMenu);
setOpenSubmenu1(!newOpenMenu ? false : openSubmenu1);
}}
/>
<Collapsible open={openMenu}>
<Box background="antiquewhite" margin={{ left: 'small' }} border={{ side: 'left', size: '2px', color: 'red' }}>
{Tabs.map(el => {
return (
<SubMenuElement
key={el.title}
open={openSubmenu1}
label={el.title}
onClick={() => setOpenSubmenu1(!openSubmenu1)}
/>
);
})}
</Box>
</Collapsible>
<MenuButton
open={openMenu}
label="PARENT TAB-POU"
onClick={() => {
const newOpenMenu = !openMenu;
setOpenMenu(newOpenMenu);
setOpenSubmenu1(!newOpenMenu ? false : openSubmenu1);
}}
/>
<Collapsible open={openMenu}>
<Stack anchor="bottom-left">
<Box
background="antiquewhite"
margin={{ left: 'small' }}
border={{ side: 'left', size: '2px', color: 'red' }}
>
{Tabs.map(el => {
return (
<SubMenuElement
key={el.title}
open={openSubmenu1}
label={el.title}
onClick={() => setOpenSubmenu1(!openSubmenu1)}
/>
);
})}
</Box>
<Box background="white" height="39px" width="35px"></Box>
</Stack>
</Collapsible>
</Box>
);
Based on one of my answer for someone who needed a divider, I can propose you something like that: repro on Stackblitz
You will find the original divider code on the first link. for your needs, i modified it a little so it just add the link on the left of the content. There is still a border-left on the content wrapper tho, it seems the easiest solution for me.
Your main file :
import React, { Component } from "react";
import { render } from "react-dom";
import Divider from "./divider";
import "./style.css";
const App = () => {
const toggleAccordion = e => {
e.target.classList.toggle("hidden");
};
return (
<>
<div className="accordion hidden" onClick={toggleAccordion}>
accordion header
<div className="accordion-content-wrapper">
<Divider>
<div>Content</div>
</Divider>
<Divider>
<div>Content</div>
</Divider>
<Divider>
<div>Content</div>
</Divider>
</div>
</div>
</>
);
};
render(<App />, document.getElementById("root"));
My accordion css (your component already have this feature i guess, i just made a minimal reproduction):
.accordion.hidden {
height: 18px;
overflow: hidden;
}
.accordion-content-wrapper{
margin-left: 10px;
border-left: 1px solid black;
}
And for the divider, there not a lot of change from my original answer, here is the code:
import React from 'react';
const Divider = ({ children }) => {
return (
<div className="divider-component">
<div className="container">
<div className="border" />
<span className="content">{children}</span>
</div>
</div>
);
};
export default Divider;
css:
.divider-component .container{
display: flex;
align-items: center;
}
.divider-component .border{
border-bottom: 1px solid black;
width: 15px;
}
.divider-component .content {
width: 100%;
}
Even if you'll have to edit it to fit your needs, the idea is to add a flex container so you can add the little link on the left of your content, correctly aligned with your content.
For whoever will encounter the same issue, I ended up using two 50% height flexboxes inside a div that replace the horizontal line. This allows managing the responsive resize automatically while giving flexibility on the last item border.
const SubMenuElement = ({ last, label, open, onClick }: { last?: boolean; label: string; open: any; onClick: any }) => {
return (
<Box direction="row">
<Line last={last} />
<Box width="100%" margin={{ vertical: 'small' }}>
<Card background="white" onClick={onClick}>
....
</Card>
</Box>
</Box>
);
};
Where the Line is
const Line = ({ last }: { last?: boolean }) => (
<Box direction="column" width="20px" flex="grow">
<Box height="50%" style={{ borderLeft: '1px solid red', borderBottom: '1px solid red' }} />
<Box height="50%" style={last ? {} : { borderLeft: '1px solid red' }} />
</Box>
);
In my parent component:
{
this.state.projectList.map(dat => <Item data = {dat}/>)
}
in the child component Item
render() {
return (
<div style={{'width':'100%', 'textAlign':'center'}}>
<Card style={{ width: '25rem', padding: '1rem', display: 'inline-block' }}>
<CardPrimaryAction>
<div style={{ padding: '0 1rem 1rem 1rem' }}>
<Typography use="headline6" tag="h2">
{this.props.data.name}
</Typography>
<Typography use="body1" tag="div" theme="text-secondary-on-background">
{this.props.data.description}
</Typography>
</div>
</CardPrimaryAction>
</Card>
</div>
);
}
I am using the rmwc Card component to put some stuff.
Right now it just puts all rendered items vertically like a stack. What I actually want is the small sketch in a blue pen on the right side of the image.
I tried to give the wrapping div 'width':'100%', 'textAlign':'center' and the Card itself an inline-block but it's still the same.
In parent component enclose your map function with GridList component of material-ui specifying the required columns. Then enclose your data in GridListTile. This is shown below,
<div>
<GridList cols={2} spacing={16}>
this.state.projectList.map(dat =>
<GridListTile item key={dat} xs={6}>
<Item data = {dat}/>
<GridListTile/>
))}
</GridList>
</div>
In child component, remove the parent <div> and you are good to go.
Please do import necessary dependencies.
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>