I'm encountering an issue with my sticky footer in a modal. I have a modal that contains an input field with overflow, and I want to ensure that a sticky div inside the modal always stays at the bottom of the screen. Specifically, I am trying to achieve the following: On mobile devices, I want the div to be positioned at the very bottom. I've tried implementing solutions from various sources but none seem to meet my requirements. My goal is to have the div move above the keyboard when someone focuses on the input area (which triggers the keyboard to display on mobile devices).
Here is my current code:
<Modal
show={show}
onHide={() => setShow(false)}
centered
fullscreen="lg-down"
>
<div className="sticky-container"> {/* This should stay sticky at the bottom */}</div>
<Modal.Header closeButton>
<Modal.Title> Create a post </Modal.Title>
</Modal.Header>
<Modal.Body>
<div>
<div className="blog-form p-3">
<Form onSubmit={addBlog}>
<Row className="mb-1 body-container">
<Row>
<Form.Group
as={Col}
className="mb-3"
controlId="blog-description"
>
<Form.Control
className="description-input"
style={descriptionFont}
value={description}
as="textarea"
// Adjust the number of rows as needed
placeholder={placeholder}
onChange={(event) => handleTextAreaChange(event)}
autoFocus
/>
</Form.Group>
</Row>
<Row>
<Col>
another div here
</Col>
</Row>
</Row>
</Form>
</div>
</div>
</Modal.Body>
<Modal.Footer>
<Button type="submit" onClick={addBlog}>
Submit
</Button>
</Modal.Footer>
</Modal>
</>
along with the current styles:
.blog-form {
max-height: 500px;
overflow-y: auto;
}
.blog-form textarea {
width: 100%;
/* Set a minimum height for the textarea */
resize: none; /* Disable manual resizing */
overflow-y: auto;
}
.body-container {
padding-top: 10px;
display: flex;
overflow-y: auto;
}
.sticky-container {
height: 40px;
background-color: blue;
position: sticky;
bottom: 0;
z-index: 1055;
}