To accommodate more fields within my fixed-position container, I need to increase its height. However, instead of doing this, I believe adding a scroll bar to the container and making its contents scrollable would be a better solution.
The challenge now is that I am unsure how to make the contents within the container scrollable and I would greatly appreciate any assistance with this.
Here is the code snippet in question:
function openForm() {
document.getElementById("popupForm").style.display = "block";
}
function closeForm() {
document.getElementById("popupForm").style.display = "none";
}* {
box-sizing: border-box;
}
.openBtn {
display: flex;
justify-content: left;
}
.openButton {
border: none;
border-radius: 5px;
background-color: #1c87c9;
color: white;
padding: 14px 20px;
cursor: pointer;
position: fixed;
}
.loginPopup {
position: relative;
text-align: center;
width: 100%;
}
//Remaining CSS code here// <div class="openBtn">
<button class="openButton" onclick="openForm()"><strong>Open Form</strong></button>
<div class="loginPopup">
//Remaining HTML code here//