We Keep Coding

How to make element stretch vertically and not affect look?

I have a page that looks like this.
//$(document).ready(function() {
// function viewport_height() {
// var window_height = $(window).height();
// $('#wrapper').height(window_height);
// $('#chat-area').height = $(window_height);
// }
// viewport_height();
// $(window).resize(function() {
// viewport_height();
// });
//});
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
font-family: 'Poppins', sans-serif;
}
body{
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: #f7f7f7;
padding: 0 10px;
}
.wrapper{
background: #fff;
max-width: 450px;
width: 100%;
border-radius: 16px;
box-shadow:
0 0 128px 0 rgba(0, 0, 0, 0.1),
0 32px 64px -48px rgba(0, 0, 0, 0.5);
}
/* Login & Signup Form CSS Start */
.form{
padding: 25px 30px;
}
.form header{
font-size: 25px;
font-weight: 600;
padding-bottom: 10px;
border-bottom: 1px solid #e6e6e6;
}
.form form{
margin: 20px 0;
}
.form form .error-text{
color: #721c24;
padding: 8px 10px;
text-align: center;
border-radius: 5px;
background: #f8d7da;
border: 1px solid #f5c6cb;
margin-bottom: 10px;
display: none;
}
.form form .name-details{
display: flex;
}
.form .name-details .field:first-child{
margin-right: 10px;
}
.form .name-details .field:last-child{
margin-left: 10px;
}
.form form .field{
display: flex;
margin-bottom: 10px;
flex-direction: column;
position: relative;
}
.form form .field label{
margin-bottom: 2px;
}
.form form .input input{
height: 40px;
width: 100%;
font-size: 16px;
padding: 0 10px;
border-radius: 5px;
border: 1px solid #ccc;
}
.form form .field input{
outline: none;
}
.form form .image input{
font-size: 17px;
}
.form form .button input{
height: 45px;
border: none;
color: #fff;
font-size: 17px;
background: #333;
border-radius: 5px;
cursor: pointer;
margin-top: 13px;
}
.form form .field i{
position: absolute;
right: 15px;
top: 70%;
color: #ccc;
cursor: pointer;
transform: translateY(-50%);
}
.form form .field i.active::before{
color: #333;
content: "\f070";
}
.form .link{
text-align: center;
margin: 10px 0;
font-size: 17px;
}
.form .link a{
color: #333;
}
.form .link a:hover{
text-decoration: underline;
}
/* Users List CSS Start */
.users{
padding: 25px 30px;
}
.users header,
.users-list a{
display: flex;
align-items: center;
padding-bottom: 20px;
border-bottom: 1px solid #e6e6e6;
justify-content: space-between;
}
.wrapper img{
object-fit: cover;
border-radius: 50%;
}
.users header img{
height: 50px;
width: 50px;
}
:is(.users, .users-list) .content{
display: flex;
align-items: center;
}
:is(.users, .users-list) .content .details{
color: #000;
margin-left: 20px;
}
:is(.users, .users-list) .details span{
font-size: 18px;
font-weight: 500;
}
.users header .logout{
display: block;
background: #333;
color: #fff;
outline: none;
border: none;
padding: 7px 15px;
text-decoration: none;
border-radius: 5px;
font-size: 17px;
}
.users .search{
margin: 20px 0;
display: flex;
position: relative;
align-items: center;
justify-content: space-between;
}
.users .search .text{
font-size: 18px;
}
.users .search input{
position: absolute;
height: 42px;
width: calc(100% - 50px);
font-size: 16px;
padding: 0 13px;
border: 1px solid #e6e6e6;
outline: none;
border-radius: 5px 0 0 5px;
opacity: 0;
pointer-events: none;
transition: all 0.2s ease;
}
.users .search input.show{
opacity: 1;
pointer-events: auto;
}
.users .search button{
position: relative;
z-index: 1;
width: 47px;
height: 42px;
font-size: 17px;
cursor: pointer;
border: none;
background: #fff;
color: #333;
outline: none;
border-radius: 0 5px 5px 0;
transition: all 0.2s ease;
}
.users .search button.active{
background: #333;
color: #fff;
}
.search button.active i::before{
content: '\f00d';
}
.users-list{
max-height: 350px;
overflow-y: auto;
}
:is(.users-list, .chat-box)::-webkit-scrollbar{
width: 0px;
}
.users-list a{
padding-bottom: 10px;
margin-bottom: 15px;
padding-right: 15px;
border-bottom-color: #f1f1f1;
}
.users-list a:last-child{
margin-bottom: 0px;
border-bottom: none;
}
.users-list a img{
height: 40px;
width: 40px;
}
.users-list a .details p{
color: #67676a;
}
.users-list a .status-dot{
font-size: 12px;
color: #468669;
padding-left: 10px;
}
.users-list a .status-dot.offline{
color: #ccc;
}
/* Chat Area CSS Start */
.chat-area header{
display: flex;
align-items: center;
padding: 18px 30px;
}
.chat-area header .back-icon{
color: #333;
font-size: 18px;
}
.chat-area header img{
height: 45px;
width: 45px;
margin: 0 15px;
}
.chat-area header .details span{
font-size: 17px;
font-weight: 500;
}
.chat-box{
position: relative;
min-height: 500px;
max-height: 500px;
overflow-y: auto;
padding: 10px 30px 20px 30px;
background: #f7f7f7;
box-shadow: inset 0 32px 32px -32px rgb(0 0 0 / 5%),
inset 0 -32px 32px -32px rgb(0 0 0 / 5%);
}
.chat-box .text{
position: absolute;
top: 45%;
left: 50%;
width: calc(100% - 50px);
text-align: center;
transform: translate(-50%, -50%);
}
.chat-box .chat{
margin: 15px 0;
}
.chat-box .chat p{
word-wrap: break-word;
padding: 8px 16px;
box-shadow: 0 0 32px rgb(0 0 0 / 8%),
0rem 16px 16px -16px rgb(0 0 0 / 10%);
}
.chat-box .outgoing{
display: flex;
}
.chat-box .outgoing .details{
margin-left: auto;
max-width: calc(100% - 130px);
}
.outgoing .details p{
background: #333;
color: #fff;
border-radius: 18px 18px 0 18px;
}
.chat-box .incoming{
display: flex;
align-items: flex-end;
}
.chat-box .incoming img{
height: 35px;
width: 35px;
}
.chat-box .incoming .details{
margin-right: auto;
margin-left: 10px;
max-width: calc(100% - 130px);
}
.incoming .details p{
background: #fff;
color: #333;
border-radius: 18px 18px 18px 0;
}
.typing-area{
padding: 18px 30px;
display: flex;
justify-content: space-between;
}
.typing-area input{
height: 45px;
width: calc(100% - 58px);
font-size: 16px;
padding: 0 13px;
border: 1px solid #e6e6e6;
outline: none;
border-radius: 5px 0 0 5px;
}
.typing-area button{
color: #fff;
width: 55px;
border: none;
outline: none;
background: #333;
font-size: 19px;
cursor: pointer;
opacity: 0.7;
pointer-events: none;
border-radius: 0 5px 5px 0;
transition: all 0.3s ease;
}
.typing-area button.active{
opacity: 1;
pointer-events: auto;
}
/* Responive media query */
#media screen and (max-width: 450px) {
.form, .users{
padding: 20px;
}
.form header{
text-align: center;
}
.form form .name-details{
flex-direction: column;
}
.form .name-details .field:first-child{
margin-right: 0px;
}
.form .name-details .field:last-child{
margin-left: 0px;
}
.users header img{
height: 45px;
width: 45px;
}
.users header .logout{
padding: 6px 10px;
font-size: 16px;
}
:is(.users, .users-list) .content .details{
margin-left: 15px;
}
.users-list a{
padding-right: 10px;
}
.chat-area header{
padding: 15px 20px;
}
.chat-box{
min-height: 400px;
padding: 10px 15px 15px 20px;
}
.chat-box .chat p{
font-size: 15px;
}
.chat-box .outogoing .details{
max-width: 230px;
}
.chat-box .incoming .details{
max-width: 265px;
}
.incoming .details img{
height: 30px;
width: 30px;
}
.chat-area form{
padding: 20px;
}
.chat-area form input{
height: 40px;
width: calc(100% - 48px);
}
.chat-area form button{
width: 45px;
}
}
<html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>My Online Chat App | Hello World</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
</head><body>
<!--<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>-->
<div class="wrapper" id="wrapper">
<section class="chat-area" id="chat-area">
<header>
<div class="details">
<span>User</span>
<p>Active now</p>
</div>
</header>
<div class="chat-box">
<div class="chat incoming">
<div class="details">
<p>j</p>
</div>
</div>
<div class="chat incoming">
<div class="details">
<p>j</p>
</div>
</div>
<div class="chat incoming">
<div class="details">
<p>j</p>
</div>
</div><div class="chat incoming">
<div class="details">
<p>j</p>
</div>
</div><div class="chat incoming">
<div class="details">
<p>j</p>
</div>
</div><div class="chat incoming">
<div class="details">
<p>j</p>
</div>
</div><div class="chat incoming">
<div class="details">
<p>j</p>
</div>
</div><div class="chat outgoing">
<div class="details">
<p>tst</p>
</div>
</div><div class="chat outgoing">
<div class="details">
<p>test</p>
</div>
</div><div class="chat outgoing">
<div class="details">
<p>test</p>
</div>
</div></div>
<form action="#" class="typing-area">
<input type="text" class="incoming_id" name="incoming_id" value="340930066" hidden="">
<input type="text" name="message" class="input-field" placeholder="Type a message here..." autocomplete="off">
<button><i class="fab fa-telegram-plane"></i></button>
</form>
</section>
</div>
</body></html>
I want the <div class="wrapper"> to resize vertically when height of the device doesn't fit. So when I shrink my browser to a smaller height it will look shrink with it. Also I want the look to stay. I tried to do display: flex; but it just made everything go everywhere. I can't seem to do it. I am trying to do it with JavaScript, but it doesn't work the way it should. Changing the viewport height does not help.

