I feel like this code used to work fine before, not all of a sudden when clicking outside of the modal the modal does not close.
const StyledModal = styled(ModalUnstyled)`
position: fixed;
z-index: 1300;
right: 0;
bottom: 0;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
`;
const Backdrop = styled('div')`
z-index: -1;
position: fixed;
right: 0;
bottom: 0;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.5);
-webkit-tap-highlight-color: transparent;
`;
function style(props) {
return {
width: 250,
bgcolor: '#ffffff',
color: '#000000',
border: '2px solid #000',
p: 2,
px: 4,
pb: 3,
};
}
const [updateOpen, setUpdateOpen] = React.useState(false);
const handleUpdateOpen = () => setUpdateOpen(true);
const handleUpdateClose = () => setUpdateOpen(false);
<StyledModal
aria-labelledby="unstyled-modal-title"
aria-describedby="unstyled-modal-description"
open={updateOpen}
onClose={handleUpdateClose}
BackdropComponent={Backdrop}
>
<Box sx={style(props)}>
<h5>Enter password</h5>
<form>
<DevicePasswordInput/>
<button className="blue-button" onClick={SendRequest}>GET RECORDS</button>
</form>
<br/>
</Box>
</StyledModal>
Hitting the ESC button on the keyboard does close the modal successfully. Running the handleUpdateClose() function successfully closes the modal also.
Stuck on this, I appreciate any help anyone can offer, thank you!
Not sure why but my code got out of date from the material ui docs...
This code:
BackdropComponent={Backdrop}
Needs to be changed to this:
slots={{ backdrop: Backdrop }}
Related
I am trying to display a count where when a digit changes the original digit exits downwards and the new digit comes in from the top. When I try to do this, the numbers appear side by side briefly. I have tried using position absolute but then the digits don't exit downwards.
Here is a codesandbox showing the issue I am having.
Thanks!
You need to wrap your motion.divs in a container so the width doesn't change on the animation. Then give the container position relative and a fixed width and every motion.div a position absolute and for each motion.div higher left px.
<div className="myComponent">
<div className="counts-container">
<AnimatePresence>
{counts.map((count, index) => (
<motion.div
key={index + Math.random()}
className={`count count-${index}`}
animate={{ y: 0 }}
initial={{ y: -50 }}
exit={{ y: 50 }}
transition={{ duration: 0.5 }}
>
{count}
</motion.div>
))}
</AnimatePresence>
</div>
<button onClick={() => setCounts((c) => [...c].reverse())}>
Change Counts
</button>
</div>
your css:
body {
margin: 0;
padding: 0;
}
#root {
font-family: sans-serif;
text-align: center;
width: 100vw;
height: 100vh;
display: flex;
place-content: center;
place-items: center;
background: rgba(0, 85, 255, 1);
margin: 0;
padding: 0;
}
.myComponent {
display: flex;
}
.counts-container {
display: flex;
position: relative;
width: 40px;
background-color: yellow;
}
.count {
position: absolute;
}
.count-0 {
left: 0px;
}
.count-1 {
left: 15px;
}
.count-2 {
left: 30px;
}
MIGHT NOT BE THE BEST SOLUTION BUT IT IS A SOLUTION! :D
I'm looking for a simple Modal component in my React project. I opted to go with https://www.npmjs.com/package/react-modal because it seemed popular.
But everything I've tried so far has the modal hugging the top-left of the parent DIV. Here's the basic code I've tried:
<main className={styles.main}>
<Modal
isOpen={isShowModal}
className={styles.modal}
overlayClassName={styles.overlay}
ariaHideApp={false}
contentLabel='abc def'
>
Here is some modal content!<br/>
Here is some modal content!<br/>
Here is some modal content!<br/>
Here is some modal content!<br/>
Here is some modal content!<br/>
</Modal>
</main>
.main {
height: $page-height;
background: $sea-lord-background;
padding: 20px 20px;
}
.modal {
// margin-top: 500px;
position: absolute;
// // height: 300px;
// // width: 500px;
top: '50%';
left: '50%';
right: 'auto';
bottom: 'auto';
margin-right: '-50%';
transform: 'translate(-50%, -50%)';
background-color: $gray;
opacity: 0.6;
}
.overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: lime;
}
But everything I've tried, I can't get the basic modal centered vertically & horizontally. What am I doing wrong?
I have a styled.button that works perfectly on desktop view, but when on my desktop I toggle to mobile view it doesn't work at all.
Button:
const DateElement = styled.button`
background-color: ${(props) => (props.primary ? '#DEE2FF' : '#696B86')};
color: ${(props) => (props.primary ? 'black' : '#dedee4')};
box-shadow: none;
padding: 9px;
width: 90px;
text-align: center;
height: 90px;
user-select: none;
border: 1px solid rgba(20, 79, 118, 0.2);
& :hover {
cursor: pointer;
}
& :focus {
display: none;
}
${(theme) => theme.theme.breakpoints.down('sm')} {
padding: 3px;
width: 70px;
text-align: center;
height: 70px;
}
`;
render:
return (
<DateElement
key={date.getTime()}
primary={isSelected}
onClick={() => handleClick(date)}
className={clsx({
[classes.crossed]: date.getTime() + endTimeMilli < today.getTime(),
[classes.containerWidth]: dates.length > 4,
})}
>
<Typography className={classes.date}>{getWeekDay(date)}</Typography>
<Typography className={classes.month}>{getMonth(date)}</Typography>
<Typography className={classes.day}>{date.getDate()}</Typography>
</DateElement>
);
What is the issue?
How can I fix this?
I end up fixing it changing the styled component from button to div, I just changed it and it work, I still don't understand why or how but it worked.
const DateElement = styled.div`
Is it because you are using theme.theme?
${(theme) => theme.theme.breakpoints.down('sm')} {..
I could be wrong but not how it usually looks according to the docs: https://mui.com/customization/breakpoints/
I have come into a strange issue that has stopped me for a few hours. I have created a MERN app in which I have a page that I introduce members of a team. I also have a modal for each member triggered by click on member. The problem is that when I create a new member, the modals related to previous members is displayed behind the latter added members. I will attach pictures to more clearly demonstrate what happens.
enter image description here
enter image description here
Here is how I have defined the modal:
const Modal = ({ closeModal, children }) => {
const closeIcon = () => (
<FontAwesome
name='times'
onClick={closeModal}
className='modal-font-awesome'
/>
)
return (
<div id='overlay'>
<div className='content'>
{closeIcon()}
{children}
</div>
</div>
)
}
Here is my scss code for styling the modal:
#overlay {
position: fixed;
display: block;
overflow: hidden;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
}
.content {
margin: 120px auto;
background-color: white;
border-radius: 0.25rem;
width: 70vw;
padding: 2rem;
position: relative;
border-left: 5px solid rgb(37, 153, 124);
}
Do you have any suggestions about what is happening?
Thank you in advance.
this is a typescript-next.js project. I have this Modal component:
interface ModalProps {
onCancelModal: () => void;
onAcceptModal: () => void;
acceptEnabled: boolean;
isLoading?: boolean;
title: string;
}
const Modal: React.FC<ModalProps> = (props) => {
let containerRef = useRef<HTMLDivElement | null>(null);
console.log("container", containerRef);
useEffect(() => {
const rootContainer = document.createElement("div");
const parentElem = document.querySelector("#__next");
parentElem?.insertAdjacentElement("afterend", rootContainer);
if (!containerRef.current) {
containerRef.current = rootContainer;
}
return () => rootContainer.remove();
}, []);
return containerRef.current
? ReactDOM.createPortal(
<div className="modal">
<header className="modal__header">
<h1>{props.title}</h1>
</header>
<div className="modal__content">{props.children}</div>
<div className="modal__actions">
<Button design="danger" mode="flat" onClick={props.onCancelModal}>
Cancel
</Button>
<Button
mode="raised"
onClick={props.onAcceptModal}
disabled={!props.acceptEnabled}
loading={props.isLoading}
>
Accept
</Button>
</div>
</div>,
containerRef.current
)
: null;
};
export default Modal;
I pass a custom error to ErrorHandler component:
const ErrorHandler: React.FC<ErrorHandlerProps> = (props) => (
<Fragment>
{props.error && <Backdrop onClick={props.onHandle} />}
{props.error && (
<Modal
title="An Error Occurred"
onCancelModal={props.onHandle}
onAcceptModal={props.onHandle}
acceptEnabled
>
<p>{props.error}</p>
</Modal>
)}
</Fragment>
);
However, Modal component is successfully mounted on the DOM but nothing displays on the screen.
EDIT
I have backdrop and modal components.
// css for backdrop
.backdrop {
width: 100%;
height: 100vh;
background: rgba(0, 0, 0, 0.75);
z-index: 100;
position: fixed;
left: 0;
top: 0;
transition: opacity 0.3s ease-out;
opacity: 1;
}
// css for Modal
.modal {
position: fixed;
width: 90%;
left: 5%;
top: 20vh;
background: white;
border-radius: 5px;
z-index: 200;// I changed this to 999999 but didnot solve the issue
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
}
.modal__header {
border-bottom: 2px solid #3b0062;
}
.modal__header h1 {
font-size: 1.5rem;
color: #3b0062;
margin: 1rem;
}
.modal__content {
padding: 1rem;
}
.modal__actions {
padding: 1rem;
text-align: right;
}
.modal__actions button {
margin: 0 0.5rem;
}
#media (min-width: 768px) {
.modal {
width: 40rem;
left: calc((100% - 40rem) / 2);
}
}
I found the answer after i refresh my memory. I realized that there is another .modal className on elements-styles tab. It points me to the /node_modules/bootstrap/scss/_modal.scss file which also has modal className and it was overriding my custom className.
.modal {
position: fixed;
top: 0;
left: 0;
z-index: $zindex-modal;
display: none;
width: 100%;
height: 100%;
overflow: hidden;
// Prevent Chrome on Windows from adding a focus outline. For details, see
// https://github.com/twbs/bootstrap/pull/10951.
outline: 0;
// We deliberately don't use `-webkit-overflow-scrolling: touch;` due to a
// gnarly iOS Safari bug: https://bugs.webkit.org/show_bug.cgi?id=158342
// See also https://github.com/twbs/bootstrap/issues/17695
}