I have a unique scenario that I need help with. I am currently working on a responsive chat application and I am creating a sign up form within a modal dialog using HTML, CSS, and JavaScript. Within the modal, I have a header with an <h1> heading and below that is the sign up form itself.
My challenge is positioning two buttons within the form at the bottom right corner of the modal dialog. I have tried setting the parent div to relative positioning and the child div to absolute with properties like right:0; bottom:0;, but it did not yield the desired result. I also experimented with fixed positioning for the child div, but it ended up appearing outside the modal at the bottom right of the window.
Any suggestions or insights would be greatly appreciated!
HTML:
<!-- The Modal -->
<div class="modal">
<!-- Modal content -->
<div class="modal-content">
<form>
<div class="p-div">
<labe>Email:</labe>
<input type="text" name="email" required>
<div class="c-div">
<button type="button">Reset</button>
<button type="submit">Sign up</button>
</div>
</div>
</form>
</div>
</div>
CSS:
/* The Modal (background) */
.modal {
display: block;
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content/Box */
.modal-content {
background-color: rgb(200, 200, 200);
margin: 8% auto;
border-radius: 1px;
width: 88.7%;
height: 89.3%;
}
.p-div{
padding: 16px;
position: relative;
}
input{
display:block;
}
.c-div{
position: absolute;
right: 0;
bottom: 0;
}
For a sample representation, check out this fiddle
Thank you for any assistance in advance!