Is this what you are looking for? I wasn't 100% sure from the description
The only css I added are at the bottom of the css section
.chat-area {
display: flex;
flex-direction: column;
height: 100vh;
overflow: hidden;
}
.chat-area header,
.chat-area typing-area {
flex-shrink: 0;
}
.chat-box {
flex-grow: 1;
min-height: auto;
}
The above is the only css I added, the min-height: auto; was to override your original code. Original code is not modified
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500;600;700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
font-family: 'Poppins', sans-serif;
}
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: #f7f7f7;
padding: 0 10px;
}
.wrapper {
background: #fff;
max-width: 450px;
width: 100%;
border-radius: 16px;
box-shadow: 0 0 128px 0 rgba(0, 0, 0, 0.1), 0 32px 64px -48px rgba(0, 0, 0, 0.5);
}
/* Login & Signup Form CSS Start */
.form {
padding: 25px 30px;
}
.form header {
font-size: 25px;
font-weight: 600;
padding-bottom: 10px;
border-bottom: 1px solid #e6e6e6;
}
.form form {
margin: 20px 0;
}
.form form .error-text {
color: #721c24;
padding: 8px 10px;
text-align: center;
border-radius: 5px;
background: #f8d7da;
border: 1px solid #f5c6cb;
margin-bottom: 10px;
display: none;
}
.form form .name-details {
display: flex;
}
.form .name-details .field:first-child {
margin-right: 10px;
}
.form .name-details .field:last-child {
margin-left: 10px;
}
.form form .field {
display: flex;
margin-bottom: 10px;
flex-direction: column;
position: relative;
}
.form form .field label {
margin-bottom: 2px;
}
.form form .input input {
height: 40px;
width: 100%;
font-size: 16px;
padding: 0 10px;
border-radius: 5px;
border: 1px solid #ccc;
}
.form form .field input {
outline: none;
}
.form form .image input {
font-size: 17px;
}
.form form .button input {
height: 45px;
border: none;
color: #fff;
font-size: 17px;
background: #333;
border-radius: 5px;
cursor: pointer;
margin-top: 13px;
}
.form form .field i {
position: absolute;
right: 15px;
top: 70%;
color: #ccc;
cursor: pointer;
transform: translateY(-50%);
}
.form form .field i.active::before {
color: #333;
content: "\f070";
}
.form .link {
text-align: center;
margin: 10px 0;
font-size: 17px;
}
.form .link a {
color: #333;
}
.form .link a:hover {
text-decoration: underline;
}
/* Users List CSS Start */
.users {
padding: 25px 30px;
}
.users header,
.users-list a {
display: flex;
align-items: center;
padding-bottom: 20px;
border-bottom: 1px solid #e6e6e6;
justify-content: space-between;
}
.wrapper img {
object-fit: cover;
border-radius: 50%;
}
.users header img {
height: 50px;
width: 50px;
}
:is(.users,
.users-list) .content {
display: flex;
align-items: center;
}
:is(.users,
.users-list) .content .details {
color: #000;
margin-left: 20px;
}
:is(.users,
.users-list) .details span {
font-size: 18px;
font-weight: 500;
}
.users header .logout {
display: block;
background: #333;
color: #fff;
outline: none;
border: none;
padding: 7px 15px;
text-decoration: none;
border-radius: 5px;
font-size: 17px;
}
.users .search {
margin: 20px 0;
display: flex;
position: relative;
align-items: center;
justify-content: space-between;
}
.users .search .text {
font-size: 18px;
}
.users .search input {
position: absolute;
height: 42px;
width: calc(100% - 50px);
font-size: 16px;
padding: 0 13px;
border: 1px solid #e6e6e6;
outline: none;
border-radius: 5px 0 0 5px;
opacity: 0;
pointer-events: none;
transition: all 0.2s ease;
}
.users .search input.show {
opacity: 1;
pointer-events: auto;
}
.users .search button {
position: relative;
z-index: 1;
width: 47px;
height: 42px;
font-size: 17px;
cursor: pointer;
border: none;
background: #fff;
color: #333;
outline: none;
border-radius: 0 5px 5px 0;
transition: all 0.2s ease;
}
.users .search button.active {
background: #333;
color: #fff;
}
.search button.active i::before {
content: '\f00d';
}
.users-list {
max-height: 350px;
overflow-y: auto;
}
:is(.users-list,
.chat-box)::-webkit-scrollbar {
width: 0px;
}
.users-list a {
padding-bottom: 10px;
margin-bottom: 15px;
padding-right: 15px;
border-bottom-color: #f1f1f1;
}
.users-list a:last-child {
margin-bottom: 0px;
border-bottom: none;
}
.users-list a img {
height: 40px;
width: 40px;
}
.users-list a .details p {
color: #67676a;
}
.users-list a .status-dot {
font-size: 12px;
color: #468669;
padding-left: 10px;
}
.users-list a .status-dot.offline {
color: #ccc;
}
/* Chat Area CSS Start */
.chat-area header {
display: flex;
align-items: center;
padding: 18px 30px;
}
.chat-area header .back-icon {
color: #333;
font-size: 18px;
}
.chat-area header img {
height: 45px;
width: 45px;
margin: 0 15px;
}
.chat-area header .details span {
font-size: 17px;
font-weight: 500;
}
.chat-box {
position: relative;
min-height: 500px;
max-height: 500px;
overflow-y: auto;
padding: 10px 30px 20px 30px;
background: #f7f7f7;
box-shadow: inset 0 32px 32px -32px rgb(0 0 0 / 5%), inset 0 -32px 32px -32px rgb(0 0 0 / 5%);
}
.chat-box .text {
position: absolute;
top: 45%;
left: 50%;
width: calc(100% - 50px);
text-align: center;
transform: translate(-50%, -50%);
}
.chat-box .chat {
margin: 15px 0;
}
.chat-box .chat p {
word-wrap: break-word;
padding: 8px 16px;
box-shadow: 0 0 32px rgb(0 0 0 / 8%), 0rem 16px 16px -16px rgb(0 0 0 / 10%);
}
.chat-box .outgoing {
display: flex;
}
.chat-box .outgoing .details {
margin-left: auto;
max-width: calc(100% - 130px);
}
.outgoing .details p {
background: #333;
color: #fff;
border-radius: 18px 18px 0 18px;
}
.chat-box .incoming {
display: flex;
align-items: flex-end;
}
.chat-box .incoming img {
height: 35px;
width: 35px;
}
.chat-box .incoming .details {
margin-right: auto;
margin-left: 10px;
max-width: calc(100% - 130px);
}
.incoming .details p {
background: #fff;
color: #333;
border-radius: 18px 18px 18px 0;
}
.typing-area {
padding: 18px 30px;
display: flex;
justify-content: space-between;
}
.typing-area input {
height: 45px;
width: calc(100% - 58px);
font-size: 16px;
padding: 0 13px;
border: 1px solid #e6e6e6;
outline: none;
border-radius: 5px 0 0 5px;
}
.typing-area button {
color: #fff;
width: 55px;
border: none;
outline: none;
background: #333;
font-size: 19px;
cursor: pointer;
opacity: 0.7;
pointer-events: none;
border-radius: 0 5px 5px 0;
transition: all 0.3s ease;
}
.typing-area button.active {
opacity: 1;
pointer-events: auto;
}
/* Responive media query */
#media screen and (max-width: 450px) {
.form,
.users {
padding: 20px;
}
.form header {
text-align: center;
}
.form form .name-details {
flex-direction: column;
}
.form .name-details .field:first-child {
margin-right: 0px;
}
.form .name-details .field:last-child {
margin-left: 0px;
}
.users header img {
height: 45px;
width: 45px;
}
.users header .logout {
padding: 6px 10px;
font-size: 16px;
}
:is(.users,
.users-list) .content .details {
margin-left: 15px;
}
.users-list a {
padding-right: 10px;
}
.chat-area header {
padding: 15px 20px;
}
.chat-box {
min-height: 400px;
padding: 10px 15px 15px 20px;
}
.chat-box .chat p {
font-size: 15px;
}
.chat-box .outogoing .details {
max-width: 230px;
}
.chat-box .incoming .details {
max-width: 265px;
}
.incoming .details img {
height: 30px;
width: 30px;
}
.chat-area form {
padding: 20px;
}
.chat-area form input {
height: 40px;
width: calc(100% - 48px);
}
.chat-area form button {
width: 45px;
}
}
.chat-area {
display: flex;
flex-direction: column;
height: 100vh;
overflow: hidden;
}
.chat-area header,
.chat-area typing-area {
flex-shrink: 0;
}
.chat-box {
flex-grow: 1;
min-height: auto;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>My Online Chat App | Hello World</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
</head>
<body>
<input id="hidden" type="hidden" value="7">
<div class="wrapper">
<section class="chat-area">
<header>
<i class="fas fa-arrow-left"></i>
<img src="https://sign-up-hello-world.000webhostapp.com/ChatApp/php/images/1617736821tigeer.jpg" alt="">
<div class="details">
<span>Justin Skinner</span>
<p>Active now</p>
</div>
</header>
<div class="chat-box">
<div class="chat incoming">
<img src="https://sign-up-hello-world.000webhostapp.com/ChatApp/php/images/1617736821tigeer.jpg" alt="">
<div class="details">
<p>j</p>
</div>
</div>
<div class="chat incoming">
<img src="https://sign-up-hello-world.000webhostapp.com/ChatApp/php/images/1617736821tigeer.jpg" alt="">
<div class="details">
<p>j</p>
</div>
</div>
<div class="chat incoming">
<img src="https://sign-up-hello-world.000webhostapp.com/ChatApp/php/images/1617736821tigeer.jpg" alt="">
<div class="details">
<p>j</p>
</div>
</div>
<div class="chat incoming">
<img src="https://sign-up-hello-world.000webhostapp.com/ChatApp/php/images/1617736821tigeer.jpg" alt="">
<div class="details">
<p>j</p>
</div>
</div>
<div class="chat incoming">
<img src="https://sign-up-hello-world.000webhostapp.com/ChatApp/php/images/1617736821tigeer.jpg" alt="">
<div class="details">
<p>j</p>
</div>
</div>
<div class="chat incoming">
<img src="https://sign-up-hello-world.000webhostapp.com/ChatApp/php/images/1617736821tigeer.jpg" alt="">
<div class="details">
<p>j</p>
</div>
</div>
<div class="chat incoming">
<img src="https://sign-up-hello-world.000webhostapp.com/ChatApp/php/images/1617736821tigeer.jpg" alt="">
<div class="details">
<p>j</p>
</div>
</div>
<div class="chat outgoing">
<div class="details">
<p>tst</p>
</div>
</div>
<div class="chat outgoing">
<div class="details">
<p>test</p>
</div>
</div>
<div class="chat outgoing">
<div class="details">
<p>test</p>
</div>
</div>
</div>
<form action="#" class="typing-area">
<input type="text" class="incoming_id" name="incoming_id" value="340930066" hidden="">
<input type="text" name="message" class="input-field" placeholder="Type a message here..." autocomplete="off">
<button><i class="fab fa-telegram-plane"></i></button>
</form>
</section>
</div>
<script src="javascript/chat.js"></script>
</body>
</html>

Here's how to do it with flexbox using this answer.
JSFiddle
body{
height:100vh
}
.wrapper{
height:100%;
}
.chat-area{
display: flex; /* displays flex-items (children) inline */
flex-direction: column; /* stacks them vertically */
height: 100%; /* needs to take the parents height, alternative: body {display: flex} */
}
.chat-box{
flex: 1; /* takes the remaining height of the "container" div */
overflow: auto; /* to scroll just the "main" div */
}

Multiple Event in single click javascript

Guys need some help im trying to figure out how can i execute multiple events on single click i am able to change the image on my gallery but i wanted to add some text label on each Img click i need to change each H3 and replace whenever i click the other image, i need to do a multiple event on single click
const current = document.querySelector('#current');
const imgs = document.querySelectorAll('.imgs img');
const main = document.querySelector('#main-info h3');
const info = document.querySelector('.info');
imgs.forEach(img => img.addEventListener('click', imgClick));
function imgClick(e) {
current.src = e.target.src;
}
body {
font-family: Arial, Helvetica, sans-serif;
font: 15px/1.5;
background-color: #f4f4f4;
margin: 0;
padding: 0;
}
.container {
width: 90%;
margin: auto;
overflow: hidden;
}
header {
display: flex;
justify-content: space-between;
padding-top: 5px;
background-color: #567890;
min-height: 130px;
border-bottom: 3px #e0480c solid;
padding: 0 20px 0 0;
}
header #branding {
float: left;
margin: 0;
}
header #branding img {
margin: 0;
padding: 0;
}
header ul {
margin: 0;
padding: 0;
}
header li {
display: inline;
float: left;
padding: 0 20px 0 20px;
margin-top: 50px;
}
header a {
text-decoration: none;
color: #ffffff;
text-transform: uppercase;
font-size: 16px;
}
header a:hover {
color: #b9b8b9;
opacity: 1;
}
header nav {
float: right;
padding-bottom: 50px;
}
.current a {
color: #e0480c;
font-weight: bold;
}
#showcase {
min-height: 400px;
background: linear-gradient(rgba(0, 0, 50, 0.5), rgba(0, 0, 50, 0.5)),
url(/img/enseymada.jpg) no-repeat 0 -400px;
text-align: center;
background-size: cover;
opacity: 0.9;
}
#showcase .main-info {
margin-top: 100px;
margin-bottom: 10px;
justify-content: center;
font-size: 50px;
font-weight: 600;
color: #fffcff;
}
#showcase p {
font-size: 20px;
font-weight: 200;
color: #ccc;
}
.topinfo {
text-align: center;
justify-content: center;
}
.info2 {
text-align: center;
justify-content: center;
}
footer {
width: 100%;
bottom: 0;
position: relative;
}
.foot {
background: #e24305;
color: #fff;
height: 10px;
margin: 0;
width: 100%;
text-align: center;
padding: 7px 10px;
justify-content: center;
align-items: center;
}
.main-img img,
.imgs img {
margin: auto;
width: 100%;
background: cover;
border-radius: 10%;
}
.imgs {
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 5px;
background: cover;
cursor: pointer;
}
.wrapper {
border: #444 solid 3px;
max-width: 800px;
margin: auto;
height: 100%;
padding: 5px;
align-items: center;
justify-content: center;
overflow: hidden;
}
.newsletter {
margin-bottom: 100px;
padding: 0;
width: 100%;
height: 80px;
align-items: center;
justify-content: center;
background-color: #567890;
}
.newsletter h1 {
float: left;
color: #ffffff;
}
.newsletter .btn {
display: inline;
margin: 20px 5px;
padding: 10px;
background-color: #444;
color: #fff;
border: none;
}
.newsletter #subscribe {
padding: 10px;
margin-left: 10px;
border: none;
}
<div class="wrapper">
<div class="main-img">
<h3 id="main-info">Classic Enseymada</h3>
<img src="img/image2.jpg" id="current">
</div>
<div class="imgs">
<img src="img/image2.jpg">
<div class="info">
<img src="img/image3.jpg">
<h3>Nuttela</h3>
</div>
<img src="img/image4.jpg">
<img src="img/image6.jpg">
<img src="img/image7.jpg">
<img src="img/image8.jpg">
</div>
</div>
<footer><div class="foot">Copyright &copy Abby Cook's 2020</div></footer>
<script src="./js/main.js"></script>
</body>
</html>

