i have this code that when the button “New Chat” is pressed it will popup the modal
<code> return (
<div className="w-full overflow-y-scroll p-4 text-black">
{showPopup && (
<Modal show={showPopup} onHide={togglePopup} centered>
<Modal.Header closeButton>
<Modal.Title>Modal title</Modal.Title>
</Modal.Header>
<Modal.Body>
<Form>
<Form.Group controlId="formInput">
<Form.Label>Input:</Form.Label>
<Form.Control
type="text"
placeholder="Enter text"
value={inputValue}
onChange={handleChange}
/>
</Form.Group>
</Form>
</Modal.Body>
<Modal.Footer>
<Button2 variant="secondary" onClick={togglePopup}>
Close
</Button2>
<Button2 variant="primary" onClick={handleSubmit}>
Submit
</Button2>
</Modal.Footer>
</Modal>
)}
<Button1 className="w-full border-dashed border-black border" variant={"outline"} onClick={togglePopup}>
<PlusCircle className="mr-2 w-4 h-4" />
New Chat
</Button1>
</code>
<code> return (
<div className="w-full overflow-y-scroll p-4 text-black">
{showPopup && (
<Modal show={showPopup} onHide={togglePopup} centered>
<Modal.Header closeButton>
<Modal.Title>Modal title</Modal.Title>
</Modal.Header>
<Modal.Body>
<Form>
<Form.Group controlId="formInput">
<Form.Label>Input:</Form.Label>
<Form.Control
type="text"
placeholder="Enter text"
value={inputValue}
onChange={handleChange}
/>
</Form.Group>
</Form>
</Modal.Body>
<Modal.Footer>
<Button2 variant="secondary" onClick={togglePopup}>
Close
</Button2>
<Button2 variant="primary" onClick={handleSubmit}>
Submit
</Button2>
</Modal.Footer>
</Modal>
)}
<Button1 className="w-full border-dashed border-black border" variant={"outline"} onClick={togglePopup}>
<PlusCircle className="mr-2 w-4 h-4" />
New Chat
</Button1>
</code>
return (
<div className="w-full overflow-y-scroll p-4 text-black">
{showPopup && (
<Modal show={showPopup} onHide={togglePopup} centered>
<Modal.Header closeButton>
<Modal.Title>Modal title</Modal.Title>
</Modal.Header>
<Modal.Body>
<Form>
<Form.Group controlId="formInput">
<Form.Label>Input:</Form.Label>
<Form.Control
type="text"
placeholder="Enter text"
value={inputValue}
onChange={handleChange}
/>
</Form.Group>
</Form>
</Modal.Body>
<Modal.Footer>
<Button2 variant="secondary" onClick={togglePopup}>
Close
</Button2>
<Button2 variant="primary" onClick={handleSubmit}>
Submit
</Button2>
</Modal.Footer>
</Modal>
)}
<Button1 className="w-full border-dashed border-black border" variant={"outline"} onClick={togglePopup}>
<PlusCircle className="mr-2 w-4 h-4" />
New Chat
</Button1>
The thing is that everything is working fine Just that the CSS of the bootstrap will go missing whenever i click it
How the “Bootstrap Modal” looks like
the Submit button and closing of the modal works perfectly fine.
I suspect its because this is because the modal is being rendered as a children instead of the main container. Hence only showing up at the bottom of the screen. how do i fix it ?
The modal to look something like a Popup Modal in the photo below
Sample that i want