We Keep Coding

Why are these input and text parts on the right side, if they supposed to be on the center?

I have a problem whit my new project. A login system. I did it from a youtube video: https://youtu.be/cxm5bCCa9OA . Everything works perfectly, It just bothers me, that my text is right-sided instead of centered, but the YouTuber's text is fine. I think I have the same code. I think The problem might be with the form's border or the positioning of my Texts.
My Log in system:
The YouTuber's Log in system:
My code is also here:
.box {
top: 80px;
justify-content: center;
align-items: center;
position: relative;
width: 380px;
height: 420px;
background: #000000;
border-radius: 8px;
overflow: hidden;
}
.box::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 380px;
height: 420px;
background: linear-gradient(0deg, transparent, #00d8d6, #00d8d6);
transform-origin: bottom right;
animation: animate 6s linear infinite;
}
.box::after {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 380px;
height: 420px;
background: linear-gradient(0deg, transparent, #00d8d6, #00d8d6);
transform-origin: bottom right;
animation: animate 6s linear infinite;
animation-delay: -3s;
}
#keyframes animate {
/*colorwave line animation*/
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.form {
position: absolute;
inset: 3px;
border-radius: 8px;
background: #343745;
z-index: 10;
display: flex;
flex-direction: column;
}
.form h4 {
color: #7ed6df;
font-weight: 500;
text-align: center;
letter-spacing: 0.05em;
font-size: 3em;
font-style: italic;
}
.inputBox {
position: relative;
width: 300px;
margin-top: 35px;
}
.inputBox input {
position: relative;
width: 90%;
padding: 20px 10px 10px;
background: transparent;
border: none;
outline: none;
color: #535c68;
font-size: 0.5em;
letter-spacing: 0.06em;
z-index: 10;
}
.inputBox span {
position: absolute;
left: 0;
padding: 20px 0px 10px;
font-size: 0.7em;
color: #8f8f8f;
pointer-events: none;
letter-spacing: 0.03em;
}
.inputBox input:valid~span,
.inputBox input:focus~span {
color: #7ed6df;
transform: translateX(0px) translateY(-34px);
font-size: 0.7em
}
.inputBox i {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 2px;
background: #7ed6df;
border-radius: 4px;
transition: 0.5s;
pointer-events: none;
z-index: 9;
}
.inputBox input:valid~i,
.inputBox input:focus~i {
height: 40px;
}
.loglinks {
display: flex;
justify-content: space-between;
}
.loglinks a {
margin: 15px;
font-size: 0.4em;
color: #8f8f8f;
text-decoration: none;
}
.loglinks a:hover,
.loglinks a:nth-child(2) {
color: #7ed6df;
}
input[type="submit"] {
border: none;
outline: none;
background: #7ed6df;
padding: 11px 25px;
width: 100px;
margin-top: 10px;
border-radius: 4px;
font-weight: 600;
cursor: pointer;
}
input[type="submit"]:active {
opacity: 0.8;
}
<link href="https://fonts.googleapis.com/css2?family=Clicker+Script&family=IM+Fell+DW+Pica&family=Playfair+Display+SC:ital#1&family=Yeseva+One&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/f90175d7f9.js" crossorigin="anonymous"></script>
<center>
<div class="box">
<div class="form">
<h4>Log In
<h4>
<div class="inputBox">
<input type="text" required="required">
<span>Username</span>
<i></i>
</div>
<div class="inputBox">
<input type="password" required="required">
<span>Password</span>
<i></i>
</div>
<div class="loglinks">
Forgot Password
Sign up
</div>
<input type="submit" value="Enter">
</div>
</div>
</center>

To center those inputs you may add a margin-left and a margin-right of auto to .inputBox. Or simply change this:
.inputBox {
position: relative;
width: 300px;
margin-top: 35px; /** change this */
}
into this:
.inputBox {
position: relative;
width: 300px;
margin: 35px auto 0; /** into that */
/**
* the above rule means:
* - 35px as margin top
* - left and right margins set to "auto" which horizontally centers your ".inputBox"
* - 0px as margin bottom
*/
}
And here's a live demo (made some changes to your code because you had some tags that were not closed)
.box {
top: 80px;
justify-content: center;
align-items: center;
position: relative;
width: 380px;
height: 420px;
background: #000000;
border-radius: 8px;
overflow: hidden;
}
.box::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 380px;
height: 420px;
background: linear-gradient(0deg, transparent, #00d8d6, #00d8d6);
transform-origin: bottom right;
animation: animate 6s linear infinite;
}
.box::after {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 380px;
height: 420px;
background: linear-gradient(0deg, transparent, #00d8d6, #00d8d6);
transform-origin: bottom right;
animation: animate 6s linear infinite;
animation-delay: -3s;
}
#keyframes animate {
/*colorwave line animation*/
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.form {
position: absolute;
inset: 3px;
border-radius: 8px;
background: #343745;
z-index: 10;
display: flex;
flex-direction: column;
}
.form h4 {
color: #7ed6df;
font-weight: 500;
text-align: center;
letter-spacing: 0.05em;
font-size: 3em;
font-style: italic;
}
.inputBox {
position: relative;
width: 300px;
margin: 35px auto 0;
}
.inputBox input {
position: relative;
width: 90%;
padding: 20px 10px 10px;
background: transparent;
border: none;
outline: none;
color: #535c68;
font-size: 0.5em;
letter-spacing: 0.06em;
z-index: 10;
}
.inputBox span {
position: absolute;
left: 0;
padding: 20px 0px 10px;
font-size: 0.7em;
color: #8f8f8f;
pointer-events: none;
letter-spacing: 0.03em;
}
.inputBox input:valid~span,
.inputBox input:focus~span {
color: #7ed6df;
transform: translateX(0px) translateY(-34px);
font-size: 0.7em
}
.inputBox i {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 2px;
background: #7ed6df;
border-radius: 4px;
transition: 0.5s;
pointer-events: none;
z-index: 9;
}
.inputBox input:valid~i,
.inputBox input:focus~i {
height: 40px;
}
.loglinks {
display: flex;
justify-content: space-between;
}
.loglinks a {
margin: 15px;
font-size: 0.4em;
color: #8f8f8f;
text-decoration: none;
}
.loglinks a:hover,
.loglinks a:nth-child(2) {
color: #7ed6df;
}
input[type="submit"] {
border: none;
outline: none;
background: #7ed6df;
padding: 11px 25px;
width: 100px;
margin-top: 10px;
border-radius: 4px;
font-weight: 600;
cursor: pointer;
}
input[type="submit"]:active {
opacity: 0.8;
}
<link href="https://fonts.googleapis.com/css2?family=Clicker+Script&family=IM+Fell+DW+Pica&family=Playfair+Display+SC:ital#1&family=Yeseva+One&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/f90175d7f9.js" crossorigin="anonymous"></script>
<div class="box">
<div class="form">
<h4>Log In</h4>
<div class="inputBox">
<input type="text" required="required">
<span>Username</span>
<i></i>
</div>
<div class="inputBox">
<input type="password" required="required">
<span>Password</span>
<i></i>
</div>
<div class="loglinks">
Forgot Password
Sign up
</div>
<input type="submit" value="Enter">
</div>
</div>

Compared to the video, you are missing a padding: 50px 40px; in the .form part.
Try replacing your .form css with this:
.form {
position: absolute;
inset: 3px;
border-radius: 8px;
background: #343745;
z-index: 10;
padding: 50px 40px;
display: flex;
flex-direction: column;
}
UPDATE: furthermore, there is an issue with the <h4> tag which is opened twice. Maybe you should have <h4>Log In</h4>.

Hack for adding images in 'select' list of html

I want to add the images to my select list using only HTML CSS JS. (no library) I know the browsers don't support the images inside dropdown i.e., the select option of HTML.
Is there any way around/a hack to achieve this?
A: How it should look like before the user clicks on the dropdown.
B: How it should look like after the user clicks on the dropdown.
A:
B:
I tried using,
HTML
<select class="dropdown" name="payment-provider" id="payment-provider" form="payment">
<option value="BitCoin">BTC</option>
<option value="Ethereum">ETH</option>
<option value="Cardano">ADA</option>
<option value="Tether">USDT</option>
</select>
CSS
select#payment-provider option[value="BitCoin"] {
background: url(/_assets/images/svg/BTC.svg) no-repeat right;
width: 22px;
height: 22px;
}
But this code was only supported by the Firefox browser, however even Firefox has now withdraw this support.
Will appriciate the help.
Thanks

Check the snippet below. I created a custom component using UL>LI.
var placeholder = document.getElementById('placeholder');
var dropdown = document.getElementById('custom-select');
placeholder.addEventListener('click', function() {
if(dropdown.classList.contains('active')) {
dropdown.classList.remove('active')
} else {
dropdown.classList.add('active')
}
})
.custom-select .dropdown {
list-style: none;
padding: 0;
display: none;
}
.dropdown .img-wrapper,
.placeholder .img-wrapper {
display: inline-block;
max-width: 30px;
}
.dropdown img,
.placeholder img {
max-width: 100%;
}
.placeholder {
display: flex;
align-items: center;
padding: 10px;
cursor: pointer;
position: relative;
}
.placeholder::before,
.placeholder::after {
content: "";
display: inline-block;
height: 2px;
width: 10px;
background-color: #aaa;
position: absolute;
right: 0;
}
.placeholder::before {
transform: rotate(45deg);
right: 20px;
}
.placeholder::after {
transform: rotate(-45deg);
right: 15px;
}
.custom-select.active .placeholder::after {
right: 20px;
}
.custom-select.active .placeholder::before {
right: 15px;
}
.custom-select.active .dropdown {
display: flex;
flex-direction: column;
box-shadow: 1px 1px 6px 1px #ddd;
position: absolute;
top: 40px;
right: 0;
left: 0;
min-width: 200px;
}
.dropdown li {
display: flex;
align-items: center;
background-color: #fff;
padding: 10px;
transition: all 0.3s ease;
cursor: pointer;
}
.dropdown li:not(:last-child) {
border-bottom: 1px solid #aaa;
}
.dropdown li:hover {
box-shadow: 0px 0px 11px 1px rgba(182, 182, 182, 0.75) inset;
}
.custom-select {
display: inline-flex;
flex-direction: column;
position: relative;
width: 100px;
}
input {
border: 0;
outline: none;
box-shadow: none;
width: 40px;
display: inline-block;
height: 30px;
text-align: right;
}
.wrapper {
display: inline-flex;
position: relative;
border: 1px solid #ddd;
border-radius: 5px;
margin-top: 50px;
align-items: center;
}
.input-label {
position: absolute;
background-color: #fff;
top: -6px;
display: inline-block;
left: 10px;
padding: 0 5px;
color: #aaa;
}
<section class="wrapper">
<label for="" class="input-label">You Receive</label>
<input type="number" readonly value=".32" />
<div class="custom-select" id="custom-select">
<span id="placeholder" class="placeholder">
<span class="img-wrapper">
<img src="https://pngimg.com/uploads/bitcoin/bitcoin_PNG48.png" />
</span>
<span class="text"> BTC</span>
</span>
<ul class="dropdown" id="dropdown">
<li class="dd-item">
<span class="img-wrapper">
<img src="https://pngimg.com/uploads/bitcoin/bitcoin_PNG48.png" />
</span>
<span class="text">Bitcoin (BTC)</span>
</li>
<li class="dd-item">
<span class="img-wrapper">
<img src="https://cryptologos.cc/logos/ethereum-eth-logo.png" />
</span>
<span class="text">Ethereum (ETH)</span>
</li>
<li class="dd-item">
<span class="img-wrapper">
<img src="https://cryptologos.cc/logos/cardano-ada-logo.png" />
</span>
<span class="text">Cardano (ADA)</span>
</li>
</ul>
</div>
</section>

Why is my automatic chatbox not showing up?

So when i click "chat with us", the full chat box must appear but it doesn't. The console announces mistake as:'Uncaught TypeError: Cannot read property 'style' of null
at HTMLButtonElement. '
Anything wrong with my codes? somebody can help me? Thank you so much!
This is my html:
<!DOCTYPE html>
<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>Snake</title>
<link rel="stylesheet" href="chat.css">
<script src="https://kit.fontawesome.com/48a972c999.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="chat-bar-collapsible">
<button id="chat-bar-button" type="button" class="collapsible">Chat With Us!
<i id="chat-icon" style="color: #fff;" class="fas fa-fw fa-comment-o"></i>
</button>
</div>
<div class="content">
<div class="full-chat-block">
<!--Mesage Container-->
<div class="outer-container">
<div class="container">
<!--Messages-->
<div id="chatbox">
<h5 id="chat-timestamp"></h5>
<p id="botStarterMessages " class="botText"><span>loading...</span></p>
</div>
<!--User Input Box-->
<div class="chat-bar-input-block">
<div id="user-input">
<input type="text" id="textInput" class="input-box" placeholder="Tap 'enter' to send a mesage" />
<p></p>
</div>
<div class="chat-bar-icons">
</div>
</div>
</div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
</html>
This is my css:
.chat-bar-collapsible {
position: fixed;
bottom: 0;
right: 50px;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
.collapsible {
background-color: rgb(82, 151, 255);
color: white;
cursor: pointer;
padding: 18px;
width: 350px;
text-align: left;
outline: none;
font-size: 18px;
border-radius: 10px 10px 0px 0px;
border: 3px solid white;
border-bottom: none;
}
.content {
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
background-color: #f1f1f1;
}
.full-chat-block {
width: 350px;
background: white;
text-align: center;
overflow: auto;
scrollbar-width: none;
height: max-content;
transition: max-height 0.2s ease-out;
}
.outer-container {
min-height: 500px;
bottom: 0%;
position: relative;
}
.chat-container {
max-height: 500px;
width: 100%;
position: absolute;
bottom: 0;
left: 0;
scroll-behavior: smooth;
hyphens: auto;
}
.chat-container::-webkit-scrollbar {
display: none;
}
.chat-bar-input-block {
display: flex;
float: left;
box-sizing: border-box;
justify-content: space-between;
width: 100%;
align-items: center;
background-color: rgb(235, 235, 235);
border-radius: 10px 10px 0px 0px;
padding: 10px 0px 10px 10px;
}
.chat-bar-icons {
display: flex;
justify-content: space-evenly;
box-sizing: border-box;
width: 25%;
float: right;
font-size: 20px;
}
#chat-icon:hover {
opacity: .7;
}
/* Chat bubbles */
#userInput {
width: 75%;
}
.input-box {
float: left;
border: none;
box-sizing: border-box;
width: 100%;
border-radius: 10px;
padding: 10px;
font-size: 16px;
color: #000;
background-color: white;
outline: none
}
.userText {
color: white;
font-family: Helvetica;
font-size: 16px;
font-weight: normal;
text-align: right;
clear: both;
}
.userText span {
line-height: 1.5em;
display: inline-block;
background: #5ca6fa;
padding: 10px;
border-radius: 8px;
border-bottom-right-radius: 2px;
max-width: 80%;
margin-right: 10px;
animation: floatup .5s forwards
}
.botText {
color: #000;
font-family: Helvetica;
font-weight: normal;
font-size: 16px;
text-align: left;
}
.botText span {
line-height: 1.5em;
display: inline-block;
background: #e0e0e0;
padding: 10px;
border-radius: 8px;
border-bottom-left-radius: 2px;
max-width: 80%;
margin-left: 10px;
animation: floatup .5s forwards
}
#keyframes floatup {
from {
transform: translateY(14px);
opacity: .0;
}
to {
transform: translateY(0px);
opacity: 1;
}
}
#media screen and (max-width:600px) {
.full-chat-block {
width: 100%;
border-radius: 0px;
}
.chat-bar-collapsible {
position: fixed;
bottom: 0;
right: 0;
width: 100%;
}
.collapsible {
width: 100%;
border: 0px;
border-top: 3px solid white;
border-radius: 0px;
}
}
This is my JS:
var coll = document.getElementsByClassName('collapsible')
for (let i = 0; i < coll.length; i++) {
coll[i].addEventListener('click', function() {
this.classList.toggle('active')
var content = this.nextElementSibling
if (content.style.maxHeight) {
content.style.maxHeight = null
} else {
content.style.maxHeight = content.scrollHeight + "px"
}
})
}

Using .nextSibling will look directly for the next child element under your parent div. Since this refers to your button inside of chat-bar-collapsible there are no more child elements that are adjacent to your button element under the char-bar-collapsible div. You need to walk up to the parent element using .parentNode, and then access the adjacent content div from that using .nextElementSibling:
var content = this.parentNode.nextElementSibling;
var coll = document.getElementsByClassName('collapsible');
for (let i = 0; i < coll.length; i++) {
coll[i].addEventListener('click', function() {
this.classList.toggle('active');
var content = this.parentNode.nextElementSibling;
if (content.style.maxHeight) {
content.style.maxHeight = null
} else {
content.style.maxHeight = content.scrollHeight + "px"
}
})
}
.chat-bar-collapsible {
position: fixed;
bottom: 0;
right: 50px;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
.collapsible {
background-color: rgb(82, 151, 255);
color: white;
cursor: pointer;
padding: 18px;
width: 350px;
text-align: left;
outline: none;
font-size: 18px;
border-radius: 10px 10px 0px 0px;
border: 3px solid white;
border-bottom: none;
}
.content {
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
background-color: #f1f1f1;
}
.full-chat-block {
width: 350px;
background: white;
text-align: center;
overflow: auto;
scrollbar-width: none;
height: max-content;
transition: max-height 0.2s ease-out;
}
.outer-container {
min-height: 500px;
bottom: 0%;
position: relative;
}
.chat-container {
max-height: 500px;
width: 100%;
position: absolute;
bottom: 0;
left: 0;
scroll-behavior: smooth;
hyphens: auto;
}
.chat-container::-webkit-scrollbar {
display: none;
}
.chat-bar-input-block {
display: flex;
float: left;
box-sizing: border-box;
justify-content: space-between;
width: 100%;
align-items: center;
background-color: rgb(235, 235, 235);
border-radius: 10px 10px 0px 0px;
padding: 10px 0px 10px 10px;
}
.chat-bar-icons {
display: flex;
justify-content: space-evenly;
box-sizing: border-box;
width: 25%;
float: right;
font-size: 20px;
}
#chat-icon:hover {
opacity: .7;
}
/* Chat bubbles */
#userInput {
width: 75%;
}
.input-box {
float: left;
border: none;
box-sizing: border-box;
width: 100%;
border-radius: 10px;
padding: 10px;
font-size: 16px;
color: #000;
background-color: white;
outline: none
}
.userText {
color: white;
font-family: Helvetica;
font-size: 16px;
font-weight: normal;
text-align: right;
clear: both;
}
.userText span {
line-height: 1.5em;
display: inline-block;
background: #5ca6fa;
padding: 10px;
border-radius: 8px;
border-bottom-right-radius: 2px;
max-width: 80%;
margin-right: 10px;
animation: floatup .5s forwards
}
.botText {
color: #000;
font-family: Helvetica;
font-weight: normal;
font-size: 16px;
text-align: left;
}
.botText span {
line-height: 1.5em;
display: inline-block;
background: #e0e0e0;
padding: 10px;
border-radius: 8px;
border-bottom-left-radius: 2px;
max-width: 80%;
margin-left: 10px;
animation: floatup .5s forwards
}
#keyframes floatup {
from {
transform: translateY(14px);
opacity: .0;
}
to {
transform: translateY(0px);
opacity: 1;
}
}
#media screen and (max-width:600px) {
.full-chat-block {
width: 100%;
border-radius: 0px;
}
.chat-bar-collapsible {
position: fixed;
bottom: 0;
right: 0;
width: 100%;
}
.collapsible {
width: 100%;
border: 0px;
border-top: 3px solid white;
border-radius: 0px;
}
}
<script src="https://kit.fontawesome.com/48a972c999.js" crossorigin="anonymous"></script>
<div class="chat-bar-collapsible">
<button id="chat-bar-button" type="button" class="collapsible">Chat With Us!<i id="chat-icon" style="color: #fff;" class="fas fa-fw fa-comment-o"></i></button>
</div>
<div class="content">
<div class="full-chat-block">
<!--Mesage Container-->
<div class="outer-container">
<div class="container">
<!--Messages-->
<div id="chatbox">
<h5 id="chat-timestamp"></h5>
<p id="botStarterMessages " class="botText"><span>loading...</span></p>
</div>
<!--User Input Box-->
<div class="chat-bar-input-block">
<div id="user-input">
<input type="text" id="textInput" class="input-box" placeholder="Tap 'enter' to send a mesage" />
<p></p>
</div>
<div class="chat-bar-icons">
</div>
</div>
</div>
</div>
</div>
</div>

CSS not applying to newly added elements through Javascript

I'm adding a new <div> to the page on button click. The problem is that the styling isn't applying to the new div, well to parts of it, mainly the inner divs which is where i need it. I have looked at some questions and tried using escape charaters but nothing seems to work.
The styling works if the div is there when the page loads.
The javascript to add the div:
AddNewSection: function () {
var me = IndexController;
$("#addNew").before('<div id="New' + me.options.count + '" class="block center">\
<div style="width:100%;flex:1;display:inline-flex" >\
<div class="group">\
<input id="Question' + me.options.count + '" type="text" class="inputHighlight">\
<span class="bar"></span>\
<label class="labelHighlight">Question</label>\
</div>\
<div class="group">\
<label>Type</label>\
</div>\
<div class="group">\
<input id="Drop'+ me.options.count + '" value="1" />\
</div>\
</div>\
<div id="TypeDiv'+ me.options.count + '">\
</div>\
</div>');
me.CreateDropDown(me.options.count);
me.options.count++;
},
The div that is hardcoded on the page:
<div id="New1" class="block center">
<div style="width:100%;flex:1;display:inline-flex">
<div class="group">
<input id="Question1" type="text" class="inputHighlight" required>
<span class="bar"></span>
<label class="labelHighlight">Question</label>
</div>
<div class="group">
<label>Type</label>
</div>
<div class="group">
<input id="Drop1" value="1" />
</div>
</div>
<div id="TypeDiv1">
</div>
CSS
<style>
p {
margin: 10px;
}
body {
background: white;
min-height: 100%;
}
#Page {
position: relative;
padding: 5px 10px;
background-color: whitesmoke;
margin: 60px auto;
font: normal 12px/21px sans-serif;
color: #444;
}
#Page.wide {
width: 70%;
}
#Page.narrow {
width: 30%;
}
#Page:before, #Page:after {
content: '';
position: absolute;
left: 0;
box-shadow: 0 0 10px black;
border-radius: 50%;
width: 100%;
height: 20px;
display: none;
}
#Page.top-shadow:before {
display: block;
top: 0px;
clip: rect(-40px auto 0 auto);
}
#Page.bottom-shadow:after {
display: block;
bottom: 0px;
clip: rect(20px auto 40px auto);
}
.AddNew {
width: 90%;
height: 100px;
border: thin solid #ddd;
flex: 1;
text-align: center;
}
.center {
margin: 15px auto 15px;
padding: 10px;
}
.block {
width: 90%;
height: 150px;
border: thin solid #ddd;
flex: 1;
text-align: center;
}
.block.center {
margin: 15px auto 15px;
padding: 10px;
}
.group {
position: relative;
margin-bottom: 45px;
}
.inputHighlight {
font-size: 18px;
padding: 10px 10px 5px 5px;
display: block;
width: 300px;
border: none;
border-bottom: 1px solid #757575;
}
.inputHighlight:focus {
outline: none;
}
/* LABEL ======================================= */
.labelHighlight {
color: #999;
font-size: 18px;
font-weight: normal;
position: absolute;
pointer-events: none;
left: 5px;
top: 10px;
transition: 0.2s ease all;
-moz-transition: 0.2s ease all;
-webkit-transition: 0.2s ease all;
}
/* active state */
.inputHighlight:focus ~ .labelHighlight, .inputHighlight:valid ~ .labelHighlight {
top: -10px;
font-size: 14px;
color: #5264AE;
}
/* BOTTOM BARS ================================= */
.bar {
position: relative;
display: block;
width: 300px;
}
.bar:before, .bar:after {
content: '';
height: 2px;
width: 0;
bottom: 1px;
position: absolute;
background: #5264AE;
transition: 0.2s ease all;
-moz-transition: 0.2s ease all;
-webkit-transition: 0.2s ease all;
}
.bar:before {
left: 50%;
}
.bar:after {
right: 50%;
}
/* active state */
.inputHighlight:focus ~ .bar:before, .inputHighlight:focus ~ .bar:after {
width: 50%;
}
The output:
Let me know if you need anything else.
Thank you in davance.

Make onClick button overlap content with a div

So I need some help with overlapping content on page when a button is being pressed. Right now I have a function for an active button which helps me with opening a div(div panel) and closing it. I just want to know how you would go about making this div panel stetch across the page, when the button is being pressed.
I made it work with the overlap with a function by making my container active but I realised that it was completely wrong and had to change it. So right now (as I said before) I have active buttons.
Try to make it work through my current function with the buttonS, but nothing really changed. Maybe some z-index? Check the code out.
Any suggestions?
Thanks!
Here's the code:
<!--Accordion script-->
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function() {
this.nextElementSibling.classList.toggle("show");
}
}
//active container overlap
$('button').click(function(event) {
$(this).toggleClass('active');
})
//onClose function and refresh function
//var inFormOrLink;
//$('a').on('click', function() { inFormOrLink = true; });
//$('form').on('submit', function() { inFormOrLink = true; });
//$(window).on("beforeunload", function() {
//return inFormOrLink ? "Do you really want to close?" : null;
//})
body {
width: 100% margin: 0 auto;
}
.container {
width: 45%;
height: 90%;
position: absolute;
margin-top: 2%;
margin-left: 27%;
background-color: #FAF3E9;
}
#header {
width: 100%;
height: 10%;
background-color: #fff;
}
/*Del 1*/
.d1knapp button {
background-color: #fff;
cursor: pointer;
padding: 18px;
width: 70%;
border: none;
text-align: left;
outline: none;
align-items: center;
margin-top: 3%;
margin-left: 15%;
}
.nextstep button {
background-color: #EE7024;
color: #fff;
cursor: pointer;
padding: 5px;
width: 100%;
border: none;
text-align: center;
outline: none;
margin-top: 16.5%;
}
/*Del 1 slut*/
/*Del 2*/
.box {
width: 70%;
font-size: large;
color: #17202A;
outline: none;
border: none;
padding: 12px;
border: 1px solid grey;
margin-left: 11%;
margin-top: none;
border-radius: 8px;
}
#datum {
width: 80%;
margin: -2% 11%;
}
.datumStart {
width: 30%;
float: left;
padding: 1px;
}
.datumSlut {
width: 30%;
padding: 1px;
float: left;
margin-left: 35%;
}
.skapa button {
background-color: #EE7024;
color: #fff;
cursor: pointer;
padding: 5px;
width: 100%;
border: none;
text-align: center;
outline: none;
margin-top: 5%;
}
/*Del 2 slut*/
/* Del 3 */
button.accordion {
background-color: #fff;
color: #444;
cursor: pointer;
padding: 12px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
margin-top: 2%;
}
button,
.accordion h3 {
text-align: center;
}
button.accordion.active,
button.accordion:hover {
background-color: #ddd;
}
div.panel {
padding: 0 18px;
background-color: #FAF3E9;
max-height: 0;
overflow: hidden;
transition: 0.4s ease-in-out;
opacity: 0;
text-align: center;
}
div.panel.show {
opacity: 1;
max-height: 700px;
}
.container div.active {
height: 91%;
margin-top: 9%;
margin-bottom: 5%;
background-color: #FAF3E9;
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 2;
transition-duration: 0.2s;
align-items: center;
text-align: center;
}
#savechanges button {
background-color: #EE7024;
color: #fff;
cursor: pointer;
padding: 5px;
width: 45%;
border: none;
text-align: center;
outline: none;
margin-top: 16.5%;
position: fixed;
}
#addfiles button {
background-color: #158F49;
color: #fff;
cursor: pointer;
padding: 5px;
width: 100%;
border: none;
text-align: center;
outline: none;
margin-top: 16.5%;
}
/* Del 3 slut */
/* Media del 1 */
#media only screen and (max-width: 768px) {
body {
width: 100%;
margin: 0 auto;
}
.container {
width: 80%;
margin: 7% 11%;
}
/* Del 1 */
.d1knapp button {
width: 100%;
align-items: center;
margin-left: 0;
margin-top: 6%;
position: relative;
}
.nextstep button {
position: relative;
width: 100%;
margin-top: 17%;
}
/* Del 1 slut */
/* Del 2 */
#datum {
float: left;
}
.skapa button {
position: relative;
width: 100%;
margin-top: 10%;
}
/* Del 2 slut */
/* Del 3 */
/* Del 3 slut */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div id="header">
<img class="logo" src="logo.png">
<!--<span style="color: blue; float: right; text-decoration: underline; text-align: center; margin-right: 5%; margin-top: 0.5%; font-family:Arial,serif;"><h3>English</h3></span>-->
</div>
<div class="dokumentation">
<button class="accordion"><h3>Dokumentation</h3> </button>
<div class="panel">
<h1> hej </h1>
<div id="addfiles">
<button><h2>Lägg till nya filer</h2></button>
</div>
</div>
</div>
<div class="rättigheter">
<button class="accordion"><h3>Rättigheter</h3> </button>
<div class="panel">
<h1> hej </h1>
<div id="addfiles">
<button><h2>Lägg till nya filer</h2></button>
</div>
</div>
</div>
<div class="aktiviteter">
<button class="accordion"><h3>Aktiviteter</h3> </button>
<div class="panel">
<h1> hej </h1>
<div id="addfiles">
<button><h2>Lägg till nya filer</h2></button>
</div>
</div>
</div>
<div id="savechanges">
<button><h2>Spara ändringarna</h2></button>
</div>
</div>

Firstly you have an error in your css, please change body to this:
body {
width: 100%;
margin: 0 auto;
}
Next, Change your container class to this:
.container {
width: 100%;
height: 90%;
position: absolute;
margin-top: 2%;
background-color: #FAF3E9;
}
By setting width:100% each element takes up the entire width of it's parent. So setting the width to 100% for body and container should solve your problem.

As the previous answer stated, you have an error in the definition of the body style. There is a ; missing after width: 100%;
As for your question, you could solve your problem by adding position: absolute to your panels, like so:
div.panel {
padding: 0 18px;
background-color: #FAF3E9;
overflow: hidden;
transition: 0.4s ease-in-out;
opacity: 0;
text-align: center;
left: 0;
box-sizing: border-box;
position: absolute;
}
You also need to remove the max-height:0 property, to allow the div to expand to the maximum height.
Adding box-sizing: border-box; prevents the panel from adding margings or paddings to the 100% width and in so becoming bigger than their parents.
Also, adding width and height of 100% to your panels when active, makes them fill up the page:
div.panel.show {
opacity: 1;
width: 100%;
height: 100%;
}