I made this form there are several problems with it but I wanted to ask only one of them. When I click number 2-3-4 and 5th boxes their background being blue and I could not fix this problem even tho I tried so hard. I searched from Google and asked many people but they just could not figure it out neither. I want them to look like exactly number 1 form. Also I want to click add another patient and I want to have another form. For example its just form number one and user clicked add another patient I want user to see number 2 form: I shared my codes on code snippet. Hope you guys can help me out. Thanks already.
HTML Codes:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
<link rel="stylesheet" href="https://kit.fontawesome.com/0b27183842.css" crossorigin="anonymous">
<title>Document</title>
</head>
<body> <header class="header">
<div class="container">
<nav id="navbar">
<h1 class="heading1">Patient Referral Form Hayes Valley Health San Francisco </h1>
</nav>
</div>
</header>
<h2 class="iki">Referral Patients</h2>
<h3 class="uc">You can add up to five patients at a time</h3>
<div class="box">
<!-- bir başlangıc -->
<div class="box-header" id="box1">
<div class="b1">
<div class="b11">
1
</div>
</div>
<div class="new">
New Referral
<div class="iconn" id="iconn" >
<i class="fa-regular fa-square-caret-down" ></i>
</div>
</div>
</div>
<div id="form" style="display: none;" >
<div class="form_inp">
<div class="disflex">
<div class="input-container">
<i class="fa fa-user icon"></i>
<input class="input-field" type="text" placeholder="First Name" name="usrnm" required>
</div>
<div class="input-container">
<i class="fa fa-user icon"></i>
<input class="input-field" type="text" placeholder="Last Name" name="usrnm" required>
</div>
</div>
<div class="disflex">
<div class="input-container">
<i class="fa-solid fa-cake-candles"></i>
<input class="input-field" type="text" placeholder="Date of Birth" name="email" min="1970-01-01" max="2023-01-01" required>
</div>
<div class="input-container">
<i class="fa-solid fa-language"></i>
<input class="input-field" type="text" placeholder="Contact Language" name="email" required>
</div>
</div>
<div class="disflex">
<div class="input-container">
<i class="fa-solid fa-phone-volume"></i>
<input class="input-field" type="tel" placeholder="Phone Number" name="phone" required>
</div>
<div class="input-container">
<i class="fa fa-envelope icon"></i>
<input class="input-field" type="text" placeholder="E-Mail" name="email" pattern="[email protected]" required>
</div>
</div>
<div class="full-input-container">
<input class="input-field" type="text" placeholder="Address" name="email" required>
</div>
<div class="full-input-container">
<input class="input-field" type="text" placeholder="Notes/Reason" name="email" required>
</div>
</div>
</div>
<!-- bir bitiş -->
<!-- iki başlangı. -->
<div class="box-header" id="box2">
<div class="b1">
<div class="b11">
2
</div>
</div>
<div class="new">
New Referral
<div class="iconn" id="iconn" >
<i class="fa-regular fa-square-caret-down" ></i>
</div>
</div>
</div>
<div id="form" style="display: none;" >
<div class="form_inp">
<div class="disflex">
<div class="input-container">
<i class="fa fa-user icon"></i>
<input class="input-field" type="text" placeholder="First Name" name="usrnm" required>
</div>
<div class="input-container">
<i class="fa fa-user icon"></i>
<input class="input-field" type="text" placeholder="Last Name" name="usrnm" required>
</div>
</div>
<div class="disflex">
<div class="input-container">
<i class="fa-solid fa-cake-candles"></i>
<input class="input-field" type="text" placeholder="Date of Birth" name="email" min="1970-01-01" max="2023-01-01" required>
</div>
<div class="input-container">
<i class="fa-solid fa-language"></i>
<input class="input-field" type="text" placeholder="Contact Language" name="email" required>
</div>
</div>
<div class="disflex">
<div class="input-container">
<i class="fa-solid fa-phone-volume"></i>
<input class="input-field" type="tel" placeholder="Phone Number" name="phone" required>
</div>
<div class="input-container">
<i class="fa fa-envelope icon"></i>
<input class="input-field" type="text" placeholder="E-Mail" name="email" pattern="[email protected]" required>
</div>
</div>
<div class="full-input-container">
<input class="input-field" type="text" placeholder="Address" name="email" required>
</div>
<div class="full-input-container">
<input class="input-field" type="text" placeholder="Notes/Reason" name="email" required>
</div>
</div>
</div>
<!-- iki bitiş -->
<!--üç başlangıç-->
<div class="box-header" id="box2">
<div class="b1">
<div class="b11">
3
</div>
</div>
<div class="new">
New Referral
<div class="iconn" id="iconn" >
<i class="fa-regular fa-square-caret-down" ></i>
</div>
</div>
</div>
<div id="form" style="display: none;" >
<div class="form_inp">
<div class="disflex">
<div class="input-container">
<i class="fa fa-user icon"></i>
<input class="input-field" type="text" placeholder="First Name" name="usrnm" required>
</div>
<div class="input-container">
<i class="fa fa-user icon"></i>
<input class="input-field" type="text" placeholder="Last Name" name="usrnm" required>
</div>
</div>
<div class="disflex">
<div class="input-container">
<i class="fa-solid fa-cake-candles"></i>
<input class="input-field" type="text" placeholder="Date of Birth" name="email" min="1970-01-01" max="2023-01-01" required>
</div>
<div class="input-container">
<i class="fa-solid fa-language"></i>
<input class="input-field" type="text" placeholder="Contact Language" name="email" required>
</div>
</div>
<div class="disflex">
<div class="input-container">
<i class="fa-solid fa-phone-volume"></i>
<input class="input-field" type="tel" placeholder="Phone Number" name="phone" required>
</div>
<div class="input-container">
<i class="fa fa-envelope icon"></i>
<input class="input-field" type="text" placeholder="E-Mail" name="email" pattern="[email protected]" required>
</div>
</div>
<div class="full-input-container">
<input class="input-field" type="text" placeholder="Address" name="email" required>
</div>
<div class="full-input-container">
<input class="input-field" type="text" placeholder="Notes/Reason" name="email" required>
</div>
</div>
</div>
<!--üç bitiş-->
<!--beş başlangıç-->
<div class="box-header" id="box4">
<div class="b1">
<div class="b11">
5
</div>
</div>
<div class="new">
New Referral
<div class="iconn" id="iconn" >
<i class="fa-regular fa-square-caret-down" ></i>
</div>
</div>
</div>
<div id="form" style="display: none;" >
<div class="form_inp">
<div class="disflex">
<div class="input-container">
<i class="fa fa-user icon"></i>
<input class="input-field" type="text" placeholder="First Name" name="usrnm" required>
</div>
<div class="input-container">
<i class="fa fa-user icon"></i>
<input class="input-field" type="text" placeholder="Last Name" name="usrnm" required>
</div>
</div>
<div class="disflex">
<div class="input-container">
<i class="fa-solid fa-cake-candles"></i>
<input class="input-field" type="text" placeholder="Date of Birth" name="email" min="1970-01-01" max="2023-01-01" required>
</div>
<div class="input-container">
<i class="fa-solid fa-language"></i>
<input class="input-field" type="text" placeholder="Contact Language" name="email" required>
</div>
</div>
<div class="disflex">
<div class="input-container">
<i class="fa-solid fa-phone-volume"></i>
<input class="input-field" type="tel" placeholder="Phone Number" name="phone" required>
</div>
<div class="input-container">
<i class="fa fa-envelope icon"></i>
<input class="input-field" type="text" placeholder="E-Mail" name="email" pattern="[email protected]" required>
</div>
</div>
<div class="full-input-container">
<input class="input-field" type="text" placeholder="Address" name="email" required>
</div>
<div class="full-input-container">
<input class="input-field" type="text" placeholder="Notes/Reason" name="email" required>
</div>
</div>
</div>
<br>
<br>
<br>
<br>
<button type="menu" class="patient"> + ADD ANOTHER PATIENT</button>
<br>
<br>
<button type="submit" class="btn">SEND REFERRALS</button>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://use.fontawesome.com/your-embed-code.js"></script> <!-- TODO: Place your Font Awesome embed code -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="app.js"></script>
</body>
</html>
CSS Codes:
body {
margin: 0;
background: #CDE7ED;
}
.heading1{
position: absolute;
width: 449px;
height: 80px;
top: 56px;
font-family: 'Montserrat';
font-style: normal;
font-weight: 500;
font-size: 30px;
line-height: 40px;
text-align: center;
background: #FFFFFF;
color: #0B2B5B;
}
#navbar{
position: relative;
height: 196px;
top: 0px;
display: flex;
justify-content: center;
background: #FFFFFF;
}
.iki{
height: 32px;
margin-top: 20px;
font-family: 'Montserrat';
font-style: normal;
font-weight: 500;
font-size: 24px;
line-height: 32px;
text-align: center;
color: #0B2B5B;
}
.uc{
height: 32px;
margin-bottom: 20px;
font-family: 'Montserrat';
font-style: normal;
font-weight: 500;
font-size: 20px;
line-height: 32px;
/* identical to box height, or 160% */
text-align: center;
color: #0B2B5B;
}
.box{
width: 782px;
height: 380px;
margin: auto;
background: #FFFFFF;
box-shadow: 0px 2px 4px rgba(11, 43, 91, 0.1);
border-radius: 4px;
}
.box-header{
width: 782px;
height: 64px;
left: 249px;
top: 334px;
background: #FFFFFF;
border-radius: 4px 4px 0px 0px;
display: flex;
}
.b1{
width: 40px;
background: #25A575;
border-radius: 3px;
}
.b11{
height: 100%;
font-weight: 500;
font-size: 26px;
display: flex;
align-items: center;
justify-content: center;
color: #FFFFFF;
}
.new{
padding-left: 20px;
font-family: 'Montserrat';
font-style: normal;
font-weight: 500;
font-size: 20px;
display: flex;
align-items: center;
font-feature-settings: 'pnum' on, 'lnum' on;
color: #3A719B;
background-color: white;
}
.box-body{
width: 295px;
height: 16px;
left: 24px;
top: 0px;
font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 16px;
display: flex;
align-items: center;
color: #3A719B;
}
.line{
position: absolute;
left: 0%;
right: 0%;
top: 100%;
bottom: 0%;
border: 1px solid #3A719B;
}
.disflex {
display: flex;
}
.form_inp {
padding: 60px;
}
.disflex .input-container, .full-input-container {
width: 50%;
border-bottom: 1.5px solid steelblue;
margin: 0 30px 30px 0;
}
.disflex .input-container input, .full-input-container input {
border: 0;
}
.full-input-container {
width: 100% !important;
margin: 0 0 30px 0 !important;
}
.btn {
width: 782px;
height: 48px;
left: 249px;
top: 790px;
color: #FFFFFF;
background: #0B2B5B;
border-radius: 34.5px;
}
.patient{
position: absolute;
width: 186px;
height: 24px;
left: 800px;
font-family: 'Montserrat';
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 24px;
display: flex;
align-items: center;
color: #0B2B5B;
background-color:#CDE7ED ;
border: none;
}
.iconn{
width: 30px;
height: 30px;
text-align: right;
top: 354px;
display: flex;
color: black;
padding-left: 550px;
font-weight: 400;
font-size: 25px;
line-height: 16px;
color: #000000;
}
JavaScript Codes:
$(document).ready(function () {
console.log('asd2')
$(".box-header").on("click", function() {
$(this).toggleClass("active");
$(this).next().slideToggle(200);
console.log('asd')
});
$('#hd_image').hide();
$("#but_upload").click(function () {
var fd = new FormData();
var files = $('#formFile')[0].files;
// Check file selected or not
if (files.length > 0) {
fd.append('file', files[0]);
$.ajax({
url: '',
type: 'post',
data: fd,
contentType: false,
processData: false,
beforeSend: function(response){
$('#form_hide').hide();
$('#hd_image').show();
},
success: function (response) {
if (response != 0) {
$('#form_hide').show();
$('#hd_image').hide();
// var obj = jQuery.parseJSON(response);
console.log(response);
} else {
alert('file not uploaded');
$('#form_hide').show();
}
}
});
} else {
alert("Please select a file.");
}
});
});
2
Answers
The reason why the white background appears in the first forms and not appear as it goes down is that white background color belongs to the .box class.
If you just want to make the background of your form white, it is enough to make your .form_inp class’ background white.
The reason for "…their background being blue…" is because the
<div class="box">have fixed height. So when 2nd, 3rd, and 5th dropdown is expanded, the remaining height of<div class="form_inp">doesn’t provide enough height inside<div class="box">. To solve this, you may take the steps below:<div class="box">and remove all near<br />background-color: white;in.form_inp<div class="empty">under of each<div class="form_inp">.emptylike thisFull code: