Develop Reference

Why does my page width only stretch to 100% with "fit-content"?

I have tried looking around for this but can't seem to find a question to match my current problem. I am trying to build a mock ecommerce website to practice using React. I have a header component. I want this component to be 100% of the screen width, so that the elements inside this component shrink whenever the page shrinks. I have some global css that sets the height and width of the html and body to 100%:
html, body{
background-color: rgb(167, 72, 72);
height: 100%;
min-width: 100%;
}
I am currently facing two problems, neither of which I understand very well the causes of. When I set my header component (the outermost component) to have a width of 100%, the page shrinks correctly. But when I open up developer tools to check the responsiveness, something goes wrong so that the right side of my header is shrinking faster than the page header_shrink
I am able to fix this by setting the width of my header to "fit-content" instead of "100%". Here is what the header looks like when I shrink the page using developer tools.header_fixed But when I do it this way, the components inside of my header don't shrink correctly. For example, my search bar is supposed to decrease in width as I shrink the page, but when I use "fit-content", it just stays set to whatever size it is. search-bar-constant. When I have the width set to 100% instead of fit content, it looks the way it's supposed to search-bar-fixed.
Sorry for the long explanation, but this is the bulk of my problem. "Width: 100%" allows the items in my header component to shrink correctly, but not the component itself. And "width: fit-content" allows the outer header component to shrink correctly, but not the items inside of it.
Here is the JSX I have for reference:
import React from 'react'
import './Header.css'
import { BiSearchAlt2 as SearchIcon} from "react-icons/bi";
import {RiArrowDropDownLine as DropDownIcon} from "react-icons/ri";
import { CgProfile as Profile } from "react-icons/cg";
import { CgShoppingCart as Cart } from "react-icons/cg";
const Header = () => {
const texts = [
'ORDERS OF $5K SHIP FREE',
'FREE SHIPPING ON SELECT ITEMS: SHOP NOW',
'BUY A RIG AND YOUR ENTIRE ORDER SHIPS FREE'
];
let currentTextIndex = 0;
setInterval(() => {
const shippingDealsText = document.querySelector('.shipping-deals-text');
shippingDealsText.classList.add('out');
setTimeout(() => {
shippingDealsText.textContent = texts[currentTextIndex];
shippingDealsText.classList.remove('out');
currentTextIndex = (currentTextIndex + 1) % texts.length;
}, 1000);
}, 5000);
return (
<div className="header">
<div className="header-top">
<div className="top-logo">
<h5 className='small-logo'>LEVIATHAN</h5>
</div>
<div className="space"></div>
<div className="link-container">
<div className="link-wrap">
Gift Cards
</div>
<div className="link-wrap">
Contact Us
</div>
<div className="link-wrap">
Order Status
</div>
<div className="link-wrap">
Live Chat
</div>
</div>
</div>
<div className="header-middle">
<div className="middle-logo">
<h5 className='big-logo'>LEVIATHAN</h5>
</div>
<div className="search-container">
<div className="search-wrapper">
<input
type="text"
id="search-bar"
placeholder="Search"
className='search'
/>
<div className="search-icon-wrapper">
<SearchIcon className='search-icon'/>
</div>
</div>
</div>
<div className="shipping-deals-container">
<div className="button-container">
<div className="shipping-deals-button">
<span className="deals-text">DAILY SHIPPING DEALS </span>
</div>
</div>
<div className="text-container">
<div className="text-slideshow">
<p className="shipping-deals-text">BUY A RIG AND YOUR ENTIRE ORDER SHIPS FREE</p>
</div>
</div>
</div>
<div className="icons-right">
<Profile className='login-pic'/>
<span>Log In</span>
<Cart className='shopping-cart'/>
</div>
</div>
<div className="header-bottom">
<div className="nav-bar">
<ul className='navigation'>
<li className='menu-items'>
<a href="/" className='button drop-down red'>Shop <DropDownIcon className='drop-icon'/></a>
<a href="/" className='button'>Equipment for Crossfit</a>
<a href="/" className='button'>New Gear</a>
<a href="/" className='button'>Barbells</a>
<a href="/" className='button'>Plates</a>
<a href="/" className='button'>Rigs and Racks</a>
<a href="/" className='button'>Shoes</a>
<a href="/" className='button'>Apparel</a>
<a href="/" className='button'>3 Ships Free</a>
<a href="/" className='button'>Zeus</a>
<a href="/" className='button drop-down'>The Index</a>
</li>
</ul>
</div>
</div>
</div>
)
}
export default Header
Here is the styling I am currently applying:
.header {
min-width: 100%;
margin: 0;
padding: 0;
}
.header-top {
background-color: white;
display: flex;
height: 2.5rem;
width: 100%;
}
.top-logo {
position: relative;
margin-left: 3rem;
}
.space {
flex-grow: 1;
}
.small-logo {
padding-top: 0.5em;
position: relative;
font-size: larger;
color: rgb(133, 133, 133)
}
.link-container {
display: flex;
/*border: 1px solid red;*/
margin-right: 3rem;
}
.link-wrap {
/*border: 1px solid green;*/
font-size: 14px;
padding-left: 1rem;
padding-top: 0.75rem;
}
.link-wrap a {
text-decoration: none;
color:#666666;
cursor: pointer;
}
/* Large section of header, black background */
.header-middle {
background-color: black;
height: 7rem;
display: flex;
}
/* Big LEVIATHAN text */
.middle-logo {
/*border: 1px solid red;*/
position: relative;
margin-left: 3rem;
display: flex;
justify-content: center;
align-items: center;
cursor: co;
}
.big-logo {
font-size: 48px;
/*padding-top: 2rem;*/
position: relative;
color: white;
}
.big-logo:hover {
color: rgb(210, 0, 0);
}
.search-container {
position: relative;
width: 40%;
display: flex;
flex-basis: 60%;
margin-left: 3rem;
align-items: center;
justify-content: center;
}
/*This is what has the appearance of the search bar*/
.search-wrapper {
min-width:100%;
height: 35%;
position: relative;
background-color: white;
display: flex;
flex-basis: 50%;
}
.search-icon-wrapper {
display: flex;
justify-content: center;
align-items: center;
width: 3rem;
}
.search-icon {
color: black;
font-size: 20px;
}
/*This is the actual search bar tucked inside*/
.search {
width: 100%;
height: 100%;
border: none;
outline: none;
margin-left: 1em;
font-size: 17px;
}
.search::placeholder {
color:rgb(94, 94, 94);
}
/* This holds onto both our daily shipping deals button */
/* and our text slideshow */
.shipping-deals-container{
width: 18em;
margin-left: 2.5em;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
/*border: 2px solid rgb(136, 77, 255);*/
}
.shipping-deals-button {
width: 65%;
height: 44%;
background-color: rgb(234, 2, 2);
position: relative;
display: flex;
justify-content: center;
align-items: center;
margin-top: 1.5em;
}
.button-container {
width: 100%;
height: 50%;
/*border: 2px solid magenta;*/
}
.deals-text {
color: white;
font-size: 12px;
position: relative;
text-align: center;
align-items: stretch;
width: 100%;
}
.text-container {
/*border: 2px solid rgb(20, 182, 11);*/
width: 100%;
height: 50%;
}
.text-slideshow {
color: white;
width: 100%;
height: 50%;
font-size: 12px;
}
.shipping-deals-text {
transition: opacity 1s;
opacity: 1;
font-size: 13px;
}
.out {
opacity: 0;
transition: opacity 1s;
}
.shipping-deals-text-red{
color: red;
}
.navigation {
display: flex;
align-items:flex-start;
height: 3rem;
}
.menu-items {
height: 100%;
margin-left: 1.5rem;
padding-right: 1.5rem;
display: flex;
align-items: flex-start;
flex: 1;
}
ul {
list-style-type: none;
background-color: #333333;
}
.button {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
text-decoration: none;
color: white;
text-transform: uppercase;
white-space: nowrap;
padding: 1em;
font-weight: bold;
}
.button:hover {
color:rgb(210, 0, 0)
}
.red {
background-color: rgb(210, 0, 0);
}
.red:hover {
color: white;
}
.drop-icon {
font-size: 25px;
}
.icons-right {
height: 50%;
margin-top: 2em;
min-width: 10%;
display: flex;
justify-content: center;
align-items: center;
margin-right: 1rem;
}
.login-pic {
color: white;
font-size: 20px;
}
.shopping-cart {
color: white;
font-size: 20px;
margin-left: 1rem;
}
.icons-right span {
color: white;
margin-left: 0.5em;
}
#media (max-width: 1025px) {
.shipping-deals-container {
display: none;
}
.header-top {
display: none;
}
.header-middle {
height: 50%;
}
.search-wrapper {
border: 2px solid white;
height: 2rem;
}
.icons-right {
margin-bottom: 2rem;
}
}
I have tried altering the width of my body, and html, but nothing seems to be giving me the solution I am looking for