I am assuming that you want to pass more arguments to your imgClick function.
One way to do it is to use anonymous functions, something like this should do the trick :
imgs.forEach(img => img.addEventListener('click', function(e){
imgClick(e, 'param1', 'param2',);
}));
function imgClick(e, param1, param2,) {
current.src = e.target.src;
// your code
}
Add then your code in the function.

Give user ablity to click on images and upload their own picture

I have a profile page consisting of two people. I want users to be able to click on one of two images and upload their own image to one of the image frames
textarea {
border: none;
overflow: auto;
outline: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
:root {
font-size: 10px;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
sans-serif;
min-height: 100vh;
background-color: #fafafa;
color: #262626;
padding-bottom: 3rem;
}
img {
display: block;
}
.container {
width: 400px;
margin-left: auto;
margin-right: auto;
max-width: 93.5rem;
margin: 0 auto;
padding: 0 2rem;
}
.btn {
display: inline-block;
font: inherit;
background: none;
border: none;
color: inherit;
padding: 0;
cursor: pointer;
}
.btn:focus {
outline: 0.5rem auto #4d90fe;
}
.visually-hidden {
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
}
/* Profile Section */
.profile {
padding: 5rem 0;
}
.profile::after {
content: "";
display: block;
clear: both;
}
.profile-user-settings,
.profile-stats,
.profile-bio {
float: left;
width: calc(66.666% - 2rem);
}
.profile-user-settings {
margin-top: 1.1rem;
}
.profile-user-name {
display: inline-block;
font-size: 3.2rem;
font-weight: 300;
}
.profile-edit-btn {
font-size: 1.4rem;
line-height: 1.8;
border: 0.1rem solid #dbdbdb;
border-radius: 0.3rem;
padding: 0 2.4rem;
margin-left: 2rem;
}
.profile-stats li {
display: inline-block;
font-size: 1.6rem;
line-height: 1.5;
margin-right: 4rem;
cursor: pointer;
}
.profile-stats li:last-of-type {
margin-right: 0;
}
.profile-real-name,
.profile-stat-count,
.profile-edit-btn {
font-weight: 600;
}
/* Gallery Section */
.gallery {
display: flex;
flex-wrap: wrap;
margin: -1rem -1rem;
padding-bottom: 3rem;
}
.gallery-item {
position: relative;
flex: 1 0 22rem;
margin: 1rem;
color: #fff;
cursor: pointer;
}
.gallery-item:hover .gallery-item-info,
.gallery-item:focus .gallery-item-info {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.3);
}
.gallery-item-info {
display: none;
}
.gallery-item-info li {
display: inline-block;
font-size: 1.7rem;
font-weight: 600;
}
.gallery-item-likes {
margin-right: 2.2rem;
}
.gallery-item-type {
position: absolute;
top: 1rem;
right: 1rem;
font-size: 2.5rem;
text-shadow: 0.2rem 0.2rem 0.2rem rgba(0, 0, 0, 0.1);
}
.fa-clone,
.fa-comment {
transform: rotateY(180deg);
}
.gallery-image {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Media Query */
#media screen and (max-width: 40rem) {
.profile {
display: flex;
flex-wrap: wrap;
padding: 4rem 0;
}
.profile::after {
display: none;
}
.profile-image,
.profile-user-settings,
.profile-bio,
.profile-stats {
float: none;
width: auto;
}
.profile-user-settings {
flex-basis: calc(100% - 10.7rem);
display: flex;
flex-wrap: wrap;
margin-top: 1rem;
}
.profile-user-name {
font-size: 2.2rem;
}
.profile-edit-btn {
order: 1;
padding: 0;
text-align: center;
margin-top: 1rem;
}
.profile-edit-btn {
margin-left: 0;
}
.profile-bio {
font-size: 1.4rem;
margin-top: 1.5rem;
}
.profile-edit-btn,
.profile-bio,
.profile-stats {
flex-basis: 100%;
}
.profile-stats {
order: 1;
margin-top: 1.5rem;
}
.profile-stats ul {
display: flex;
text-align: center;
padding: 1.2rem 0;
border-top: 0.1rem solid #dadada;
border-bottom: 0.1rem solid #dadada;
}
.profile-stats li {
font-size: 1.4rem;
flex: 1;
margin: 0;
}
.profile-stat-count {
display: block;
}
}
/* Spinner Animation */
#keyframes loader {
to {
transform: rotate(360deg);
}
}
/*
#supports (display: grid) {
.profile {
display: grid;
grid-template-columns: 1fr 2fr;
grid-template-rows: repeat(3, auto);
grid-column-gap: 3rem;
align-items: center;
}
.profile-image {
grid-row: 1 / -1;
}
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
grid-gap: 2rem;
}
.profile-image,
.profile-user-settings,
.profile-stats,
.profile-bio,
.gallery-item,
.gallery {
width: auto;
margin: 0;
}
#media (max-width: 40rem) {
.profile {
grid-template-columns: auto 1fr;
grid-row-gap: 1.5rem;
}
.profile-image {
grid-row: 1 / 2;
}
.profile-user-settings {
display: grid;
grid-template-columns: auto 1fr;
grid-gap: 1rem;
}
.profile-edit-btn,
.profile-stats,
.profile-bio {
grid-column: 1 / -1;
}
.profile-user-settings,
.profile-edit-btn,
.profile-settings-btn,
.profile-bio,
.profile-stats {
margin: 0;
}
}
}
#import url(https://fonts.googleapis.com/css?family=Raleway:400,200,300,800);
#import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);
figure.snip0056 {
font-family: 'Raleway', Arial, sans-serif;
position: relative;
overflow: hidden;
margin: 10px;
min-width: 380px;
max-width: 480px;
width: 100%;
background: #ffffff;
color: #000000;
}
figure.snip0056 * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
figure.snip0056 > img {
width: 50%;
border-radius: 50%;
border: 4px solid #ffffff;
-webkit-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
-webkit-transform: scale(1.6);
transform: scale(1.6);
position: relative;
float: right;
right: -15%;
z-index: 1;
}
figure.snip0056 figcaption {
padding: 20px 30px 20px 20px;
position: absolute;
left: 0;
width: 50%;
}
figure.snip0056 figcaption h2,
figure.snip0056 figcaption p {
margin: 0;
text-align: left;
padding: 10px 0;
width: 100%;
}
figure.snip0056 figcaption h2 {
font-size: 1.3em;
font-weight: 300;
text-transform: uppercase;
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
figure.snip0056 figcaption h2 span {
font-weight: 800;
}
figure.snip0056 figcaption p {
font-size: 0.9em;
opacity: 0.8;
}
figure.snip0056 figcaption .icons {
width: 100%;
text-align: left;
}
figure.snip0056 figcaption .icons i {
font-size: 26px;
padding: 5px;
top: 50%;
color: #000000;
}
figure.snip0056 figcaption a {
opacity: 0.3;
-webkit-transition: opacity 0.35s;
transition: opacity 0.35s;
}
figure.snip0056 figcaption a:hover {
opacity: 0.8;
}
figure.snip0056 .position {
width: 100%;
text-align: left;
padding: 15px 30px;
font-size: 0.9em;
opacity: 1;
font-style: italic;
color: #ffffff;
background: #000000;
clear: both;
}
figure.snip0056.blue .position {
background: #20638f;
}
figure.snip0056.red .position {
background: #962d22;
}
figure.snip0056.yellow .position {
background: #bf6516;
}
figure.snip0056:hover > img,
figure.snip0056.hover > img {
right: -12%;
}
#import url('//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css');
#social {
position: absolute;
right: 0;
bottom: 0;
margin: 20px 10px;
text-align: center;
}
.smGlobalBtn { /* global button class */
display: inline-block;
position: relative;
cursor: pointer;
width: 50px;
height: 50px;
border:2px solid #ddd; /* add border to the buttons */
box-shadow: 0 3px 3px #999;
padding: 0px;
text-decoration: none;
text-align: center;
color: #fff;
font-size: 25px;
font-weight: normal;
line-height: 2em;
border-radius: 27px;
-moz-border-radius:27px;
-webkit-border-radius:27px;
}
/* facebook button class*/
.facebookBtn{
background: #4060A5;
}
.facebookBtn:before{ /* use :before to add the relevant icons */
font-family: "FontAwesome";
content: "\f09a"; /* add facebook icon */
}
.facebookBtn:hover{
color: #4060A5;
background: #fff;
border-color: #4060A5; /* change the border color on mouse hover */
}
/* twitter button class*/
.twitterBtn{
background: #00ABE3;
}
.twitterBtn:before{
font-family: "FontAwesome";
content: "\f099"; /* add twitter icon */
}
.twitterBtn:hover{
color: #00ABE3;
background: #fff;
border-color: #00ABE3;
}
/* instagram button class*/
.instagramBtn{
background: #4169E1;
}
.instagramBtn:before{
font-family: "FontAwesome";
content: "\f16d"; /* add instagram icon */
}
.instagramBtn:hover{
color: #00FFFF;
background: #fff;
border-color: #4169E1;
}
<div class="container">
<div class="profile">
<form action="testing.php" method="post">
<textarea name="text2" rows="2" cols=0> Family Name</textarea><br>
</form>
<button class="btn profile-edit-btn">Edit Profile</button>
</div>
<!-- End of profile section -->
</div>
<!-- End of container -->
</header>
<main>
<div class="container">
<figure class="snip0056">
<figcaption>
<textarea name="text2" rows="2" cols=0>Name(john Doe)</textarea>
<textarea name="text3" rows="8" cols=20>Bio,Social media, Favorite Quote,A letter to your partner.</textarea>
</p>
</figcaption> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sq-sample8.jpg" alt="profilepic1" id="imgClickAndChange" onclick="changeImage()" />
<div class="position">
<textarea name="text4" rows="1" cols=9>Proffession</textarea>
</div>
</h3>
</figure>
<figure class="snip0056 yellow">
<figcaption>
<textarea name="text5" rows="2" cols=0>Name(jane Doe)</textarea>
<textarea name="text6" rows="8" cols=20>Bio,Social media, Favorite Quote,A letter to your partner.</textarea>
</figcaption><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sq-sample9.jpg" alt="sample9" />
<div class="position">
<textarea name="text4" rows="1" cols=9>Title</textarea>
</figure>
<div id="social">
<a class="facebookBtn smGlobalBtn" href="https://facebook.com/ngurah.dimas.94"></a>
<a class="twitterBtn smGlobalBtn" href="https://twitter.com/ngurahdimas"></a>
<a class="instagramBtn smGlobalBtn" href="http://instagram.com/ngurahdimas_"></a>
</div>
</main>

