I would like to overlay the expand of the accordion but I don't know whoch part should I do. in the first picture show that output I want it overlay the other textfield when clicking the dropdown icon, as for the second picture show my current output which every time I click the dropdown it does not overlay rather it adjust the textfield. any advice?
What I want:
My current output:
my code:
<Accordion expanded={isExpanded} onClick={() => setExpanded(!isExpanded)}>
<AccordionSummary
expandIcon={<Icon icon={IMAGE.DropIcon} classStyle={classes.icon} />}>
{changeType}
</AccordionSummary>
<AccordionDetails>
<Button
className={classes.button}
onClick={() => onChangeType('GOLD')}>
GOLD
</Button>
<Button
className={classes.button}
onClick={() => onChangeType('GEMS')}>
GEMS
</Button>
<Button
className={classes.button}
onClick={() => onChangeType('COINS')}>
COINS
</Button>
</AccordionDetails>
</Accordion>
my styles:
const Accordion = withStyles({
root: {
padding: 0,
marginBottom:'1rem',
borderRadius: '8px',
boxShadow: 'none',
minHeight: '2em',
width: '15vw',
fontSize: '1.5em',
fontWeight: 600,
'&:not(:last-child)': {
borderBottom: 0,
},
'&:before': {
display: 'none',
},
'&$expanded': {
minHeight: '2em',
padding: 0,
marginTop: 2,
marginBottom: 2,
},
},
expanded: {},
})(MuiAccordion);
const AccordionSummary = withStyles({
root: {
margin: 0,
padding: '0 0 0 1em',
display: 'flex',
flexDirection: 'row',
borderRadius: '8px',
border: '1px solid',
minHeight: '2em',
width: '13.7vw',
'&$expanded': {
minHeight: '2em',
},
'& .MuiAccordionSummary-expandIcon.Mui-expanded': {
transform: 'none',
},
'& .MuiAccordionSummary-expandIcon': {
transform: 'none',
transition: 'none',
},
'& .MuiIconButton-edgeEnd': {
margin: 0,
padding: 0,
},
},
content: {
margin: 0,
'&$expanded': {
margin: 0,
},
},
expanded: {},
})(MuiAccordionSummary);
const AccordionDetails = withStyles(() => ({
root: {
padding: '0',
display: 'flex',
flexDirection: 'column',
width: '100%',
},
}))(MuiAccordionDetails);
You can add overlay by adding z-index to the AccordionDetails.
<Accordion >
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel1a-content"
id="panel1a-header"
>
<Typography>Accordion 1</Typography>
</AccordionSummary>
<div style={{zIndex:1 ,position:'absolute' ,width:'100%'}}>
<Card >
<AccordionDetails>
<Button>GOLD</Button>
<Button>GEMS</Button>
<Button>COINS</Button>
</AccordionDetails>
</Card>
</div>
</Accordion>
{/* Other contents of the page */}
hey I was looking to Accadian docs https://mui.com/components/accordion/
and all you need to do is just add some for AccordionDetails like background color , and to match the image some padding at the bottom, border and border radius and I tried this for demonstrate this here https://stackblitz.com/edit/react-k3tktv?file=demo.js
Related
I am using an MUI accordion in an appBar. When I expand the accordion, it moves up a little bit causing the heading of the accordion to be hidden behind the browsers bookmark bar. Is there some method to prevent this from happening?
const useStyles = makeStyles((theme)) => {
appBar: {
borderBottom: "2px solid #D2D2D2",
backgroundColor: "#fff",
marginTop: "0px",
height: "2.8vw",
},
appBarAcc: {
// display: "flex", // Causes the accordion to expand horizontally
flexDirection: "column",
width: "auto",
// padding: "0.8vw 0.4vw",
"&:hover": {
backgroundColor: "#B6B6B6",
},
},
}
...
<AppBar position="static" className={classes.appBar} elevation={0}>
<Toolbar variant="dense">
<Accordion className={classes.appBarAcc} elevation={0} TransitionProps={{ unmountOnExit: true }}>
<AccordionSummary expandIcon={<ExpandMoreIcon />}>
<NotificationsNoneIcon
style={{ color: "#636363", marginRight: "0.4vw", fontSize: "large", justifyContent: "center" }}
/>
<Typography>Notifications</Typography>
</AccordionSummary>
<AccordionDetails>
<Typography>No notifications</Typography>
</AccordionDetails>
</Accordion>
</Toolbar>
</AppBar>
It moves up because it's a child of Toolbar element that is a flex with align-items: center.So You should change Toolbar's style to align-items: flex-start;
const useStyles = makeStyles((theme)) => {
...styles,
toolbar: {
alignItems: "flex-start"
}
}
<Toolbar variant="dense" className={classes.toolbar}>
{children}
</Toolbar>
Here is my current Mobile Header view:
I want to set it something like this,
I've only been able to achevie so by setting specific left margins, which doesn't make it responsive. Both the profile avator and the menu icon are wrapped in the same <div>, yet I cant for the life of me figure out how to push the div to the RIGHT on my header.
<Toolbar>
<div className={classes.toolbarTitle}>
{Logo}
</div>
<div style={{ float: 'right', display: "flex", alignItems: "right"}}>
{getUserAccount()}
<IconButton
{...{
edge: "start",
color: "inherit",
"aria-label": "menu",
"aria-haspopup": "true",
onClick: handleDrawerOpen,
}}
>
<MenuIcon/>
</IconButton>
</div>
<Drawer
{...{
anchor: "right",
open: drawerOpen,
onClose: handleDrawerClose,
}}
>
<div className={classes.drawerContainer}>{getDrawerChoices()}</div>
<div className={classes.drawerContainer}>
<Switch
checked={isDarkMode}
onChange={toggleDarkMode}
/>
</div>
</Drawer>
</Toolbar>
);
};
Specifically here is the wrapped container for the two elements. I've tried float and a bunch of other CSS but I cannot get it working, the div seems to just stick to the left of the screen!
<div style={{ float: 'right', display: "flex", alignItems: "right"}}>
{getUserAccount()}
<IconButton
{...{
edge: "start",
color: "inherit",
"aria-label": "menu",
"aria-haspopup": "true",
onClick: handleDrawerOpen,
}}
>
<MenuIcon/>
</IconButton>
</div>
Here are some styles I use:
const useStyles = makeStyles((theme) => ({
appBar: {
borderBottom: `1px solid ${ theme.palette.divider }`,
flexGrow: 1,
"#media (max-width: 950px)": {
paddingLeft: 0,
}
},
link: {
margin: theme.spacing(1, 1.5),
display: 'block',
},
toolBar: {
display: "flex",
justifyContent: "space-between",
},
toolbarTitle: {
flexGrow: 1,
fontFamily: 'Track',
textAlign: "left",
float: "left"
},
navLinks: {
fontWeight: 700,
size: "18px",
marginLeft: "38px",
padding: "0 1rem",
float: "center"
},
drawerContainer: {
padding: "20px 30px",
},
profileAvatar: {
display: "flex",
float: 'right',
alignItems: "center",
},
}));
Please let me know how I can solve this.
edit:
<div style={{ display: "flex", justifyContent: "space-between" }}>
<div className={classes.toolbarTitle}>
{Logo}
</div>
<div style={{ float: 'right', display: "flex", alignItems: "right"}}>
{getUserAccount()}
<IconButton
{...{
edge: "start",
color: "inherit",
"aria-label": "menu",
"aria-haspopup": "true",
onClick: handleDrawerOpen,
}}
>
<MenuIcon/>
</IconButton>
</div>
</div>
Wrap the logo in a div and then wrap the menu icon and icon button in another div, which you already have so you can style them independently
Wrap both those divs in a separate .container div and set the css to
.contianer {
display: flex;
justify-content: space-between;
}
You can then move them slightly from the edges of the screen with a little margin if you wish.
I am currently using the Material UI dialog to show some information about a location marker. I would like to disable the ugly box shadow surrounding the component. I have set box-shadow: none and have tried multiple solutions, but none of them seem to work!
Screenshot
Here is my code for this component
const useStyles = makeStyles({
root: {
maxWidth: '400px',
marginLeft: '5px',
width: '446px',
height: '200px',
marginTop: '50px',
overflow: 'hidden',
boxShadow: 'none',
},
closeButton: {
color: Colours.Black,
float: 'right',
paddingTop: '15px',
marginRight: '5px',
marginLeft: 'auto',
height: '24px',
width: '24px',
},
flexContainerContent: {
display: 'flex',
justifyContent: 'space-between',
paddingRight: '10px',
},
flexContainerButtons: {
display: 'flex',
justifyContent: 'space-between',
padding: '0px 18px 15px 18px',
},
});
const InfoWindow = ({
title,
address,
open,
handleClose,
}: {
title: string;
address: string;
open: boolean;
handleClose: () => void;
}) => {
const infoStyles = useStyles();
return (
<Dialog
classes={{ root: infoStyles.root }}
open={open}
onClose={handleClose}
hideBackdrop
disableEnforceFocus
>
<Container classes={{ root: infoStyles.flexContainerContent }}>
<DialogContent style={{ overflow: 'hidden', paddingLeft: '0px', boxShadow: 'none' }}>
<Typography variant="body1" color="textSecondary">
Name:
<span
style={{ display: 'inline', color: Colours.Black }}
color="textPrimary"
>
{` ${title} `}
</span>
</Typography>
<Typography variant="body1" color="textSecondary">
Location:
<span
style={{ display: 'inline', color: Colours.Black }}
color="textPrimary"
>
{` ${address} `}
</span>
</Typography>
</DialogContent>
<CloseIcon
onClick={handleClose}
classes={{ root: infoStyles.closeButton }}
/>
</Container>
<DialogActions style={{ padding: '0px', boxShadow: 'none' }}>
<Container classes={{ root: infoStyles.flexContainerButtons }}>
<Button size="small" style={{ color: Colours.Danger }}>
Delete
</Button>
<Button size="small" style={{ color: Colours.Secondary }}>
Edit
</Button>
</Container>
</DialogActions>
</Dialog>
);
};
export default InfoWindow;
Would really appreciate any sort of help or advice!
You need to target the Paper inside the Dialog.
One way of doing this is adding this CSS rule:
.MuiDialog-container .MuiPaper-root {
box-shadow: none;
}
I'm trying to position the FullWidthDiv component to span from the beginning of the MainDiv side, all the way to the end. I've tried giving in an absolute position and playing around with flex, but I can't get it to not start from the SubDiv component.
Is it possible to achieve this?
My CodeSandbox approach.
Here is what I'm trying to achieve
It is a little bit hacky, but you can center ChildDiv with align-items: center.
Also, shrink the FullWidthDiv to 280.
And last you have to add flex: 1, width: 100% to the div, that hold SubChildDiv inside App component.
export default function App() {
return (
<MainDiv>
<ChildDiv>
<div style={{flex: 1, width: '100%'}}>
<SubChildDiv />
<SubChildDiv />
</div>
<FullWidthDiv />
</ChildDiv>
</MainDiv>
);
}
const MainDiv = ({ children }) => (
<div
style={{
display: "flex",
justifyContent: "center",
alignItems: "center",
width: 250,
height: 250,
backgroundColor: "red",
padding: "1rem"
}}
>
{children}
</div>
);
const ChildDiv = ({ children }) => (
<div
style={{
width: 200,
height: 200,
backgroundColor: "blue",
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "space-between"
}}
>
{children}
</div>
);
const SubChildDiv = () => (
<div
style={{
display: "flex",
width: "100%",
height: 30,
backgroundColor: "green",
border: "1px solid black"
}}
/>
);
const FullWidthDiv = () => (
<div
style={{
width: 280,
height: 30,
border: "1px solid black",
backgroundColor: "green"
}}
/>
);
If you want the FullWidthDiv to be with 100% width, you have to calculate the 100% width and add the padding from both sides of MainDiv it will look something like that: calc(100% + 2rem).
On all but two pages of my site I would like the header to include two buttons. How can I make the header aware of this so it includes the buttons when needed and doesn't for the other two pages. I'm using React and Gatsby.
Could I accomplish this by adding if statements to my component? If so I'm not sure how to move beyond this step.
const isHomepage = pathname == `/`
const isContact = pathname == `/contact/`
let styles = {}
if (isHomepage) {
}
} else if (isContact) {
} else {
}
This is my code for the header:
import React from 'react'
import Link from 'gatsby-link'
import colors from '../utils/colors'
const Header = ({ siteTitle }) => (
<div
style={{
background: colors.white,
marginBottom: '1.45rem',
borderBottom: '1px solid',
borderBottomColor: colors.green,
height: '3rem',
top: 0,
left: 0,
width: '100%',
position: 'fixed',
}}
>
<div
style={{
paddingLeft: 20,
paddingRight: 20,
marginLeft: 'auto',
marginRight: 'auto',
maxWidth: 960,
}}
>
<div
style={{
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
height: 53,
}}>
<h3 style={{
margin: 0,
}}>
<Link
to="/"
style={{
color: colors.green,
textDecoration: 'none',
fontWeight: 450,
}}
>
{siteTitle}
</Link>
</h3>
</div>
</div>
</div>
)
export default Header
Use conditional rendering based on location.pathname
{['/path1', '/path2'].indexOf(location.pathname) === -1 && (
<button>1<button>
<button>2<button>
)}
import React from 'react'
import Link from 'gatsby-link'
import colors from '../utils/colors'
const Header = ({ siteTitle }) => (
<div
style={{
background: colors.white,
marginBottom: '1.45rem',
borderBottom: '1px solid',
borderBottomColor: colors.green,
height: '3rem',
top: 0,
left: 0,
width: '100%',
position: 'fixed',
}}
>
<div
style={{
paddingLeft: 20,
paddingRight: 20,
marginLeft: 'auto',
marginRight: 'auto',
maxWidth: 960,
}}
>
<div
style={{
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
height: 53,
}}>
<h3 style={{
margin: 0,
}}>
<Link
to="/"
style={{
color: colors.green,
textDecoration: 'none',
fontWeight: 450,
}}
>
{siteTitle}
</Link>
{['/path1', '/path2'].indexOf(location.pathname) === -1 && (
<button>1<button>
<button>2<button>
)}
</h3>
</div>
</div>
</div>
)
export default Header