With width: 100% on .header it shrinks the header the way you want it. That seems to be correct actually.
The element that prevents shrinking is <li class="menu-items"></li> because of display: flex;. Flexbox is by default not wrapping (flex-wrap: nowrap;).
Add flex-wrap. wrap; and you'll see everything will shrink with fit-content or width: 100%;
Hope this helps.
On another note: You shouldn't use <li> (List-Element) as the list. Thats what <ul> (Unsorted list) is for.
It should look more like this ->
<ul>
<li>
Shop
</li>
<li>
Equipment for Crossfit
</li>
<li>
New Gear
</li>
<!-- ... -->
</ul>

I am creating css flip cards for projects using Django template tags to iterate over the cards. All of the buttons only flip the first card

As it says in the title. I know Django well, but am still getting the hang of using JS for this type of thing. I am iterating over the cards with {% for project in projects %}, and everything is showing up as it should. And, when I click the button on the first card, it flips the card perfectly. However, when I click the button of any other card, they also flip the first card as well, instead of flipping the next card itself. I think it has something to do with the id of the divs or labels, and have tried a few things but I haven't quite figured it out.
Here is the necessary HTML:
<div class="wrapper">
{% for project in projects %}
<div class="card">
<input type="checkbox" id="card1" class="more" aria-hidden="true">
<div class="content">
<div class="front"
style="background-image: url({{ project.image }})">
<div class="inner">
<h2>{{ project.title}}</h2>
<label for="card1" class="button" aria-hidden="true">
Details
</label>
</div>
</div>
<div class="back">
<div class="inner">
<div class="info">
</div>
<div class="description">
<p>{{ project.description }}</p>
</div>
<div class="location">Warsaw, Poland</div>
<div class="price">38€ / day</div>
<label for="card1" class="button return" aria-hidden="true">
<i class="fas fa-arrow-left"></i>
</label>
</div>
</div>
</div>
</div>
{% endfor %}
The CSS pertaining to the cards:
<style>
.wrapper {
display: flex;
flex-flow: row wrap;
justify-content: center;
}
.card {
width: 420px;
height: 340px;
margin: 1em;
perspective: 1500px;
}
.card .content {
position: relative;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: transform 0.8s cubic-bezier(0.75, 0, 0.85, 1);
}
.more:checked ~ .content {
transform: rotateY(180deg);
}
.front,
.back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
backface-visibility: hidden;
transform-style: preserve-3d;
border-radius: 6px;
}
.front .inner,
.back .inner {
height: 100%;
display: grid;
padding: 1.5em;
transform: translateZ(90px) scale(0.75);
}
.front {
background-color: #fff;
background-size: cover;
background-position: center center;
}
.front:after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
border-radius: 6px;
backface-visibility: hidden;
background-image: url("{{ project.image }}");
}
.front .inner {
grid-template-rows: 5fr 1fr 1fr 2fr 1fr;
justify-items: center;
}
.front h2 {
grid-row: 2;
margin-bottom: 0.3em;
text-transform: uppercase;
letter-spacing: 3px;
color: #fff;
font-weight: 500;
text-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
}
.front .rating i {
margin: 0 1px;
}
.back {
transform: rotateY(180deg);
background-color: #fff;
border: 2px solid #f0f0f0;
}
.back .inner {
grid-template-rows: 1fr 2fr 1fr 2fr 14fr 1fr 1fr;
grid-template-columns: repeat(3, auto);
grid-column-gap: 0.8em;
justify-items: center;
}
.back .info {
position: relative;
display: flex;
align-items: center;
color: #355cc9;
grid-row: 3;
}
.back .info:not(:first-of-type):before {
content: "";
position: absolute;
left: -0.9em;
height: 18px;
width: 1px;
background-color: #ccc;
}
.back .info span {
font-size: 2em;
font-weight: 700;
}
.back .info i {
font-size: 1.2em;
}
.back .info i:before {
background: linear-gradient(40deg, #355cc9, #438af3);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
}
.back .info .icon {
margin-left: 0.3em;
}
.back .info .icon span {
display: block;
margin-top: -0.25em;
font-size: 0.8em;
font-weight: 600;
white-space: nowrap;
}
.back .description {
grid-row: 5;
grid-column: 1/-1;
font-size: 0.86em;
border-radius: 5px;
font-weight: 600;
line-height: 1.4em;
overflow: auto;
color: #355cc9;
padding-right: 10px;
}
.back .location,
.back .price {
font-weight: 600;
color: #355cc9;
grid-row: 1;
font-size: 0.86em;
}
.back .location {
grid-column: 1/3;
justify-self: left;
}
.back .price {
grid-column: 3/-1;
justify-self: right;
}
.back .button {
grid-column: 1/-1;
justify-self: center;
}
.button {
grid-row: -1;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 600;
cursor: pointer;
display: block;
padding: 0 1.5em;
height: 3em;
line-height: 2.9em;
min-width: 3em;
background-color: transparent;
border: solid 2px #fff;
color: #fff;
border-radius: 4px;
text-align: center;
left: 50%;
backface-visibility: hidden;
transition: 0.3s ease-in-out;
text-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
}
.button:hover {
background-color: #fff;
box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
text-shadow: none;
color: #355cc9;
}
.button.return {
line-height: 3em;
color: #355cc9;
border-color: #355cc9;
text-shadow: none;
}
.button.return:hover {
background-color: #355cc9;
color: #fff;
box-shadow: none;
}
::-webkit-scrollbar {
width: 5px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #859ddf;
}
::-webkit-scrollbar-thumb:hover {
background: #355cc9;
}
</style>
And the javascript (I had a different jquery script at one point but this is what I've got now:
(function () {
var tab = document.querySelector('.card');
document.getElementById('card1').addEventListener('click', function () {
tab.classList.add('back');
}, false);
document.getElementById('card1').addEventListener('click', function () {
tab.classList.remove('front');
}, false);
})();
</script>
I'm not sure if anything else would be helpful, but if anybody has a good idea of what may be going on it would be incredibly helpful. This is the only snag I've hit where I've had to ask a question for my last few projects. It's just annoying. Thanks.

The reason why all buttons only flip the first card is just because your id is hardcoded with "card1", the id's value on html should be unique. The "card1" id is only targetting the first element that use the same id
<input type="checkbox" id="card1" class="more" aria-hidden="true">
You should generate dynamic id for each iteration, so for example you could generate the ids value with "card1", "card2", "card3", etc.
Same with the js
document.getElementById('card1').addEventListener('click', function () {
tab.classList.add('back');
}, false);
document.getElementById('card1').addEventListener('click', function () {
tab.classList.remove('front');
}, false);
You should create dynamic event listener for each id
See how the html id works on HTML id

So, after Dhia Aziz Rizqi confirmed my suspicion that it was, in fact, the ID that was the issue; and there wasn't any other underlying issue,I immediately went to try and dynamically call the project ID with Django inside the JS function. It worked perfectly.
I hadn't used Django template tags inside of a JS function before, so I wasn't sure how it would go, but for anyone else who happens to come across this issue...
The javascript needed to change to this:
<script>
(function () {
var tab = document.querySelector('.card');
document.getElementById('{{ project.id }}').addEventListener('click', function () {
tab.classList.add('back');
}, false);
document.getElementById('{{ project.id }}').addEventListener('click', function () {
tab.classList.remove('front');
}, false);
})();
</script>
And the HTML to this:
<div class="wrapper">
{% for project in projects %}
<div class="card">
<label for="{{ project.id }}"></label><input type="checkbox" id="{{ project.id }}" class="more" aria-hidden="true">
<div class="content">
<div class="front"
style="background-image: url({{ project.image }})">
<div class="inner">
<h2>{{ project.title}}</h2>
<label for="{{ project.id }}" class="button" aria-hidden="true">
Details
</label>
</div>
</div>
<div class="back">
<div class="inner">
<div class="info">
</div>
<div class="description">
<p>{{ project.description }}</p>
</div>
<div class="location">Warsaw, Poland</div>
<div class="price">38€ / day</div>
<label for="{{ project.id }}" class="button return" aria-hidden="true">
<i class="fas fa-arrow-left"></i>
</label>
</div>
</div>
</div>
</div>
{% endfor %}
The solution was to simply add the project ID dynamically in place of a fixed ID.
It works wonderfully with Django.

Jquery clone not functioning as expected

I am working on a program that is not functioning as I am expecting it. I have a page that allows people to add multiple links to my application, but there is something going on under the hood that is not making logical sense.
The application uses JQUERY to add a new section with HTML inputs for an emoji, title, URL, and visibility. This runs whenever the user starts to type, so theoretically there could be unlimited links added.
On the surface, the script seems to duplicate and add new fields like it should. However, whenever I fill out the form and send the form data through POST method to a PHP page, the data inserted into the last duplicated section does not send at all.
Here is a screenshot of me filling out the form. Below is the output from that form generated through a simple php script of print_r($_POST). This shows where the google link is completely left out despite me typing it in correctly.
Array
(
[method] => assign
[assEmoji] => ✏️
[title] => testing system
[directions] =>
[subID] => 1
[points] =>
[due] =>
[attach] => Array
(
[1] => Array
(
[linkEmoji] => 📎
[linkTitle] => Youtube
[linkURL] => https://youtube.com
[linkClass] => NULL
)
[2] => Array
(
[linkEmoji] => 📎
[linkTitle] =>
[linkURL] =>
[linkClass] => NULL
)
[3] => Array
(
[linkEmoji] => 📎
[linkTitle] =>
[linkURL] =>
[linkClass] => NULL
)
)
[submitType] => scan
[assType] => Assignment
)
Here is the code I am using to create the page.
// This section handles adding new links to page //
function appendSection() {
$(this).off('change');
const newSection = $(this).closest('section').clone();
newSection.find('input, select').each((i, el) => {
el.value = '';
el.name = el.name.replace(/\[(\d)\]/, (match, p1) => `[${parseInt(p1) + 1}]`);
});
newSection.on('change', appendSection);
$('.attachments').append(newSection);
}
$(".attachments section input").change(appendSection);
// This section handles navigation //
function nav(arg) {
var destination = arg.dataset.nav;
var pages = document.querySelectorAll("[data-page]");
var nav = document.querySelectorAll("[data-nav]");
for (i = 0; i < nav.length; i++) { // Remove the class 'active' if it exists
nav[i].classList.remove('active')
}
arg.classList.add('active');
for (i = 0; i < pages.length; i++) { // Hide/show the correct pages
if (pages[i].dataset.page != destination) {
pages[i].style.display = "none";
} else {
if (destination == 'basic') {pages[i].style.display = "flex";}
if (destination != 'basic') {pages[i].style.display = "block";}
}
}
}
.modal {display: block !Important}
.modal {
display: none;
position: fixed;
z-index: 20;
right: 0; top: 0;
width: 100%; height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.4);
-webkit-animation-name: fadeIn;
-webkit-animation-duration: 0.4s;
animation-name: fadeIn;
animation-duration: 0.4s}
.assignment-window{
display: grid;
position: fixed;
overflow: hidden;
padding: 10px;
padding-bottom: 16px;
box-sizing: border-box;
width: 100vw; height: 70vh;
bottom: 0; left: 0;
border-top-left-radius: 40px;
border-top-right-radius: 40px;
background-color: white;
grid-template-rows: auto 1fr;
grid-template-columns: 0.9fr 2.5fr;
grid-template-areas:
"asstop asstop"
"assnav asscontent"}
/* ----------[ASS TOP]---------- */
.asstop {
grid-area: asstop;
padding: 24px 20px;
box-sizing: border-box;
border-bottom: 2px solid #581F98;}
.asstop .title {
display: flex;
align-items: center;}
.asstop .title input {
flex: 1 1;
font-size: 24px;
border-radius: 8px;
margin-right: 20px;
border: 1px solid lightgray}
.asstop select {
outline: none;
-webkit-appearance: none;
padding: 12px 16px;
font-size: 24px;
box-sizing: border-box;
border-radius: 8px;
border: 1px solid lightgray}
.asstop button {
margin-top: -5px;}
/* ----------[ASS NAV]---------- */
.assnav {
grid-area: assnav;
padding-top: 20px;
padding-right: 10%;
border-right: 1px solid lightgray}
.assnav ul {
margin: 0;
padding: 0;
overflow: hidden;
list-style-type: none}
.assnav li {
display: block;
text-decoration: none;
color: #484848;
font-size: 20px;
padding: 14px 20px;
margin-bottom: 10px;
border-top-right-radius: 40px;
border-bottom-right-radius: 40px;}
.assnav li:hover {background-color: #F2F2F2}
.assnav li.active {background-color: #EEEEEE}
/* ----------[ASS CONTENT]---------- */
.asscontent {
grid-area: asscontent;
display: flex;
flex-direction: column;
padding: 30px;
box-sizing: border-box;
overflow: scroll}
.asscontent input, .asscontent select {
flex: 1;
outline: none;
-webkit-appearance: none;
padding: 8px 16px;
font-size: 18px;
box-sizing: border-box;
border-radius: 8px;
border: 1px solid lightgray}
/* ==== Basic Styling ==== */
.asscontent .basic {
display: flex;
height: 100%;
flex-direction: column}
.asscontent .basic textarea {
flex: 1;
font-size: 18px;
border-radius: 8px;
box-sizing: border-box;}
.asscontent .basic .config {
display: flex;
justify-content: space-between;
padding-top: 20px;}
.asscontent .basic input {text-align: center;}
.asscontent .basic .points {width: 80px;}
/* ==== Attachment Styling ==== */
.asscontent .attachments {display: none}
.asscontent .attachments section {
display: flex;
justify-content: space-between;
padding-bottom: 15px;
margin-bottom: 15px;
border-bottom: 1px solid lightgray}
/* ==== Delete Styling ==== */
.asscontent .advanced {display: none}
/* ==== Delete Styling ==== */
.asscontent .delete {display: none;}
.asscontent .delete ul {margin-bottom: 30px;}
.asscontent .delete li {margin-bottom: 10px;}
<form action='assign.int.php' method="post">
<input type='hidden' name='method' value='assign'>
<div class='modal'>
<div class='assignment-window'>
<div class='asstop'>
<div class='title'>
<select name='assEmoji'>
<option>✏️</option>
<option>💻</option>
<option>📚</option>
<option>💯</option>
<option>🧪</option>
</select>
<input name='title' type='text' placeholder='Type assignment title..' required>
<button class='button purple-btn'>Save Changes</button>
</div>
</div>
<div class='assnav'>
<ul>
<li data-nav='basic' onclick='nav(this);' class='active'>Basic Setup</li>
<li data-nav='attachments' onclick='nav(this);'>Attachments</li>
<li data-nav='advanced' onclick='nav(this);'>Advanced Settings</li>
</ul>
</div>
<div class='asscontent'>
<div class='basic' data-page='basic'>
<textarea name='directions' placeholder='Type assignment directions..'></textarea>
<div class='config'>
<section>
<span>Subject: </span>
<select name='subID'>
<option value='1'>Reading</option>
<option value='2'>Social Studies</option>
<option value='3'>Math</option>
<option value='4'>Science</option>
<option value='5'>Writing</option>
</select>
</section>
<section>
<span>Points:</span>
<input name='points' class='points' type='text'>
</section>
<section>
<span>Due Date:</span>
<input name='due' type='datetime-local'>
</section>
</div>
</div>
<div class='attachments' data-page='attachments'>
<section>
<div class='displayName'>
<select name='attach[1][linkEmoji]'>
<option>📎</option>
<option>🎬</option>
<option>📖</option>
</select>
<input name='attach[1][linkTitle]' placeholder='Title of website..' type='text'>
</div>
<div class='url'>
<input name='attach[1][linkURL]' placeholder='Insert website URL..' type='url'>
</div>
<div class='visible'>
<span>Visible: <span>
<select name='attach[1][linkClass]'>
<option value='NULL'>- All Students -</option><option value='1'>🟣 Reading/Social</option><option value='2'>🔴 Reading/Social</option><option value='3'>🔵 Reading/Social</option><option value='4'>🟢 Reading/Social</option>
</select>
</div>
</section>
</div>
<div class='advanced' data-page='advanced'>
<section>
<span>Submission: </span>
<select name='submitType'>
<option value='scan'>Require students to scan.</option>
<option value='button'>Allow scanning or turn in button.</option>
</select>
</section>
<section>
<span>Assignment Type: </span>
<select name='assType'>
<option>Assignment</option>
<option>Assessment</option>
<option>Daily Work</option>
<option>Quiz</option>
<option>Participation</option>
<option>Project</option>
</select>
</section>
</div>
<div class='delete' data-page='delete'>
<p>Deleting the assignment? The following will happen: </p>
<ul>
<li>All recorded scores will be deleted.</li>
<li>Student averages will adjust from the deleted scores.</li>
<li>The assignment will be removed from student view.</li>
<li>This action cannot be undone.</li>
</ul>
<button class='button grey-btn'>Cancel</button>
<button class='button red-btn'>Permanently Delete</button>
</div>
</div>
</div>
</div>
</form>
Any advice is greatly appreciated. What is going on?

#Mathew Try this
$('.section-group-js').on('keyup', 'input[type="url"]', function() {
var section = $(this).closest('section');
if (section.is(':last-child')) {
var index = section.data('index');
var newSection = section.clone();
newSection.find('input').val('');
newSection.data('index', index + 1);
newSection.attr('data-index', index + 1);
updateAttributes(newSection, 'title', index);
updateAttributes(newSection, 'url', index);
updateAttributes(newSection, 'visible', index);
newSection.insertAfter(section);
}
})
function updateAttributes( newSection, key, index ) {
newSection.find(`[name="attach[${index}][${key}]"]`).attr('name', `attach[${index+1}][${key}]`);
}
.modal {
display: block !Important
}
.modal {
display: none;
position: fixed;
z-index: 20;
right: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.4);
-webkit-animation-name: fadeIn;
-webkit-animation-duration: 0.4s;
animation-name: fadeIn;
animation-duration: 0.4s
}
.assignment-window {
display: grid;
position: fixed;
overflow: hidden;
padding: 10px;
padding-bottom: 16px;
box-sizing: border-box;
width: 100vw;
height: 85vh;
bottom: 0;
left: 0;
border-top-left-radius: 40px;
border-top-right-radius: 40px;
background-color: white;
grid-template-rows: auto 1fr;
grid-template-columns: 0.9fr 2.5fr;
grid-template-areas: "asstop asstop""assnav asscontent"
}
/* ----------[ASS TOP]---------- */
.asstop {
grid-area: asstop;
padding: 24px 20px;
box-sizing: border-box;
border-bottom: 2px solid #581F98;
}
.asstop .title {
display: flex;
align-items: center;
}
.asstop .title input {
flex: 1 1;
font-size: 24px;
border-radius: 8px;
margin-right: 20px;
border: 1px solid lightgray
}
.asstop select {
outline: none;
-webkit-appearance: none;
padding: 12px 16px;
font-size: 24px;
box-sizing: border-box;
border-radius: 8px;
border: 1px solid lightgray
}
.asstop button {
margin-top: -5px;
}
/* ----------[ASS NAV]---------- */
.assnav {
grid-area: assnav;
padding-top: 20px;
padding-right: 10%;
border-right: 1px solid lightgray
}
.assnav ul {
margin: 0;
padding: 0;
overflow: hidden;
list-style-type: none
}
.assnav li {
display: block;
text-decoration: none;
color: #484848;
font-size: 20px;
padding: 14px 20px;
margin-bottom: 10px;
border-top-right-radius: 40px;
border-bottom-right-radius: 40px;
}
.assnav li:hover {
background-color: #F2F2F2
}
.assnav li.active {
background-color: #EEEEEE
}
/* ----------[ASS CONTENT]---------- */
.asscontent {
grid-area: asscontent;
display: flex;
flex-direction: column;
padding: 30px;
box-sizing: border-box;
}
.asscontent input,
.asscontent select {
flex: 1;
outline: none;
-webkit-appearance: none;
padding: 8px 16px;
font-size: 18px;
box-sizing: border-box;
border-radius: 8px;
border: 1px solid lightgray
}
/* ==== Basic Styling ==== */
.asscontent .basic {
display: none
}
.asscontent .basic textarea {
flex: 1;
font-size: 18px;
border-radius: 8px;
box-sizing: border-box;
}
.asscontent .basic .config {
display: flex;
justify-content: space-between;
padding-top: 20px;
}
.asscontent .basic input {
text-align: center;
}
.asscontent .basic .points {
width: 80px;
}
/* ==== Attachment Styling ==== */
.asscontent .attachments section {
display: flex;
justify-content: space-between;
padding-bottom: 15px;
margin-bottom: 15px;
border-bottom: 1px solid lightgray
}
<head>
<link rel="stylesheet" href="https://classcolonies.com/resources/style.css">
<link href="https://fonts.googleapis.com/css2?family=Raleway&display=swap" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav></nav>
</head>
<div class="modal">
<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
<div class="assignment-window">
<div class='asstop'>
<div class='title'>
<select>
<option>✏️</option>
<option>💻</option>
<option>📚</option>
<option>💯</option>
<option>🧪</option>
</select>
<input type='text' placeholder='Type assignment title..' value=''>
<button type="submit" class='button purple-btn'>Save Changes</button>
</div>
</div>
<div class='assnav'>
<ul>
<li>Basic Setup</li>
<li>Attachments</li>
<li>Advanced Settings</li>
<li>Delete Assignment</li>
</ul>
</div>
<div class='asscontent'>
<div class='attachments section-group-js'>
<section data-index="1">
<div class='displayName'>
<span> Title: </span>
<input name='attach[1][title]' type='text'>
</div>
<div class='url'>
<span>URL: <span>
<input name='attach[1][url]' type='url'>
</div>
<div class='visible'>
<span>Visible: <span>
<select name='attach[1][visible]'>
<option>- All Students -</option>
<option>🟣 Reading/Social</option>
</select>
</div>
</section>
</div>
</div>
</div>
</form>
</div>
<?php
if ( isset($_POST['attach']) ) {
echo "<pre>";
print_r($_POST);
echo "</pre>";
die;
}
?>
And the output is below

Relative position disables sticky position of sibling element CSS

I make a game for a project that you must find the real neighbours of a country.
I have this HTML code:
.game-panel {
gap: 10px;
display: grid;
grid-template-columns: 200px auto;
grid-template-rows: 5.5em 22px auto;
gap: 10px;
grid-template-areas: "side main" "side main2" "side main3";
}
#sidebar {
width: 200px;
border-radius: 5px;
background-color: #ff1493;
display: flex;
grid-area: side;
flex-direction: column;
z-index: 100;
}
#playing-country {
display: flex;
border-radius: 5px;
background-color: #708090;
grid-area: main;
}
#progress {
-webkit-appearance: none;
display: flex;
position: sticky;
top: 0;
height: 24px;
grid-area: main2;
height: 24px;
border: 1px solid #ccc;
color: #aaa;
width: 100%;
border-radius: 5px;
z-index: 102;
}
#progress[value]::-webkit-progress-bar {
background: #f1f1f1;
}
#progress[value]::-webkit-progress-value {
background: blue;
}
#neighbours-panel {
border-radius: 5px;
grid-area: main3;
display: flex;
flex-shrink: 1;
background-color: #fff;
}
.overlay {
position: absolute;
padding: 0 !important;
margin: 0 !important;
background-color: rgba(136, 132, 132, 0.5);
}
<div class="game-panel">
<div id='sidebar'>
<h3>Βρες τους γείτονες</h3>
<div id="round">Γύρος: <span id='round-text'>0</span></div>
<div id="score">Σκορ: <span id='score-text'>0</span></div>
<button id="btn-next-round"><span>Επόμενη χώρα</span></button>
<button id="btn-new-game"><span>Νέο παιχνίδι</span></button>
</div>
<div id="playing-country">playing-country</div>
<progress id='progress' max='100' value='0'></progress>
<div id='neighbours-panel'>
</div>
</div>
In the #neighbours-panel I dynamically create divs with country choices and when I click the right ones, a semi-transparent div with overlay class is created inside the #neighbours-panel that covers only the #neighbours-panel with the countries. To do this I add position:relative; to the parent #neighbours-panel and position:absolute; to the newly created overlay div. The #progress must be sticky on the top of the page when scroll down. The problem is that with position:relative; on the #neighbours-panel in order to work properly the overlay, the position:sticky; of the #progress is disabled. If I remove position:relative; then the sticky position works as it should but then the overlay div covers the whole page and not only the #neighbours-panel as it should. Can anyone help me find out what to do?