Use label and hide the upload button
<form id='form' method='post' action='/'>
<label for='img1'>
<input id='img1' type='file' style='display: none;' />
<img id='img1_preview' src='' />
</label>
<input type='submit' value='Update' />
</form>
When you click the img, which also click on the label it will automatically trigger the input file which will pop up the upload image window, click on the submit to submit the form. It is better to use JS to capture the image and upload it using ajax though, will be more responsive.

use this code to choose a image and onclick submit button you need to process it with your baground
<form >
<label for="myfile">Select a file:</label>
<input type="file" id="myfile" name="myfile"><br><br>
<input type="submit">
</form>

save user input to database using contenteditable

I have a profile page consisting of two people. I want users to be able to edit the name section, job title, and description and store the data into a database, but im running into issues doing that with "contenteditable" tag.
Also I would like for users to be able to click the pictures and have the ability to change the image and save to database.
:root {
font-size: 10px;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
sans-serif;
min-height: 100vh;
background-color: #fafafa;
color: #262626;
padding-bottom: 3rem;
}
img {
display: block;
}
.container {
width: 400px;
margin-left: auto;
margin-right: auto;
max-width: 93.5rem;
margin: 0 auto;
padding: 0 2rem;
}
.btn {
display: inline-block;
font: inherit;
background: none;
border: none;
color: inherit;
padding: 0;
cursor: pointer;
}
.btn:focus {
outline: 0.5rem auto #4d90fe;
}
.visually-hidden {
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
}
/* Profile Section */
.profile {
padding: 5rem 0;
}
.profile::after {
content: "";
display: block;
clear: both;
}
.profile-user-settings,
.profile-stats,
.profile-bio {
float: left;
width: calc(66.666% - 2rem);
}
.profile-user-settings {
margin-top: 1.1rem;
}
.profile-user-name {
display: inline-block;
font-size: 3.2rem;
font-weight: 300;
}
.profile-edit-btn {
font-size: 1.4rem;
line-height: 1.8;
border: 0.1rem solid #dbdbdb;
border-radius: 0.3rem;
padding: 0 2.4rem;
margin-left: 2rem;
}
.profile-stats li {
display: inline-block;
font-size: 1.6rem;
line-height: 1.5;
margin-right: 4rem;
cursor: pointer;
}
.profile-stats li:last-of-type {
margin-right: 0;
}
.profile-real-name,
.profile-stat-count,
.profile-edit-btn {
font-weight: 600;
}
/* Gallery Section */
.gallery {
display: flex;
flex-wrap: wrap;
margin: -1rem -1rem;
padding-bottom: 3rem;
}
.gallery-item {
position: relative;
flex: 1 0 22rem;
margin: 1rem;
color: #fff;
cursor: pointer;
}
.gallery-item:hover .gallery-item-info,
.gallery-item:focus .gallery-item-info {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.3);
}
.gallery-item-info {
display: none;
}
.gallery-item-info li {
display: inline-block;
font-size: 1.7rem;
font-weight: 600;
}
.gallery-item-likes {
margin-right: 2.2rem;
}
.gallery-item-type {
position: absolute;
top: 1rem;
right: 1rem;
font-size: 2.5rem;
text-shadow: 0.2rem 0.2rem 0.2rem rgba(0, 0, 0, 0.1);
}
.fa-clone,
.fa-comment {
transform: rotateY(180deg);
}
.gallery-image {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Media Query */
#media screen and (max-width: 40rem) {
.profile {
display: flex;
flex-wrap: wrap;
padding: 4rem 0;
}
.profile::after {
display: none;
}
.profile-image,
.profile-user-settings,
.profile-bio,
.profile-stats {
float: none;
width: auto;
}
.profile-user-settings {
flex-basis: calc(100% - 10.7rem);
display: flex;
flex-wrap: wrap;
margin-top: 1rem;
}
.profile-user-name {
font-size: 2.2rem;
}
.profile-edit-btn {
order: 1;
padding: 0;
text-align: center;
margin-top: 1rem;
}
.profile-edit-btn {
margin-left: 0;
}
.profile-bio {
font-size: 1.4rem;
margin-top: 1.5rem;
}
.profile-edit-btn,
.profile-bio,
.profile-stats {
flex-basis: 100%;
}
.profile-stats {
order: 1;
margin-top: 1.5rem;
}
.profile-stats ul {
display: flex;
text-align: center;
padding: 1.2rem 0;
border-top: 0.1rem solid #dadada;
border-bottom: 0.1rem solid #dadada;
}
.profile-stats li {
font-size: 1.4rem;
flex: 1;
margin: 0;
}
.profile-stat-count {
display: block;
}
}
/* Spinner Animation */
#keyframes loader {
to {
transform: rotate(360deg);
}
}
/*
The following code will only run if your browser supports CSS grid.
Remove or comment-out the code block below to see how the browser will fall-back to flexbox & floated styling.
*/
#supports (display: grid) {
.profile {
display: grid;
grid-template-columns: 1fr 2fr;
grid-template-rows: repeat(3, auto);
grid-column-gap: 3rem;
align-items: center;
}
.profile-image {
grid-row: 1 / -1;
}
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
grid-gap: 2rem;
}
.profile-image,
.profile-user-settings,
.profile-stats,
.profile-bio,
.gallery-item,
.gallery {
width: auto;
margin: 0;
}
#media (max-width: 40rem) {
.profile {
grid-template-columns: auto 1fr;
grid-row-gap: 1.5rem;
}
.profile-image {
grid-row: 1 / 2;
}
.profile-user-settings {
display: grid;
grid-template-columns: auto 1fr;
grid-gap: 1rem;
}
.profile-edit-btn,
.profile-stats,
.profile-bio {
grid-column: 1 / -1;
}
.profile-user-settings,
.profile-edit-btn,
.profile-settings-btn,
.profile-bio,
.profile-stats {
margin: 0;
}
}
}
#import url(https://fonts.googleapis.com/css?family=Raleway:400,200,300,800);
#import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);
figure.snip0056 {
font-family: 'Raleway', Arial, sans-serif;
position: relative;
overflow: hidden;
margin: 10px;
min-width: 380px;
max-width: 480px;
width: 100%;
background: #ffffff;
color: #000000;
}
figure.snip0056 * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
figure.snip0056 > img {
width: 50%;
border-radius: 50%;
border: 4px solid #ffffff;
-webkit-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
-webkit-transform: scale(1.6);
transform: scale(1.6);
position: relative;
float: right;
right: -15%;
z-index: 1;
}
figure.snip0056 figcaption {
padding: 20px 30px 20px 20px;
position: absolute;
left: 0;
width: 50%;
}
figure.snip0056 figcaption h2,
figure.snip0056 figcaption p {
margin: 0;
text-align: left;
padding: 10px 0;
width: 100%;
}
figure.snip0056 figcaption h2 {
font-size: 1.3em;
font-weight: 300;
text-transform: uppercase;
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
figure.snip0056 figcaption h2 span {
font-weight: 800;
}
figure.snip0056 figcaption p {
font-size: 0.9em;
opacity: 0.8;
}
figure.snip0056 figcaption .icons {
width: 100%;
text-align: left;
}
figure.snip0056 figcaption .icons i {
font-size: 26px;
padding: 5px;
top: 50%;
color: #000000;
}
figure.snip0056 figcaption a {
opacity: 0.3;
-webkit-transition: opacity 0.35s;
transition: opacity 0.35s;
}
figure.snip0056 figcaption a:hover {
opacity: 0.8;
}
figure.snip0056 .position {
width: 100%;
text-align: left;
padding: 15px 30px;
font-size: 0.9em;
opacity: 1;
font-style: italic;
color: #ffffff;
background: #000000;
clear: both;
}
figure.snip0056.blue .position {
background: #20638f;
}
figure.snip0056.red .position {
background: #962d22;
}
figure.snip0056.yellow .position {
background: #bf6516;
}
figure.snip0056:hover > img,
figure.snip0056.hover > img {
right: -12%;
}
#import url('//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css');
#social {
position: absolute;
right: 0;
bottom: 0;
margin: 20px 10px;
text-align: center;
}
.smGlobalBtn { /* global button class */
display: inline-block;
position: relative;
cursor: pointer;
width: 50px;
height: 50px;
border:2px solid #ddd; /* add border to the buttons */
box-shadow: 0 3px 3px #999;
padding: 0px;
text-decoration: none;
text-align: center;
color: #fff;
font-size: 25px;
font-weight: normal;
line-height: 2em;
border-radius: 27px;
-moz-border-radius:27px;
-webkit-border-radius:27px;
}
/* facebook button class*/
.facebookBtn{
background: #4060A5;
}
.facebookBtn:before{ /* use :before to add the relevant icons */
font-family: "FontAwesome";
content: "\f09a"; /* add facebook icon */
}
.facebookBtn:hover{
color: #4060A5;
background: #fff;
border-color: #4060A5; /* change the border color on mouse hover */
}
/* twitter button class*/
.twitterBtn{
background: #00ABE3;
}
.twitterBtn:before{
font-family: "FontAwesome";
content: "\f099"; /* add twitter icon */
}
.twitterBtn:hover{
color: #00ABE3;
background: #fff;
border-color: #00ABE3;
}
/* instagram button class*/
.instagramBtn{
background: #4169E1;
}
.instagramBtn:before{
font-family: "FontAwesome";
content: "\f16d"; /* add instagram icon */
}
.instagramBtn:hover{
color: #00FFFF;
background: #fff;
border-color: #4169E1;
}
<div class="container">
<div class="profile">
<h1 contenteditable="true">janedoe_</h1>
<button class="btn profile-edit-btn">Edit Profile</button>
</div>
<!-- End of profile section -->
</div>
<!-- End of container -->
</header>
<main>
<div class="container">
<figure class="snip0056">
<figcaption>
<h3 contenteditable="true">Stuart <span>White</span></h3>
<h2><p contenteditable="true">I suppose if we couldn't laugh at things that don't make sense, we couldn't react to a lot of life.</h2></p>
</figcaption><img class="image1" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sq-sample8.jpg" alt="profilepic1" />
<div class="position"><h3 contenteditable="true">Web Designer</div></h3>
</figure>
<figure class="snip0056 yellow">
<figcaption>
<h3 contenteditable="true">Diana <span>Reed</span></h3>
<h2> <p contenteditable="true">The only skills I have patience to learn are those that have no real application in life.</h2></p>
</figcaption><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sq-sample9.jpg" alt="sample9" />
<div class="position"><h3 contenteditable="true">Sales Manager</div></h3>
</figure>
<div id="social">
<a class="facebookBtn smGlobalBtn" href="https://facebook.com/ngurah.dimas.94" ></a>
<a class="twitterBtn smGlobalBtn" href="https://twitter.com/ngurahdimas" ></a>
<a class="instagramBtn smGlobalBtn" href="http://instagram.com/ngurahdimas_" ></a>
</div>
</main>

