Due to the size of my employee form exceeding the screen capacity, I need to incorporate a scroll property into my modal content. The form contains numerous fields that cannot be modified.
Could you assist me in resolving the scrolling issue? Thank you!
Here's My code
import React from 'react';
import modalCSS from '../styles/modal.module.css';
import PurchasesForm from './forms/PurchasesForm';
import SalesForm from './forms/SalesForm';
import ExpensesForm from "./forms/ExpensesForm";
import InventoryForm from './forms/InventoryForm';
import StocksForm from './forms/StocksForm';
import EmployeeForm from './forms/EmployeeForm';
import SalaryForm from './forms/SalaryForm';
import LedgerForm from './forms/LedgerForm';
function Modal({ prop, closeModal, propObject, setPropObject, operation, updateItem }) {
return (
<div className={modalCSS.container}>
<div className={modalCSS.modalBox}>
<div className={modalCSS.header}>
<h1 className={modalCSS.title}>Add {prop}</h1>
<img src='/images/cross.svg' alt='cross-mark' className={modalCSS.crossBtn} onClick={() => closeModal()}/>
</div>
<div className={modalCSS.modalContent}>
{prop === "Sale" && <SalesForm sales={propObject} setSales={setPropObject} operation={operation} updateItem={updateItem} />}
{prop === "Purchase" && <PurchasesForm purchase={propObject} setPurchase={setPropObject} operation={operation} updateItem={updateItem} />}
{prop === "Expense" && <ExpensesForm expense={propObject} setExpense={setPropObject} operation={operation} updateItem={updateItem} />}
{prop === "Inventory" && <InventoryForm inventory={propObject} setInventory={setPropObject} operation={operation} updateItem={updateItem} />}
{prop === "Stock" && <StocksForm stock={propObject} setStock={setPropObject} operation={operation} updateItem={updateItem} />}
{prop === "Employee" && <EmployeeForm employee={propObject} setEmployee={setPropObject} operation={operation} updateItem={updateItem} />}
{prop === "Salary" && <SalaryForm />}
{prop === "Ledger" && <LedgerForm />}
</div>
</div>
</div>
)
}
export default Modal
Here's the CSS file
modal.module.css
.container{
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, 0.7);
z-index: 999;
display: flex;
justify-content: center;
align-items: center;
overflow-y: auto;
}
.modalBox{
height: fit-content;
width: 60%;
background-color: #FFF;
border-radius: 10px;
}
.header{
padding: 1%;
display: flex;
justify-content: space-between;
align-items: center;
/* background-color: #F0F0F0; */
}
.crossBtn{
height: 30px;
width: 30px;
cursor: pointer;
}
.modalContent{
height: 100%;
/* overflow: auto;
overflow-x: hidden; */
padding: 1%;
}
This is the issue encountered when setting height: fit-content; in the modalBox class
If height: 80%; is set in modalBox and height: fit-content; in modalContent class, then this effect occurs
The modal remains intact while the form continues to overflow despite implementing the overflow property.
Please provide suggestions for a solution considering my preference to keep height: fit-content in the modalBox class due to various forms being accommodated. Your guidance would be much appreciated. Thank you!