Push off-canvas sidebar - How to smooth transition?

For some reason the main area of the grid does not transit smoothly when I click on toggle button. There is a gap between the sidebarTwo and main area.
Let me know if I am doing something wrong when trying to implement push off-canvas sidebar using CSS Grid.
Here are
grid-template-areas:
'header header header'
'main main sidebarTwo'
'footer footer footer';
code
const toggleBtn = document.querySelector('#category-tabs');
const toggleBtnOne = document.querySelector('#toggleOne');
const sidebarMainOne = document.querySelector('.main');
const sidebarMainTwo = document.querySelector('.sidebarTwo');
const replaFunction = () => {
toggleBtnOne.classList.contains('fa-toggle-on') ?
toggleBtnOne.classList.replace('fa-toggle-on', 'fa-toggle-off') :
toggleBtnOne.classList.replace('fa-toggle-off', 'fa-toggle-on');
sidebarMainOne.classList.toggle('active');
sidebarMainTwo.classList.toggle('active');
};
toggleBtn.addEventListener('click', replaFunction);
#import url('https://fonts.googleapis.com/css?family=Merriweather:300,900|Six+Caps');
* {
list-style: none;
text-decoration: none;
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
font-family: 'Jost', sans-serif;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
height: 100vh;
width: 100wh;
padding: 0;
margin: 0;
font-size: 1rem;
font-weight: 300;
line-height: 1.6;
display: grid;
grid-template-columns: auto 8fr auto;
grid-template-rows: 80px auto 50px;
grid-template-areas: 'header header header' 'main main sidebarTwo' 'footer footer footer';
}
a {
text-decoration: none;
color: #e8e8e8;
}
.box {
background: #ff4365;
padding: 2em;
height: 100px;
}
.header {
grid-area: header;
background: #2c343b;
color: #e9d20f;
display: flex;
justify-content: center;
align-items: center;
}
.main {
grid-area: main;
background: #ecedf2;
display: grid;
grid-gap: 1.5em;
grid-template-columns: auto;
grid-template-rows: max-content 1fr;
grid-template-areas: 'charts' 'trading';
padding: 1.5em 1.5em 1.5em 1.5em;
transition: all 1000ms ease-in-out;
}
.sidebarTwo {
grid-area: sidebarTwo;
width: 260px;
right: -260px;
background: #2c343b;
height: 100%;
transition: all 1000ms ease-in-out;
}
.sidebarTwo.active {
position: fixed;
transform: translateX(260px);
transition: all 1000ms ease-in-out;
}
.charts {
grid-area: charts;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-gap: 1rem;
}
.trading {
grid-area: trading;
display: grid;
grid-gap: 1rem;
grid-template-columns: repeat(auto-fill, auto);
grid-template-rows: minmax(200px, 600px);
grid-auto-flow: dense;
grid-template-areas: 'one one two two two two';
}
.two {
grid-area: two;
height: auto;
background: #495867;
}
.one {
grid-area: one;
height: auto;
}
.footer {
grid-area: footer;
background: #2c343b;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css"
/>
<title>Document</title>
</head>
<body>
<div class="header active">
<div id="category-tabs">
<a href="#" onclick="return false;" class="left"
><i id="toggleOne" class="fas fa-toggle-on fa-2x"></i
></a>
</div>
<h1 class="header-title">CSS Grid - grid-template-areas</h1>
</div>
<div class="sidebarTwo"></div>
<div class="main">
<div class="trading">
<div class="box one">1</div>
<div class="box two">2</div>
</div>
<div class="charts">
<div class="box three">3</div>
<div class="box four">4</div>
<div class="box five">5</div>
<div class="box six">6</div>
</div>
</div>
<div class="footer"></div>
</body>
</html>

Here is the answer. Not the best solution but it works.
const toggleBtn = document.querySelector('#category-tabs');
const toggleBtnOne = document.querySelector('#toggleOne');
const sidebarMainOne = document.querySelector('.main');
const sidebarMainTwo = document.querySelector('.sidebarTwo');
const replaFunction = () => {
toggleBtnOne.classList.contains('fa-toggle-on')
? toggleBtnOne.classList.replace('fa-toggle-on', 'fa-toggle-off')
: toggleBtnOne.classList.replace('fa-toggle-off', 'fa-toggle-on');
sidebarMainOne.classList.toggle('active'); sidebarMainTwo.classList.toggle('active');
};
toggleBtn.addEventListener('click', replaFunction);
#import url('https://fonts.googleapis.com/css?family=Merriweather:300,900|Six+Caps');
* {
list-style: none;
text-decoration: none;
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
font-family: 'Jost', sans-serif;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
height: 100vh;
width: 100wh;
padding: 0;
margin: 0;
font-size: 1rem;
font-weight: 300;
line-height: 1.6;
display: grid;
grid-template-columns: auto 8fr auto;
grid-template-rows: 80px auto 50px;
grid-template-areas:
'header header header'
'main main sidebarTwo'
'footer footer footer';
}
a {
text-decoration: none;
color: #e8e8e8;
}
.box {
background: #ff4365;
padding: 2em;
height: 100px;
}
.header {
grid-area: header;
background: #2c343b;
color: #e9d20f;
display: flex;
justify-content: center;
align-items: center;
}
.main {
grid-area: main;
background: #ecedf2;
width: calc(100% - 50px);
display: grid;
grid-gap: 1.5em;
grid-template-columns: auto;
grid-template-rows: max-content 1fr;
grid-template-areas: 'charts' 'trading';
padding: 1.5em 1.5em 1.5em 1.5em;
transition: all 500ms ease-in-out;
}
.sidebarTwo {
grid-area: sidebarTwo;
position: fixed;
right: -360px;
width: 360px;
background: #2c343b;
height: 100%;
transition: all 500ms ease-in-out;
}
.sidebarTwo.active {
transform: translateX(-360px);
transition: all 500ms ease-in-out;
}
.main.active {
width: calc(100% - 410px);
transition: all 500ms ease-in-out;
}
.charts {
grid-area: charts;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-gap: 1rem;
}
.trading {
grid-area: trading;
display: grid;
grid-gap: 1rem;
grid-template-columns: repeat(auto-fill, auto);
grid-template-rows: minmax(200px, 600px);
grid-auto-flow: dense;
grid-template-areas: 'one one two two two two';
}
.two {
grid-area: two;
height: auto;
background: #495867;
}
.one {
grid-area: one;
height: auto;
}
.footer {
grid-area: footer;
background: #2c343b;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css"
/>
<title>Document</title>
</head>
<body>
<div class="header active">
<div id="category-tabs">
<a href="#" onclick="return false;" class="left"
><i id="toggleOne" class="fas fa-toggle-on fa-2x"></i
></a>
</div>
<h1 class="header-title">CSS Grid - grid-template-areas</h1>
</div>
<div class="sidebarTwo"></div>
<div class="main">
<div class="trading">
<div class="box one">1</div>
<div class="box two">2</div>
</div>
<div class="charts">
<div class="box three">3</div>
<div class="box four">4</div>
<div class="box five">5</div>
<div class="box six">6</div>
</div>
</div>
<div class="footer"></div>
</body>
</html>