Flexbox works fine in chrome but not in IE 11 [duplicate]

This question already has answers here:
flex property not working in IE
(5 answers)
Closed 6 years ago.
My website is running well with chrome but not in IE 11.It display warning.required Cross Origin Resource Sharing (CORS).All the alignment are breaking. Not looking good.
chrom screen sort
IE 11 screensort
How can I resolve the problem.
I am getting required Cross Origin Resource Sharing (CORS) on IE 11.How can I resolve this.I am using Angular2 Please help me here is my code.
details.html
<div class="content-area">
<div class="container-fluid flex-row scrollPage">
<div class="details">
<div class="brand-prop">
<div class="title">Input</div>
<div class="brand-detail">
<!-- Audit First row start-->
<div class="detail-sec" >
<h3 class="m-heading bg-color">Input files</h3>
<!--<a [routerLink]="['/dashboard', 'drilldown', activeClient,'Expected','Received']">-->
<!--<a [routerLink]="['/dashboard', 'drilldown', activeClient]" (click)="onDrillDown(tabs = ['Expected', 'Received'])">-->
<a [routerLink]="['/dashboard', 'drilldown', activeClient,'Expected','Received']">
<!--<a (click)="onDrillDown('Expected')">-->
<div class="flex-row">
<div class="flex-col-left">
<div class="number-cont">
<h4>Expected</h4>
<span class="label">{{summaryDetail?.input?.inputFile?.expected}}</span>
<span class="dollar"></span>
</div>
<div class="chart-cont">
<div class="chart lineChart"></div>
</div>
</div>
<div class="v-spacer"></div>
<div class="flex-col-right">
<div class="number-cont">
<h4>Received</h4>
<span class="label">{{summaryDetail?.input?.inputFile?.received}}</span>
<span class="dollar"></span>
</div>
<div class="chart-cont">
<div class="chart barChart"></div>
</div>
</div>
</div>
</a>
</div>
<!--Audit First row end -->
<!---My Non Parcel -->
<div class="detail-sec">
<h3 class="m-heading">New billings</h3>
<a [routerLink]="['/dashboard', 'drilldown', activeClient,'Parcel','Non Parcel']" (click)="drillDowns('Expected')">
<div class="flex-row">
<div class="flex-col-left">
<div class="number-cont">
<h4>Parcel</h4>
<span class="label">{{summaryDetail?.input?.newBilling?.parcel}}</span>
<span class="dollar"></span>
</div>
<div class="chart-cont">
<div id="parcelSparkId" class="chart lineChart"></div>
</div>
</div>
<div class="v-spacer"></div>
<div class="flex-col-right">
<div class="number-cont">
<h4>Non Parcel</h4>
<span class="label">{{summaryDetail?.input?.newBilling?.nonParcel}}</span>
<span class="dollar"></span>
</div>
<div class="chart-cont">
<div id="nonParcelSparkId" class="chart barChart"></div>
</div>
</div>
</div>
</a>
<div class="flex-row input-align">
<div class="flex-col-left">
<div class="number-cont">
<h4>Electronic</h4>
<span class="label">{{summaryDetail?.input?.newBilling?.electronic}}</span>
<span class="dollar"></span>
</div>
<div class="chart-cont">
<div id="chartElectronic" class="chart lineChart"></div>
</div>
</div>
<div class="v-spacer"></div>
<div class="flex-col-right">
<div class="number-cont">
<h4>Manual</h4>
<span class="label">{{summaryDetail?.input?.newBilling?.manual}}</span>
<span class="dollar"></span>
</div>
<div class="chart-cont">
<div id="chartManual" class="chart barChart"></div>
</div>
</div>
</div>
</div>
<div class="extra-space"></div>
<div class="detail-sec">
<div class="errors-wpr">
<div class="err-title">
<h4>ERRORS</h4>
<a (click)="navigateTo(0)">View All</a>
</div>
<div class="err-content">
<ul>
<li class="error" *ngFor="let input of inputData | limitFirstN:limit; let i = index" [routerLink]="['/dashboard', 'errors', activeClient]" (click)="navigateTo(i,activeClient)">
<i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
<span class="ellipsis">
{{input?.taskName }}
</span>
</li>
<!--<li (click)="navigateTo(0)">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh </li>
<li (click)="navigateTo(1)">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh</li>
<li (click)="navigateTo(2)">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh</li>-->
</ul>
</div>
</div>
</div>
</div>
</div><!--- /In Progress --->
</div>
</div>
details.css
.main-container{
padding: 0px;
}
.top-items-list{
padding-left: 20px;
float: left;
max-width: calc(100% - 20px);
margin-bottom: 30px;
}
.top-items-list > .logo
{
padding-top: 10px;
float: left;
width: 10%;
}
.top-items-list .data-list {
float: left;
}
.top-items-list .data-list .item {
float: left;
border-right: thin solid #DDDDDD;
position: relative;
min-width: 160px;
}
.top-items-list .data-list .item:last-child {
border-right: none;
}
.top-items-list .data-list .item .input {
font-size: 24px;
}
.top-items-list .data-list .item .input span {
font-size: 15px;
color: #878787;
}
.top-items-list .data-list .item .count {
background-color: #ee242c;
border-radius: 18px;
color: #fff !important;
float: right;
font-size: 11px !important;
height: 22px;
line-height: 22px;
text-align: center;
width: 22px;
display: block;
padding-bottom: 5px;
position: absolute;
right: 10px;
}
.content-area{ padding-top:20px;}
.content-area-full .container{ width:100%;}
.content{background-color:#fff; border-radius:3px; display:table; width:100%;}
.content-part, .more-popup{ display:table-cell; vertical-align:top;}
.details {
display: flex;
}
.brand-prop {
color:#000;
padding: 0 10px;
display: flex;
flex-direction: column;
}
.brand-prop .title{ font-size:24px; margin-bottom:20px; font-weight:300; }
.brand-prop .subheading{
font-size:13px;
font-weight:600;
}
.brand-prop .brand-detail {
background-color: #fff;
box-shadow: 0 1px 3px 0 rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 2px 1px -1px rgba(0,0,0,.12);
border-radius: 3px;
flex: 1;
display: flex;
flex-direction: column;
}
.detail-sec strong{
color:#888888;
font-weight: 400;
border-bottom: 1px solid #ddd;
}
.brand-prop .detail-sec{ padding:20px; border-bottom:1px solid #DDD; line-height:22px;}
.brand-prop .detail-sec:first-child{ padding-top:20px;}
.brand-prop .detail-sec .row{ margin-bottom:20px;}
.brand-prop .detail-sec .row:last-child{ margin-bottom: 0;}
.brand-prop .detail-sec {
color:#333;
padding-top:10px;
font-weight: 400;
&:first-child {
padding-top: 20px;
}
&.no-border {
border-bottom: none;
}
> span {
color:#333;
display:block;
}
.dollar {
font-size: 20px;
color: #999;
vertical-align: baseline;
}
span.label {
font-size: 25px;
display: inline-block;
font-weight: 400;
color:#333;
padding-left: 2px;
padding: 0;
}
}
.brand-prop .detail-sec span.viewall {
font-size: 13px;
float: right;
margin-top: -12px;
> a {
color: #87C328;
}
}
// .brand-prop .detail-sec li {
// background:url(../image2/error-list.png) left 5px no-repeat;
// background-size: 18px;
// padding-left:30px;
// padding-bottom:10px;
// font-size: 13px;
// font-family: "Open Sans", sans-serif;
// }
.extra-space {
flex: 1;
}
.extra-space + .detail-sec {
border-top: 1px solid #ddd;
}
.errors-wpr {
.err-title {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
h4 {
font-size: 14px;
font-weight: 600;
line-height: 22px;
}
> a {
color: #87C328;
font-weight: 600;
align-self: center;
font-size: 12px;
&:hover {
cursor: pointer;
}
}
}
}
.detail-sec.bg-color {
padding: 10px 20px !important;
background-color: #F9F9F9; font-weight:600;
}
.detail-sec.bg-color .row {
margin-bottom: 0;
}
.item.active-tab {
background-color:#eeeeee;
padding-bottom: 20px;
height: 63px;
position: absolute;
z-index: 100;
}
.data-list {
// max-width: 97%;
ul {
display: flex;
overflow-x: hidden;
flex-direction: row;
li {
flex: 1 1 100px;
}
}
}
.item {
background-color: #eeeeee;
display: table;
cursor: pointer;
height: 70px;
> div {
display: table-cell;
}
>.itm-wpr {
padding: 10px 20px;
background-color: #fff;
transition: display 0.9s;
img {
max-height: 16px;
}
}
>.logo {
display: none;
}
&.active {
box-shadow: none;
background-color: #eeeeee;
display: block;
>.itm-wpr {
display: none;
}
>.logo {
text-align: center;
padding: 10px 0;
display: block;
height: 100%;
img {
max-width: 150px;
}
}
}
}
/*.hover-this:hover + .graph-show-image{ display:block;}*/
.graph-show-image {
display: none;
position: absolute;
z-index: 99999; cursor:pointer;
width:100%; left:0;
}
.graph-show-image img{ width:100%;}
.screen2, .screen3{ display:none;}
.select-action, .select-action label{ float:left;}
.select-action label{ line-height:35px; margin-right:10px; font-weight:400;}
.select-action .select-style, .select-action .select-style select{ float:left; height:35px; line-height:35px; margin-bottom:0;}
.select-action .select-style select{ padding-right:20px;}
.section-details .actions{ background-color:#fff; padding:20px;}
/* reports popup */
.steps {
display: table;
width: 100%; margin:30px 0; font-weight:500;
}
.step {
display: inline-block;
text-align: center;
width: 50%; position:relative; z-index:1; float:left;
}
.step span:after {
content: "";
position: absolute; left:0;
height: 1px;
border-bottom: 1px solid #ccc;
top: 27%;
width: 100%; z-index:-1;
}
.step > span {
background-color: #ccc;
border-radius: 50%;
display: table;
font-weight: 400;
height: 30px;
line-height: 30px;
margin: 0 auto;
width: 30px;
}
.step > span.active{ background-color:#8FC058;}
.grid-table th{ padding:0;}
.grid-table th .btn{ border:0 none; min-width:0;}
.grid-table th .btn:hover{ border:0 none;}
.grid-table th .dropdown-popup{ min-width:170px;}
.grid-table th .list-items li:hover ul { display:block;}
.grid-table th .list-items ul {
background-color: #fff;
border: 1px solid #ccc;
left: 100%;
min-width: 150px;
position: absolute;
margin-top:-40px;
display:none;
}
.grid-table th.last .dropdown-popup{ margin-left:-14px;}
.grid-table th.last .list-items ul{ right:100%; left:inherit;}
#example th {
padding: 5px 10px;
}
.add-list-items .table-cell {
border: 1px solid #cccccc;
padding: 0 !important;
vertical-align: top;
width: 45% !important;
}
.add-list-items .table-cell:nth-child(2) {
border: 0 none;
width: 10% !important;
}
.add-list-items h4 {
background-color: #dfe2e7;
color: #00447f;
font-size: 14px;
font-weight: 400;
padding: 5px 10px; text-transform:uppercase;
}
.search-list {
position: relative;
}
.add-list-container{ height:210px; margin-bottom:0 !important;}
.list-options {
height: 145px;
overflow-y: scroll;
}
.add-list-items .table-cell:last-child .list-options {
height: 180px;
}
.add-remove-items{vertical-align:middle !important; text-align:center;}
.add-remove-items img{ cursor:pointer;}
.search-list > input[type="text"] {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
border-color: -moz-use-text-color -moz-use-text-color #cccccc;
border-image: none;
border-style: none none solid;
border-width: 0 0 1px;
}
.search-list > input[type="submit"] {
background: url(../images/search-icon.png) no-repeat 0 0;
border: 0 none;
height: 20px;
position: absolute;
right: 20px;
text-indent: -5000px;
top: 6px;
width: 20px;
}
.list-options li {
padding: 5px 10px; cursor:pointer;
}
.list-options li:hover, .list-options li.selected {
background-color:#EBF1F1;
}
.pager li:first-child > a, .pager li:first-child > span {
border-left: 1px solid #ddd;
}
.pager li > a:hover, .pager li > a:focus{ background-color:#fff;}
.pager li > a, .pager li > span{ border-radius:0;}
.pager{ text-align:right;}
.container-fluid{ max-width:98%;}
.detail-sec.bg-color {
padding: 10px 20px !important;
background-color: #F9F9F9;
}
.detail-sec.bg-color .row {
margin-bottom: 0;
}
.row-eq-height {
display: flex;
padding: 0 10px;
margin-bottom: 30px;
}
.detail-sec {
.m-heading {
font-size: 13px;
font-weight: 600;
margin-bottom: 20px;
line-height: 22px;
text-transform: uppercase;
}
}
.flex-row {
display: flex;
justify-content: space-between;
.subheading {
margin-bottom: 20px;
}
h4 {
color: #888888;
font-weight: 400;
font-size: 14px;
font-family: 'Open Sans', sans-serif;
margin-bottom: 10px;
}
span {
font-size: 25px;
font-weight: 400;
color: #333;
}
.flex-col {
flex: 1 1 100px;
}
}
.flex-col-left,
.flex-col-right {
display: flex;
flex-direction: row;
justify-content: space-between;
flex-basis: 40%;
> .flex-col {
flex: 1 1 50%;
.dollar {
height: 18px;
line-height: 18px;
font-weight: 400;
font-size: 12.6px;
display: inline-block;
}
&:first-child {
padding-right: 10px;
}
}
}
div.detail-sec .flex-row .lblSec {
// background-color:green;
padding-left:50px;
// width:60px;
}
.content-area {
margin-bottom: 50px;
}
.v-spacer {
width: 15px;
}
.flex-col-left, .flex-col-right {
display: flex;
flex-direction: column;
flex: 1 1;
.number-cont {
margin-bottom: 5px;
}
.chart-cont {
// text-align: center;
.chart {
padding: 20px 0px 0;
}
}
}
.chart-cont {
.chart {
// background-color: #dde6e9;
}
}
.item.active {
.logo {
display: flex;
justify-content: center;
align-items: center;
.lbl {
font-size: 18px;
}
}
}
///////////////////////////////////////////////////////////////////////////
// =========================== Task menu navigation ==================== //
///////////////////////////////////////////////////////////////////////////
$tasknav__height: 70px;
.task-nav-wpr {
width: 100%;
height: $tasknav__height;
// border: 1px solid red;
position: relative;
overflow: hidden;
&__pre, &__next {
width: 30px;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
height: $tasknav__height;
opacity: 1;
z-index: 100;
transition: all .3s ease;
&:hover {
border: 1px solid #ddd;
background-color: darken(#fff, 10%);
opacity: 1;
}
}
&__pre {
top: 0;
left: 0;
}
&__next {
top: 0;
right: 0;
}
}
.task-nav {
box-sizing: border-box;
list-style-type: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
margin: 0;
display: block;
padding: 0;
transition: all .3s ease-in-out;
&__item {
box-sizing: border-box;
width: 160px;
margin: 0;
height: 68px;
display: inline-block;
position: relative;
cursor: pointer;
}
}
////////////////////////////////////////////////////////////
// ===================== card =========================== //
////////////////////////////////////////////////////////////
.front {
display: flex;
flex-direction: column;
> * {
flex: 1;
}
}
.front-r1 {
position: relative;
display: block;
&__cc {
font-size: 18px;
padding: 5px 0 5px 15px;
}
&__ec {
position: absolute;
top: 5px;
right: 15px;
width: 20px;
height: 20px;
text-align: center;
line-height: 20px;
border-radius: 50%;
font-size: 12px;
background-color: red;
color: #fff;
}
}
.front-r2 {
position: relative;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
height: 35px;
&__cc {
font-size: 20px;
}
&__ic {
color: lighten(#000, 10%);
}
}
.back {
display: none;
justify-content: center;
align-items: center;
&__cc {
font-size: 25px;
}
}
.card {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
transition: transform .3s ease-in-out;
// box-shadow: 0 1px 3px 0 rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 2px 1px -1px rgba(0,0,0,.12);
}
.card.flipped {
border-bottom: none;
box-shadow: none;
.front {
display: none;
}
.back {
display: flex;
}
}
.card figure {
// display: block;
height: 100%;
width: 100%;
color: white;
position: absolute;
margin: 0;
// backface-visibility: hidden;
}
.card .front {
color: black;
}
.card .back {
background: #eee;
color: lighten(#000, 10%);
// transform: rotateY( 180deg );
}
// $lines-to-show:2;
// .errors-wpr {
// text-overflow:ellipsis;
// overflow: auto;
// display: block;
// }
$font-size: 26px;
$line-height: 1.4;
$lines-to-show: 2;
.errors-wpr {
display: block;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
height:230px;
position:relative;
min-width:100%;
//width: 370px;
width:27em;
.ellipsis{
display: inline-block;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
font-size: 13px;
vertical-align: bottom;
//width:33%;
width:27em;
}
}
.jqstooltip{
box-sizing: content-box;
// z-index:1;
// width:70px;
// height:25px!important;
}
.content-area {
position:relative;
top:130px;
padding-top:50px;
}
.fixed1 {
//padding-top: 20px;
display: flex;
top: 75px;
background-color: #eee;
width: 100%;
position:fixed;
}
// .scrollPage {
// max-height:calc(100vh - 111px);
// overflow-y: auto;
// }
.flex-col-right {
padding-left:14%;
}
.error {
i.fa-exclamation-triangle {
color: #f0ad4e;
}
}
.detail-sec .input-align {
margin-top:60px;
}
// .firsttab{
// margin-left:20px;
// }

Flex is not supported on IE. Use this site to check.
http://caniuse.com/#feat=flexbox