How to fit React Modal size children? - css

Question

I am trying to load a dynamic login page with React Modal. Is there a way to make React Modal resize to the size of its child elements?
//App.js
import "./styles/app.scss";
import Layout from './options/Layout'
import Login from './Components/Login'
import { useState } from "react";
import Modal from 'react-modal'
function App() {
const [OpenModal, setOpenModal] = useState(false)
return (
<div id="app" className="App">
<Layout>
<button onClick = {() => setOpenModal(true)}>open modal</button>
<Modal isOpen = {OpenModal}>
<Login/>
</Modal>
</Layout>
</div>
);
}
export default App;
//login.scss
.login {
display: flex;
justify-content: center;
align-items: center;
width: 300px;
height: 280px;
margin: 0 auto;
background-color: #5c8fc2;
border-radius: 30px;
}
.login_top {
display: flex;
align-items: center;
justify-content: center;
margin-top: -40px;
margin-bottom: 20px;
color: whitesmoke;
}
.login_register_container {
border: none;
outline: none;
border-radius: 50%;
}
button {
margin-right: 12px;
margin-top: 30px;
border: none;
border-radius: 4px;
cursor: pointer;
}
I want to dynamically manage the size according to the child element.
I've tried several methods, but without success. How to fit modal's component to child element???

Answer 1

If you use the developer tools you can see that the content grows because they have applied some styles to the modal.
position: absolute;
inset:40
inset is same as
top: 40px;
left: 40px;
right: 40px;
bottom: 40px;
If you want your content to be exactly the same size as your content, you can remove the right and bottom from the styles.
<ReactModal
isOpen={true}
contentLabel="Minimal Modal Example"
className="Modal"
>
<div>
<div style={{ height: '500px' }}>Some content</div>
</div>
<button onClick={() => {}}>Close Modal</button>
</ReactModal>
CSS:
.Modal {
position: absolute;
top: 40px;
left: 40px;
background-color: papayawhip;
}
You will lose equal spacing on all sides of the modal if you do this though.
Here is an example. https://stackblitz.com/edit/react-vxe3cn