I am trying to create a Modal
I have given the Background component position:fixed still its starting from the toggle button
when position:fixed is active:
when position:fixed is not active:
const Background = styled.div`
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
position: fixed;
z-index: 1;
display: flex;
justify-content: center;
align-items: center;
`;
<div>
{' '}
{showModal ? (
<Background>
<ModalWrapper showModal={showModal}>
<ModalImg src={require('./modal.jpg')} alt='camera' />
<ModalContent>
<h1>Are you ready?</h1>
<p>Get exclusive access to our next launch.</p>
<button>Join Now</button>
</ModalContent>
<CloseModalButton
aria-label='Close modal'
onClick={() => setShowModal((prev) => !prev)}
/>
</ModalWrapper>
</Background>
) : null}
<div/>
the tag used in the last segment of code as a wrapper/parent is not style neutral, it has some default styling which is causing such problem.
Replace is with <> </>
<>
{' '}
{showModal ? (
<Background>
<ModalWrapper showModal={showModal}>
<ModalImg src={require('./modal.jpg')} alt='camera' />
<ModalContent>
<h1>Are you ready?</h1>
<p>Get exclusive access to our next launch.</p>
<button>Join Now</button>
</ModalContent>
<CloseModalButton
aria-label='Close modal'
onClick={() => setShowModal((prev) => !prev)}
/>
</ModalWrapper>
</Background>
) : null}
</>
And now everything works fine!
Related
I'm working on having a left-side navigation bar for a web app I'm working on. The issue I'm running into is I want to make some style changes and I find it difficult to do so with the Drawer component. The biggest is I want the actual line of the drawer to be thicker if that makes sense.
Code below:
function SideNav({drawerWidth = 170}) { const history = useHistory(); const dispatch = useDispatch();
return(
<Drawer
PaperProps={{ padding: '20px'}}
sx={{
width: drawerWidth,
flexShrink: 0,
'& .MuiDrawer-paper': {
width: drawerWidth,
boxSizing: 'border-box',
},
}}
variant="permanent"
anchor="left"
>
<List>
<ListItem >
<img class="rotate" src="record1.png" width="80" height="80"/>
<Button variant='outlined' onClick={() => history.push('/home')}> Home </Button>
</ListItem>
<ListItem >
<img class="rotate" src="record1.png" width="80" height="80"/>
<Button variant='outlined' onClick={() => history.push('/create')}>Create</Button>
</ListItem>
<ListItem>
<img class="rotate" src="scratch.png" width="80" height="80" />
<Button variant='outlined' onClick={() => dispatch({ type: 'LOGOUT' })}>Log out </Button>
</ListItem>
<ListItem>
<img class="rotate" src="scratch.png" width="80" height="80" onClick={() => history.push('/profile')}/>
<Button variant='outlined' onClick={() => history.push('/create')}>Profile </Button>
</ListItem>
</List>
<Divider />
</Drawer>
);
}
export default SideNav;`
I've fiddled around with the sx={{}} and have yet to find a solution to the issue. My goal is just to make the drawer/navigation a little more defined so it pops
I think you are referring to the right border of the drawer. If it is the case you should change the prop PaperProps to:
PaperProps={{ sx: { borderRightWidth: 2, padding: '20px' } }}
Let me know if this works for you
I currently have two avatars that are rendered on a page. On hover I want a card to pop up that displays player information.
Currently when hovering on the first avatar both player cards pop up and i only want the card of the avatar that is hovered over.
The second issue is that on hover of the second avatar nothing happens.
I'd like the card of the avatar that is hovered to only pop up.
function Profiles() {
const { hovered, ref } = useHover();
return (
<Container style={{ display: "flex" }}>
<div ref={ref}>
{hovered ? (
<PlayerOne />
) : (
<Avatar
radius="xl"
size="xl"
src={tobias}
style={{ border: "black solid .1rem" }}
sx={(theme) => ({
backgroundColor: theme.colors.yellow[1],
"&:hover": {
backgroundColor: theme.colors.yellow[3],
},
})}
/>
)}
</div>
<div>
{hovered ? (
<PlayerTwo />
) : (
<Avatar
radius="xl"
size="xl"
src={vij}
style={{ border: "black solid .1rem" }}
sx={(theme) => ({
backgroundColor: theme.colors.yellow[1],
"&:hover": {
backgroundColor: theme.colors.yellow[3],
},
})}
/>
)}
</div>
</Container>
);
}
export default Profiles;
this makes sense but just use good old CSS. oh and if using React its className of course, not class
<div class="parent">
<div class="child1">
<PlayerOne />
</div>
<div class="child2">
<Avatar
radius="xl"
size="xl"
src={vij}
style={{ border: "black solid .1rem" }}
sx={(theme) => ({
backgroundColor: theme.colors.yellow[1],
"&:hover": {
backgroundColor: theme.colors.yellow[3],
},
})}
/>
</div>
</div>
<div class="parent">
<div class="child1">
<PlayerTwo />
</div>
<div class="child2">
<Avatar
radius="xl"
size="xl"
src={tobias}
style={{ border: "black solid .1rem" }}
sx={(theme) => ({
backgroundColor: theme.colors.yellow[1],
"&:hover": {
backgroundColor: theme.colors.yellow[3],
},
})}
/>
</div>
</div>
in your CSS
.child1 { display: none; }
.parent:hover > .child1 { display: none; }
.parent:hover > .child2 { display: block; }
const Header: React.FC<Props> = ({ copy }: Props) => {
if (isUndefined(copy)) return null;
return (
<Container>
<img src={HeartCircle} />
<Text>
<h4>{copy.recommended.subheading}</h4>
<LearnMoreButton>
<RecommendedProviderLabel
isRecommendedProvider={true}
showIcon={false}
label={copy.ctas.learnMore}
/>
</LearnMoreButton>
</Text>
</Container>
);
you can use display flex
flexRow: {
display: flex;
}
<div className={classes.flexRow}>
<img src={HeartCircle} />
<Text>
<h4>{copy.recommended.subheading}</h4>
<LearnMoreButton>
<RecommendedProviderLabel
isRecommendedProvider={true}
showIcon={false}
label={copy.ctas.learnMore}
/>
</LearnMoreButton>
</Text>
</div>
I am having a modal with long content. I need to have an internal scroll bar inside the modal but there is no information about that in the documentation
<Modal
title={<Typography style={{color:'#2e186a'}}>FAQ</Typography>}
centered
visible={openFaq}
onOk={() => setopenFaq(false)}
onCancel={() => setopenFaq(false)}
width={1000}
footer={false}
>
{Content}
</Modal>
Any help is welcome.Thanks
A suggestion by using CSS
<Modal
bodyStyle={{overflowX: 'scroll'}}
>
{Content}
</Modal>
You need to provide the maxHeight option inside bodyStyle prop along with
overFlow set to auto
<Modal
bodyStyle={{ overflowY: 'auto', maxHeight: 'calc(100vh - 200px)' }}
>
{content}
</Modal>
You can achieve this as following:
Modify .ant-modal-content class
.ant-modal-content {
height: 100%;
display: flex;
flex-direction: column;
}
Add fixed height and overflowY: scroll to the Modal
<Modal
style={{ height: 'calc(100vh - 200px)' }}
bodyStyle={{ overflowY: 'scroll' }}
>
Your content
</Modal>
I tried to assign div side by side in my react website. However,I received the error Uncaught Invariant Violation: Minified React error.
This is my toolbar in my react website
let EnhancedTableToolbar = props => {
const { numSelected, classes ,deletefunc} = props;
return (
<Toolbar
className={classNames(classes.root, {
[classes.highlight]: numSelected > 0,
})}
>
<div className={classes.title}>
{numSelected > 0 ? (
<Typography color="inherit" variant="subtitle1">
{numSelected} selected
</Typography>
) : (
<Typography variant="h6" id="tableTitle">
User List
</Typography>
)}
</div>
<div className={classes.spacer} />
<div className={classes.actions}>
{numSelected > 0 ? (
<div>
<div style="width: 100px; float:right;">
<Tooltip title="Delete">
<IconButton aria-label="Delete">
<DeleteIcon onClick={() => { if (window.confirm('Are you sure you wish to delete '+numSelected +' item?')) {deletefunc()} } }>
</DeleteIcon>
</IconButton>
</Tooltip>
</div>
<div style="width: 100px; float:right;">
<Tooltip title="Edit">
<IconButton aria-label="Edit">
<EditIcon>
</EditIcon>
</IconButton>
</Tooltip>
</div>
</div>
) : (
<Tooltip title="Filter list">
<IconButton aria-label="Filter list">
<FilterListIcon />
</IconButton>
</Tooltip>
)}
</div>
</Toolbar>
);
};
I received the error when I set the width to 100px and float to right in my delete button and edit button. The code will work if I never set the width and float. However,it div by up down instead of side by side. Anyone know how to solve this issue?
That is not how you define inline styles in JSX.
The style attribute accepts a JavaScript object with camelCased
properties rather than a CSS string.
Try this instead:
<div style={{ width: '100px', float: 'right' }}>