So it looks like my javascript onclick events are only functioning with ID's but when i call the class "listButton" only the first list item (All Rewards) closes the dropdown div.
When i click on any other list item (Food Rewards, Beverage Rewards, Holiday Rewards, Classes Rewards, TBA) it does not close my dropdown div.
I'm unsure why this is so. Is there another method to complete this? I must use vanilla JS.
var overlay2 = document.getElementById("overlay2");
var dropdown = document.getElementById("rewardsDropdown");
var listButton = document.querySelectorAll(".listButton");
document.getElementById("dropdownButton").onclick = function() {
dropdown.classList.add("open");
overlay2.classList.add("open");
};
function removeOpenRewards() {
dropdown.classList.remove("open");
overlay2.classList.remove("open");
};
for (i = 0; i < listButton.length; i++) {
listButton[i].addEventListener("click", removeOpenRewards);
}
overlay2.addEventListener("click", removeOpenRewards);
document.getElementById("close").addEventListener("click", removeOpenRewards);
#container #activeRewards #mobileDropdown #overlay2 {
position: fixed;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.6);
width: 100%;
height: 100%;
z-index: 999;
display: none;
}
#container #activeRewards #mobileDropdown #overlay2.open {
display: block;
}
#container #activeRewards #mobileDropdown #dropdownButtonCont {
width: 100%;
height: 59px;
margin: 15px 0 20px 0;
}
#container #activeRewards #mobileDropdown #dropdownButtonCont button {
width: 100%;
height: 100%;
background-color: #FAFAFA;
border: 0;
outline: 0;
border-radius: 10px;
color: #696969;
font-size: 18px;
font-family: 'Lato', sans-serif;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 0 20px;
}
#container #activeRewards #mobileDropdown #dropdownButtonCont button:focus {
background-color: #F0F0F0;
}
#container #activeRewards #mobileDropdown #dropdownButtonCont button:after {
border-style: solid;
border-width: 2px 2px 0 0;
content: '';
display: inline-block;
width: 5px;
height: 5px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
color: #C7C7C7;
position: absolute;
right: 40px;
}
#container #activeRewards #mobileDropdown #dropdownButtonCont button span {
color: #EDAFBD;
font-size: 12px;
margin-left: 15px;
}
#container #activeRewards #mobileDropdown #rewardsDropdown {
width: 100%;
display: none;
}
#container #activeRewards #mobileDropdown #rewardsDropdown.open {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
position: fixed;
z-index: 1000;
background-color: #FFFFFF;
left: 0;
bottom: 0;
padding-bottom: 30px;
}
#container #activeRewards #mobileDropdown #rewardsDropdown #close {
color: #D63A5E;
background-color: #FFFFFF;
border-radius: 20px;
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.16);
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.16);
font-size: 20px;
position: absolute;
left: 20px;
top: -45px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
height: 15px;
width: 15px;
padding: 5px 5px 7px 6px;
}
#container #activeRewards #mobileDropdown #rewardsDropdown #close:hover {
background-color: #D63A5E;
color: #FFFFFF;
}
#container #activeRewards #mobileDropdown #rewardsDropdown #close:focus {
color: #FFFFFF;
text-decoration: none;
cursor: pointer;
background-color: #AF2B49;
}
#container #activeRewards #mobileDropdown #rewardsDropdown h4 {
color: #505050;
text-align: center;
font-size: 18px;
font-weight: bolder;
margin: 30px 0;
}
#container #activeRewards #mobileDropdown #rewardsDropdown #dropdownList {
height: 360px;
overflow: scroll;
width: 95%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
#container #activeRewards #mobileDropdown #rewardsDropdown #dropdownList::-webkit-scrollbar {
background-color: transparent;
width: 5px;
margin-left: 5px;
padding-left: 5px;
}
#container #activeRewards #mobileDropdown #rewardsDropdown #dropdownList::-webkit-scrollbar-thumb {
background-color: #E0E0E0;
border-radius: 5px;
}
#container #activeRewards #mobileDropdown #rewardsDropdown #dropdownList>div {
width: 95%;
height: 59px;
margin-top: 5px;
padding-right: 5px;
}
#container #activeRewards #mobileDropdown #rewardsDropdown #dropdownList>div button {
width: 100%;
height: 100%;
background-color: #FAFAFA;
border: 0;
outline: 0;
border-radius: 10px;
color: #696969;
font-size: 18px;
font-family: 'Lato', sans-serif;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 0 20px;
}
#container #activeRewards #mobileDropdown #rewardsDropdown #dropdownList>div button:focus {
background-color: #D63A5E;
color: #FFFFFF;
}
#container #activeRewards #mobileDropdown #rewardsDropdown #dropdownList>div button span {
color: #EDAFBD;
font-size: 12px;
margin-left: 15px;
}
<div id="container">
<div id="activeRewards">
<div id="mobileDropdown">
<div id="dropdownButtonCont">
<button id="dropdownButton">All Rewards
<span>(5)</span>
</button>
</div>
<div id="overlay2"></div>
<div id="rewardsDropdown">
<span id="close">×</span>
<h4>Reward Categories</h4>
<div id="dropdownList">
<div>
<button class="listButton">All Rewards
<span>(5)</span>
</button>
</div>
<div>
<button class="listButton">Food Rewards
<span>(5)</span>
</button>
</div>
<div>
<button class="listButton">Beverage Rewards
<span>(5)</span>
</button>
</div>
<div>
<button class="listButton">Holiday Rewards
<span>(5)</span>
</button>
</div>
<div>
<button class="listButton">Classes Rewards
<span>(5)</span>
</button>
</div>
<div>
<button class="listButton">TBA
<span>(5)</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
The Document method querySelector() returns the first Element within
the document that matches the specified selector, or group of
selectors. If no matches are found, null is returned.
So replace:
document.querySelector(".listButton").addEventListener("click", removeOpenRewards);
with:
var listButtons= document.querySelectorAll(".listbutton");
listButtons.forEach(function(listButton) {
listButton.addEventListener("click", removeOpenRewards);
});
Related
function replace( hide, show ) {
document.getElementById(hide).style.display="none";
document.getElementById(show).style.display="flex";
}
#import url('https://fonts.googleapis.com/css2?family=Allerta+Stencil&family=Bebas+Neue&family=Inter:wght#100;200;300;400;600;700;800&family=Roboto:wght#300;400;700&family=VT323&display=swap');
body {
margin: 0;
padding: 0;
}
.all_guidebook {
width: 100%;
position: absolute;
min-height: 1000px;
height: auto;
display: flex;
flex-direction: column;
align-items: center;
}
.title_guidebook {
position: relative;
top: 50px;
justify-content: center;
}
.disposition_guidebook {
width: 1100px;
display: flex;
position: relative;
align-items: flex-start;
top: 55px;
}
.navigation {
width: 286px;
background: var(--bleu);
position: relative;
height: auto;
padding-bottom: 30px;
border-radius: 35px;
margin-right: 15px;
}
.navigation .all_links {
position: relative;
top: 15px;
}
.navigation h1 {
color: white;
font: 45px 'Bebas Neue';
margin: 0;
text-align: center;
position: relative;
top: 15px;
}
.navigation h2 {
color: white;
font: 34px 'Bebas Neue';
position: relative;
background: var(--fushia);
display: flex;
border-radius: 15px;
height: 45px;
padding-top: 2px;
margin-bottom: 26px !important;
width: 247px;
box-sizing: border-box;
top: 20px;
margin: auto;
justify-content: center;
}
.navigation .menu_deroul, #regl {
display: flex;
background: blue;
width: 300px;
}
#reglhover {
display: flex;
background: blue;
width: 300px;
}
#reglhover img, #staffcredshover img, #ctxhover img, #grphover img, #pvrhover img, #syst1hover img, #syst2hover img, #pihover img, #exphover img, #foirehover img {
transform: rotate(135deg);
top: 5px;
position: relative;
left: 7px;
}
.navigation .menu_deroul img {
float: left;
left: 7px;
position: relative;
cursor: pointer;
}
.navigation span {
color: var(--fushiapp);
margin-right: 3px;
font: 20px 'Bebas Neue';
}
.navigation h3 {
color: var(--white);
font: 20px 'Bebas Neue';
}
.wrap_deroul {
display: flex;
flex-direction: column;
position: relative;
top: -18px;
align-items: flex-end;
}
.ancres_deroul {
list-style: none;
display: flex;
flex-direction: column;
align-items: flex-end;
height: 30px;
padding: 0;
color: white;
top: -16px;
font-weight: 200!important;
right: 16px;
font: 16px 'Bebas Neue';
position: relative;
}
.ancres_deroul ul {
margin: 0;
display: flex;
cursor: pointer;
list-style: none;
align-items: flex-end;
flex-direction: column;
}
.ancres_deroul li {transition: .5s;}
.ancres_deroul li a {
text-decoration: none!important;
color: black;
}
.ancres_deroul li:hover {
letter-spacing: .5px;
transition: .5s;
}
<div class="menu_deroul" id="regl" style="display:flex" >
<img src="https://i.ibb.co/cvhdX78/image.png" height="21" width="21" onclick="replace('regl','reglhover')" />
<div class="titre_deroul">
<span>001.</span>
<h3 class="tablinks" onclick="openCity(event, 'reglement')" id="defaultOpen">Règlement</h3>
</div>
</div>
<div id="reglhover" style="display:none">
<img src="https://i.ibb.co/cvhdX78/image.png" height="21" width="21" style="cursor:pointer; transform: rotate(135deg); transition: .5s; transition-duration: 2s;" onclick="replace('reglhover','regl')" />
<div class="wrap_deroul">
<div class="titre_deroul">
<span>001.</span>
<h3 class="tablinks" onclick="openCity(event, 'reglement')">Règlement</h3>
</div>
<div class="ancres_deroul">
<ul>
<li><a onclick="scrollWin()">Inscription & RP</a></li>
<li style="margin-top: -5px;">Discord</li>
</ul>
</div>
</div>
</div>
I have this code, it replaces a div by another when clicking on a button.
I want it to close the showed div when clicking outside the div. For example, if the div "reglhover" is showed, I want it to be replaced by the "hide" status (replaced by "regl") when clicking outside the "reglhover" div. And i want it to work for every occurrence (because i use tabs)... But I can't figure out how to do it. Can someone help me? :(
try
const regl = document.getElementById("regl")
const reglhover = document.getElementById("reglhover")
document.addEventListener("click", (e) => {
if (reglhover.style.display === "flex" && e.target.id != "reglhover") {
reglhover.style.display = "none"
regl.style.display = "flex"
}
})
I'm developing a simple frontend page written in native HTML, CSS using Boostrap framework.
I'm getting some problem related with opening of a modal, after it is opened I'm no longer able to interact with any element of the page.
Here's the interested piece of code:
<!DOCTYPE html>
<head>
<title>3DFlix - Home</title>
<link href="images/Materiale Sito web/IconaSito.png">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="header">
<div class="header-navbar">
<div class="header-navbar-start">
<div class="header-navbar-logo">
<a href="index.html"><img width="228" height="58" class="logo"
src="images/Materiale Sito web/HEADER_Tavola disegno 1.png"></a>
</div>
</div>
<div class="header-navbar-middle">
<ul class="header-menu">
<li>Maker/Stampanti <! Fare pagina Maker/Stampanti> </li>
<li>Blog <! Fare pagina Blog> </li>
<li>Chi Siamo <! Fare pagina Chi Siamo> </li>
</ul>
</div>
<div class="header-navbar-end">
<div>
<button style="padding-right: 20px; background-color: transparent;
border-color: transparent; color: black; font-size: 20px;"
id="loginButton" class="btn btn-primary dropdown-toggle"
data-bs-toggle="dropdown" aria-expanded="false"> Accedi
</button>
<div class="dropdown-menu">
<input type="text" name="username" placeholder="Username" required><br><br>
<input type="password" name="password" placeholder="Password" required><br><br>
<input type="submit" value="Login">
</div>
<button style="background-color: transparent;
border-color: transparent; color: black; font-size: 20px;"
id="siginButton" class="btn btn-primary"
data-bs-toggle="modal" data-bs-target="#siginModal"
aria-expanded="false"> Registrati
</button>
<!-- Modal -->
<div class="modal fade" id="siginModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Registrati</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Submit">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Chiudi</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
....
....
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.10.2/dist/umd/popper.min.js"
integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB"
crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js"
integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13"
crossorigin="anonymous">
</script>
<script src="script.js"></script>
</body>
</html>
When "Registrati" button is pressed I'm not able to do anything more, such as filling forms, closing modal or clicking on buttons, I can just reload the page.
UPDATE:
This is the style.css file:
body {font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif}
a {text-decoration: none; color: black;}
a:hover {color: black;}
.header {
position: relative;
box-sizing: inherit;
z-index: 10;
padding: 1rem 1rem;
}
.header-navbar {
position: relative;
display: flex;
justify-content: space-between;
}
.header-navbar-start {
padding-right: 1rem;
margin-right: 0;
flex: 1;
position: relative;
z-index: 2;
display: flex;
align-items: center;
}
.header-navbar-logo {
box-sizing: inherit;
display: block;
}
.logo{
display: block;
max-width: 100%;
height: auto;
}
.header-navbar-middle {
position: relative;
z-index: 2;
display: flex;
align-items: center;
}
.header-menu {
justify-content: center;
display: flex;
flex-wrap: wrap;
margin: 0;
padding: 0;
list-style: none;
margin-block-start: 1rem;
margin-block-end: 1rem;
padding-inline-start: 40px;
gap: 70px;
font-size: 20px;
}
.header-navbar-end {
padding-left: 1 rem;
flex: 1;
position: relative;
z-index: 2;
justify-content: flex-end;
display: flex;
align-items: center;
font-size: 20px;
}
.background {
position: absolute;
right: 0; left: 0; top: 0;
overflow: hidden;
width: 100%; height: 800px;
background-size: cover;
background-repeat: no-repeat;
display: flex;
}
.wrapper {
justify-content: flex-start;
box-sizing: border-box;
display: flex;
width: 100%;
max-width: 1200px;
padding-left: 6vw;
padding-right: 6vw;
position: relative;
}
.wrapper-content {padding-top: 400px;}
.title {
font-size: 40px;
font-weight: normal;
pointer-events: none;
}
.subtitle {
font-size: 25px;
font-weight: normal;
pointer-events: none;
padding-bottom: 10px;
}
.wrapper-button {
padding: 10px 15px 10px 15px;
white-space: nowrap;
text-align: center;
display: inline-block;
cursor: pointer;
border: none;
position: relative;
align-items: flex-start;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-size: 18px;
background-color: #eef138b6;
border-radius: 20px;
justify-content: flex-start;
margin-left: 20px;
box-sizing: content-box;
}
.home-page {
background-color: #f4f4f4;
display: block;
margin-top: 9.8rem;
}
.section-one {
background-color: white;
width: 85%; height: 390px;
margin: auto; display: block; position: relative;
align-content: center;
padding: 4rem;
}
.section-columns {
margin-bottom: 2rem;
flex-wrap: nowrap;
display: flex;
box-sizing: border-box;
justify-content: center;
}
.section-one-content {
flex-basis: 0;
flex-grow: 1;
}
.section-two-content {
flex-basis: 0;
flex-grow: 1;
}
.section-three-content {
flex-basis: 0;
flex-grow: 1;
}
.section-one-img {
margin: 0 0 1rem;
margin-bottom: 2rem;
box-sizing: inherit;
display: block;
}
.section-two-img {
margin: 0 0 1rem;
margin-bottom: 2rem;
box-sizing: inherit;
display: block;
}
.section-three-img {
margin: 0 0 1rem;
margin-bottom: 2rem;
box-sizing: inherit;
display: block;
}
.one-img {
margin-left: auto;
margin-right: auto;
display: table;
align-content: center;
}
.two-img {
margin-left: auto;
margin-right: auto;
display: table;
align-content: center;
}
.three-img {
margin-left: auto;
margin-right: auto;
display: table;
align-content: center;
}
.section-h {
margin-bottom: 1rem;
font-weight: 400;
font-style: normal;
text-align: center;
}
.stamp-list {
padding-top: 2rem;
margin: auto;
display: block;
position: relative;
width: 85%;
align-content: center;
box-sizing: border-box;
}
.stamp-list-row {
box-sizing: border-box;
display: flex;
flex: 0 1 auto;
-webkit-box-direction: normal;
flex-direction: row;
flex-wrap: wrap;
-webkit-box-orient: horizontal;
justify-content: space-between;
}
.list-row-element {
margin-bottom: 2rem;
}
.element-block {
border-radius: 5px;
box-shadow: 0 5px 30px rgb(7 6 36 86 / 8%);
background-color: white;
transition: transform 0.25s;
}
.element-header {
margin-bottom: 0;
position: relative;
}
.element-img {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
display: block;
width: 100%;
height: auto;
}
.element-content {
margin-bottom: 0;
padding: 1.5rem;
position: relative;
z-index: 1;
}
.content-topbar {
border-radius: 5px;
box-shadow: 0 5px 30px rgb(7 6 36 86 / 8%);
background-color: white;
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
margin: -3.25rem 0 1.25rem;
padding: 0.625rem 1rem;
}
.vendor-info {
display: flex;
align-items: center;
}
.vendor-info-img {
flex: 0 0 2.1875rem;
margin-right: 0.75rem;
}
.vendor-img {
display: block;
width: 100%;
height: auto;
border-radius: 50%;
}
.vendor-name {
font-size: 0.875rem;
white-space: nowrap;
margin: 0;
word-wrap: break-word;
}
.content-middle {
margin: 0;
word-wrap: break-word;
}
.content-footer {
padding: 1rem 1.5rem;
border-top: 1px solid rgba(7, 36, 86, 0.075rem);
display: flex;
justify-content: space-between;
align-items: center;
}
.footer-attributes-primary {
margin-right: 1rem;
min-width: 0;
display: flex;
align-items: center;
}
.attribute-provincia {
font-size: 1.25rem;
min-width: 0;
word-wrap: break-word;
}
.footer-attributes-secondary {
display: flex;
align-items: center;
}
.attribute-message {
display: none;
width: 380px;
}
.section-newsletter {
background-color: rgb(204, 204, 204);
width: 85%; height: 320px;
display: block;
position: relative;
align-content: center;
margin: auto;
margin-top: 2rem;
}
.newsletter-container {
padding-top: 3rem;
padding-bottom: 3rem;
box-sizing: inherit;
padding-left: 3rem;
padding-right: 3rem;
}
.newsletter-columns {
margin-bottom: 0;
flex-wrap: nowrap;
display: flex;
box-sizing: border-box;
}
.newsletter-column1 {
flex-basis: 0;
flex-grow: 1;
}
.newsletter-column2 {
flex-basis: 0;
flex-grow: 1;
}
.column-h {
margin-bottom: 1rem;
margin-top: 0;
text-align: center;
font-size: 30px;
}
.column-p {
padding-top: 1rem;
text-align: center;
font-weight: 400;
}
.newsletter-form {
padding: 0.3rem 0.5rem;
border-radius: 5px;
border: thin;
}
.checkmark-form {
margin-right: 0.7rem;
width: 15px; height: 15px;
}
.button-form {
background-color: orange;
border-radius: 20px;
padding: 0.3rem 0.5rem;
width: 7rem;
border-style: groove;
}
.footer {
flex-wrap: nowrap;
padding: 1.5rem 0;
box-sizing: inherit;
display: flex;
position: relative;
padding-right: 2rem;
padding-left: 2rem;
width: 100%;
}
.footer-navbar {
display: flex;
justify-content: space-between;
align-items: center;
gap: 70px;
width: 100%;
}
.footer-navbar-logo {
box-sizing: inherit;
display: block;
}
.footer-menu {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 50px;
}
.social-icons {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 30px;
}
Aight now we know that it's a css problem.
First you should try to make your css file clearer... It's not easy to read a 500 lines css file so try to organize it by creating many css files that matches with a html component.
Exemple: a css file named header.css for your header, a css file named modal.css to custumize your modal, a css file named hero.css to custumize your hero section etc.
Second you should try to understand what is bootstrap doing by inspecting elements. You'll see that Bootstrap creates a div element with "modal-backdrop" class to create a "background" to your modal. The problem is you made something that changed the z-index and hide your modal.
So you can try to organize your css code and try to find the specific css line or just add this line to your css that will specify a correct z-index.
.modal-backdrop {
z-index: 1;
}
your code is working well here. I think you should show us these files content: "script.js" and "style.css"
I am a new reactJS developer and am looking to create a container that holds an input field where you can add/delete new fields. I want all of this to be in a scrollable container but instead, my code adds new inputs but moves the rest of the page and doesn't stay in the container. Below is the react and css. The css also has some fields I am going to include later
React
import React, { useState } from "react";
import './Dropdown.css'
function Dropdown() {
const [inputList, setInputList] = useState([{ courseName: "", courseRating: "" }]);
// handle input change
const handleInputChange = (e, index) => {
const { name, value } = e.target;
const list = [...inputList];
list[index][name] = value;
setInputList(list);
};
// handle click event of the Remove button
const handleRemoveClick = index => {
const list = [...inputList];
list.splice(index, 1);
setInputList(list);
};
// handle click event of the Add button
const handleAddClick = () => {
setInputList([...inputList, { courseName: "", courseRating: "" }]);
};
return (
<div className="base-container-drop">
<div className="content-drop">
{inputList.map((x, i) => {
return (
<div className="container-for-drop">
<div className="form-drop">
<div className="form-group-drop">
<label className="label-drop" htmlFor="courseName"></label>
<input className="input-drop"
name="courseName"
placeholder="Course Name"
value={x.firstName}
onChange={e => handleInputChange(e, i)}
/>
</div>
<div className="form-group-drop-rating">
<label className="label-drop" htmlFor="courseRating"></label>
<input className="input-drop"
type="number"
name="courseRating"
placeholder="0"
max='10'
min='0'
value={x.lastName}
onChange={e => handleInputChange(e, i)}
/>
</div>
<div className="btn-box">
{inputList.length !== 1 && <button
onClick={() => handleRemoveClick(i)}
className="Remove">
Remove
</button>}
<div className="sep"/>
{inputList.length - 1 === i && <button onClick={handleAddClick}
className="Add">
Add
</button>}
</div>
</div>
</div>
);
})}
</div>
</div>
);
}
export default Dropdown;
CSS
.base-comntainer-drop {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.content-drop {
display: flex;
flex-direction: column;
}
.base-container-drop{
width:100%;
overflow-y:auto;
position:relative;
max-height: 30%;
}
.form-drop{
position: relative;
display: flex;
flex-direction: row;
margin-top: .5em;
margin: auto;
text-align: center;
display: flex;
align-items: center;
padding-bottom: .7%;
overflow-y: auto;
}
.form-group-drop{
display: flex;
position: relative;
flex-direction: column;
align-items: flex-start;
width: 100%;
margin: 1%;
justify-content: center;
align-items: center;
}
.form-group-drop-rating{
display: flex;
flex-direction: column;
align-items: flex-start;
width: 100%;
margin: -25%;
justify-content: center;
align-items: center;
}
.form-group-drop .input-drop {
justify-content: center;
align-items: center;
width: 100%;
}
.label-drop {
text-align: center;
font-size: 20px;
}
.form-group-drop .input-drop{
position: relative;
max-width: 200%;
margin-top: 6px;
height: 37px;
padding: 0px 10px;
font-size: 16px;
font-family: 'Open Sans', sans-serif;
background-color: #f3f3f5;
border: 0;
border-radius: 4px;
margin-bottom: 31px;
transition: all 250ms ease-in-out;
margin: 0;
}
.form-group-drop-rating .input-drop{
position: relative;
max-width: 30%;
margin-top: 6px;
height: 37px;
padding: 0px 10px;
font-size: 16px;
font-family: 'Open Sans', sans-serif;
background-color: #f3f3f5;
border: 0;
border-radius: 4px;
margin-bottom: 31px;
transition: all 250ms ease-in-out;
margin: 0;
}
.input-drop :focus{
outline: none;
box-shadow: 0px 6px 12px .8px #0e81ce96;
}
.btn-box {
display: flex;
flex-direction: row;
margin: auto;
}
.Add{
position: relative;
justify-content: center;
align-items: center;
display: flex;
width: fit-content;
margin-top: 2px;
height: 30px;
padding: 8px 10px;
padding-left: 8px;
font-size: 12px;
font-family: 'Open Sans', sans-serif;
background-color: #3498db;
border: 0;
transition: all 250ms ease-in-out;
margin: 0;
color: #fff;
}
.Remove {
position: relative;
width: fit-content;
display: flex;
margin-right: 5%;
height: 30px;
padding: 7px 10px;
font-size: 12px;
font-family: 'Open Sans', sans-serif;
background-color: #3498db;
border: 0;
transition: all 250ms ease-in-out;
color: #fff;
}
.Add:hover{
background-color: #fff;
color: #6568F4;
}
.Remove:hover{
background-color: #fff;
color: #6568F4;
}
#media screen and (max-width: 960px) {
.base-comntainer-drop {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.content-drop {
display: flex;
flex-direction: column;
}
.form-drop{
position: relative;
display: flex;
flex-direction: row;
margin-top: .5em;
margin: auto;
text-align: center;
display: flex;
align-items: center;
padding-bottom: .7%;
overflow-y: auto;
}
.form-group-drop{
display: flex;
position: relative;
flex-direction: column;
align-items: flex-start;
width: 60%;
margin: 1%;
justify-content: center;
align-items: center;
}
.form-group-drop-rating{
display: flex;
flex-direction: column;
align-items: flex-start;
width: 50%;
margin: -25%;
justify-content: center;
align-items: center;
padding-left: 13%;
}
.form-group-drop .input-drop {
justify-content: center;
align-items: center;
width: 100%;
}
.label-drop {
text-align: center;
font-size: 20px;
}
.form-group-drop .input-drop{
position: relative;
max-width: 200%;
margin-top: 6px;
height: 37px;
padding: 0px 10px;
font-size: 16px;
font-family: 'Open Sans', sans-serif;
background-color: #f3f3f5;
border: 0;
border-radius: 4px;
margin-bottom: 31px;
transition: all 250ms ease-in-out;
margin: 0;
opacity: 75%;
}
.form-group-drop-rating .input-drop{
position: relative;
max-width: 30%;
margin-top: 6px;
height: 37px;
padding: 0px 10px;
font-size: 16px;
font-family: 'Open Sans', sans-serif;
background-color: #f3f3f5;
border: 0;
border-radius: 4px;
margin-bottom: 31px;
transition: all 250ms ease-in-out;
margin: 0;
opacity: 75% ;
}
.input-drop :focus{
outline: none;
box-shadow: 0px 6px 12px .8px #0e81ce96;
}
.btn-box {
display: flex;
flex-direction: column;
padding-left: 15%;
margin: auto;
justify-content: center;
align-items: center;
}
.btn-box .sep {
margin-top: 5%;
}
.Add{
position: relative;
justify-content: center;
align-items: center;
display: flex;
width: fit-content;
margin-top: 2px;
height: 30px;
padding: 7px 10px;
padding-left: 5px;
font-size: 12px;
font-family: 'Open Sans', sans-serif;
background-color: #3498db;
border: 0;
transition: all 250ms ease-in-out;
margin: 0;
color: #fff;
}
.Remove {
position: relative;
width: fit-content;
display: flex;
margin-right: 5%;
height: 30px;
padding: 7px 10px;
font-size: 12px;
font-family: 'Open Sans', sans-serif;
background-color: #3498db;
border: 0;
transition: all 250ms ease-in-out;
color: #fff;
}
.Add:hover{
background-color: #fff;
color: #6568F4;
}
.Remove:hover{
background-color: #fff;
color: #6568F4;
}
}
I extended off you a bit and created a ScrollableContainer. The idea is to make it modular and reusable so you can put anything into it, your Dropdown or anything else. By default the height is 20% but you can set height='yourNumber' to set your own limit.
I also removed the 30% off your container on the dropdown for this to be effective.
Here is the updated:
JS
import React, { useState } from "react";
import ReactDOM from "react-dom";
import "./styles.css";
function Dropdown() {
const [inputList, setInputList] = useState([
{ courseName: "", courseRating: "" }
]);
// handle input change
const handleInputChange = (e, index) => {
const { name, value } = e.target;
const list = [...inputList];
list[index][name] = value;
setInputList(list);
};
// handle click event of the Remove button
const handleRemoveClick = (index) => {
const list = [...inputList];
list.splice(index, 1);
setInputList(list);
};
// handle click event of the Add busutton
const handleAddClick = () => {
setInputList([...inputList, { courseName: "", courseRating: "" }]);
};
return (
<div className="base-container-drop">
<div className="content-drop">
{inputList.map((x, i) => {
return (
<div className="container-for-drop">
<div className="form-drop">
<div className="form-group-drop">
<label className="label-drop" htmlFor="courseName"></label>
<input
className="input-drop"
name="courseName"
placeholder="Course Name"
value={x.firstName}
onChange={(e) => handleInputChange(e, i)}
/>
</div>
<div className="form-group-drop-rating">
<label className="label-drop" htmlFor="courseRating"></label>
<input
className="input-drop"
type="number"
name="courseRating"
placeholder="0"
max="10"
min="0"
value={x.lastName}
onChange={(e) => handleInputChange(e, i)}
/>
</div>
<div className="btn-box">
{inputList.length !== 1 && (
<button
onClick={() => handleRemoveClick(i)}
className="Remove"
>
Remove
</button>
)}
<div className="sep" />
{inputList.length - 1 === i && (
<button onClick={handleAddClick} className="Add">
Add
</button>
)}
</div>
</div>
</div>
);
})}
</div>
</div>
);
}
function ScrollableContainer(props) {
const height = props.height || "20%";
return (
<div
className="scrollable-container"
style={{
height
}}
>
{props.children}
</div>
);
}
function App(props) {
return (
<ScrollableContainer height="200px">
<Dropdown />
</ScrollableContainer>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
CSS
.scrollable-container {
overflow: auto;
}
.base-comntainer-drop {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.content-drop {
display: flex;
flex-direction: column;
}
.base-container-drop {
width: 100%;
overflow-y: auto;
position: relative;
/* max-height: 30%; */
}
.form-drop {
position: relative;
display: flex;
flex-direction: row;
margin-top: 0.5em;
margin: auto;
text-align: center;
display: flex;
align-items: center;
padding-bottom: 0.7%;
overflow-y: auto;
}
.form-group-drop {
display: flex;
position: relative;
flex-direction: column;
align-items: flex-start;
width: 100%;
margin: 1%;
justify-content: center;
align-items: center;
}
.form-group-drop-rating {
display: flex;
flex-direction: column;
align-items: flex-start;
width: 100%;
margin: -25%;
justify-content: center;
align-items: center;
}
.form-group-drop .input-drop {
justify-content: center;
align-items: center;
width: 100%;
}
.label-drop {
text-align: center;
font-size: 20px;
}
.form-group-drop .input-drop {
position: relative;
max-width: 200%;
margin-top: 6px;
height: 37px;
padding: 0px 10px;
font-size: 16px;
font-family: "Open Sans", sans-serif;
background-color: #f3f3f5;
border: 0;
border-radius: 4px;
margin-bottom: 31px;
transition: all 250ms ease-in-out;
margin: 0;
}
.form-group-drop-rating .input-drop {
position: relative;
max-width: 30%;
margin-top: 6px;
height: 37px;
padding: 0px 10px;
font-size: 16px;
font-family: "Open Sans", sans-serif;
background-color: #f3f3f5;
border: 0;
border-radius: 4px;
margin-bottom: 31px;
transition: all 250ms ease-in-out;
margin: 0;
}
.input-drop :focus {
outline: none;
box-shadow: 0px 6px 12px 0.8px #0e81ce96;
}
.btn-box {
display: flex;
flex-direction: row;
margin: auto;
}
.Add {
position: relative;
justify-content: center;
align-items: center;
display: flex;
width: fit-content;
margin-top: 2px;
height: 30px;
padding: 8px 10px;
padding-left: 8px;
font-size: 12px;
font-family: "Open Sans", sans-serif;
background-color: #3498db;
border: 0;
transition: all 250ms ease-in-out;
margin: 0;
color: #fff;
}
.Remove {
position: relative;
width: fit-content;
display: flex;
margin-right: 5%;
height: 30px;
padding: 7px 10px;
font-size: 12px;
font-family: "Open Sans", sans-serif;
background-color: #3498db;
border: 0;
transition: all 250ms ease-in-out;
color: #fff;
}
.Add:hover {
background-color: #fff;
color: #6568f4;
}
.Remove:hover {
background-color: #fff;
color: #6568f4;
}
#media screen and (max-width: 960px) {
.base-comntainer-drop {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.content-drop {
display: flex;
flex-direction: column;
}
.form-drop {
position: relative;
display: flex;
flex-direction: row;
margin-top: 0.5em;
margin: auto;
text-align: center;
display: flex;
align-items: center;
padding-bottom: 0.7%;
overflow-y: auto;
}
.form-group-drop {
display: flex;
position: relative;
flex-direction: column;
align-items: flex-start;
width: 60%;
margin: 1%;
justify-content: center;
align-items: center;
}
.form-group-drop-rating {
display: flex;
flex-direction: column;
align-items: flex-start;
width: 50%;
margin: -25%;
justify-content: center;
align-items: center;
padding-left: 13%;
}
.form-group-drop .input-drop {
justify-content: center;
align-items: center;
width: 100%;
}
.label-drop {
text-align: center;
font-size: 20px;
}
.form-group-drop .input-drop {
position: relative;
max-width: 200%;
margin-top: 6px;
height: 37px;
padding: 0px 10px;
font-size: 16px;
font-family: "Open Sans", sans-serif;
background-color: #f3f3f5;
border: 0;
border-radius: 4px;
margin-bottom: 31px;
transition: all 250ms ease-in-out;
margin: 0;
opacity: 75%;
}
.form-group-drop-rating .input-drop {
position: relative;
max-width: 30%;
margin-top: 6px;
height: 37px;
padding: 0px 10px;
font-size: 16px;
font-family: "Open Sans", sans-serif;
background-color: #f3f3f5;
border: 0;
border-radius: 4px;
margin-bottom: 31px;
transition: all 250ms ease-in-out;
margin: 0;
opacity: 75%;
}
.input-drop :focus {
outline: none;
box-shadow: 0px 6px 12px 0.8px #0e81ce96;
}
.btn-box {
display: flex;
flex-direction: column;
padding-left: 15%;
margin: auto;
justify-content: center;
align-items: center;
}
.btn-box .sep {
margin-top: 5%;
}
.Add {
position: relative;
justify-content: center;
align-items: center;
display: flex;
width: fit-content;
margin-top: 2px;
height: 30px;
padding: 7px 10px;
padding-left: 5px;
font-size: 12px;
font-family: "Open Sans", sans-serif;
background-color: #3498db;
border: 0;
transition: all 250ms ease-in-out;
margin: 0;
color: #fff;
}
.Remove {
position: relative;
width: fit-content;
display: flex;
margin-right: 5%;
height: 30px;
padding: 7px 10px;
font-size: 12px;
font-family: "Open Sans", sans-serif;
background-color: #3498db;
border: 0;
transition: all 250ms ease-in-out;
color: #fff;
}
.Add:hover {
background-color: #fff;
color: #6568f4;
}
.Remove:hover {
background-color: #fff;
color: #6568f4;
}
}
Updated code sandbox for preview. Just a note I set a height to 200px on ScrollableContainer, for sake of demo. But you can remove it and it will become 20% as the default: https://codesandbox.io/s/react-hooks-usestate-forked-h1iqr
When I decrease my screen size the buttons start to overlap, i was hoping to decrease the breakpoints so that when i decrease the screen size the buttons will collapse. All of my buttons eventually fall into place however i was just wanting them to change as the screen moves. Any help on this would be appreciated, thanks.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS grid example</title>
<link rel="stylesheet" href="style/styles.css">
<link href="https://fonts.googleapis.com/css?family=Ubuntu"
rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/4.7.0/css/font-awesome.min.css">
</head>
<body class="grid">
<header>Manchester United F.C.</header>
<figure> <img src="images/untlogo.png" style="width:60px;height:60px" >
</figure>
<nav id="menu-nav">
<div class="menu">Menu</div>
<ul>
<li>Home</li>
<br>
<li>FAQ</li>
<br>
<li>Form</li>
<br>
<li>Links</li>
</nav>
<main class="main-home">
<div class="wrapper-home">
<div class="wrapper-button">
<section class="home-left">
<a href="https://www.manutd.com/en/news/first-team">
<article class="ole">
<img src="images/ole.jfif" alt="Ole">
<div class="text-wrap">
<h4>Team News</h4>
<p>"Ole Gunnar Solskjaer has freshened up his United side to face
Reading in the Emirates FA Cup".
</p>
</div>
</article>
</a>
</section>
<section class="home-left">
<a href="https://www.manutd.com/en/news/detail/marcus-rashford-learning-
from-solskjaer-and-ronaldo">
<article class="rash">
<img src="images/rash.jfif" alt="Rash">
<div class="text-wrap">
<h4>Rashfords Breakthrough</h4>
<p>" Why Rashford had shades of Solskjaer and Ronaldo in his game at
Newcastle"
</p>
</div>
</article>
</a>
</section>
<section class="home-right">
<a href="https://www.manutd.com/en/news/detail/vote-for-man-united-goal-
of-
the-month-for-december-2018">
<article class="goals">
<img src="images/goals.jfif" alt="goals">
<div class="text-wrap">
<h4>Goals from the month</h4>
<p>"Watch the eight United goals on our shortlist for December and
cast your vote."
</p>
</div>
</article>
</a>
</section>
<section class="home-left">
<a href="https://www.manutd.com/en/players-and-staff/first-team">
<article class="players">
<img src="images/team.jpg" alt="Players">
<div class="text-wrap">
<h4>Player Profiles</h4>
<p>" Click here to look at the offical 2018/19 Manchester United
squad!"
</p>
</div>
</article>
</a>
</section>
<section class="home-left">
<a href="https://www.manutd.com/en/news/detail/paul-pogba-wins-man-utd-
player-of-the-month-award-for-december-2018">
<article class="potm">
<img src="images/potm.jpg" alt="POTM">
<div class="text-wrap">
<h4>Player of the Month</h4>
<p>"Fans have picked Paul Pogba as United's top performer of the past
month."
</p>
</div>
</article>
</a>
</section>
<section class="home-left">
<a href="https://www.manutd.com/en/news/detail/ole-gunnar-solskjaer-on-
the-
new-year-and-facing-newcastle-united">
<article class="newyear">
<img src="images/newyear.jfif" alt="NewYear">
<div class="text-wrap">
<h4>Ole's 2019 Plan</h4>
<p>" Ole tells MUTV why he thinks this new year will be enjoyable for
fans"
</p>
</div>
</article>
</a>
</section>
</section>
<section class="home-left">
<a href="https://www.manutd.com/en/players-and-staff/women">
<article class="women">
<img src="images/women.jfif" alt="Women">
<div class="text-wrap">
<h4>Womens Team</h4>
<p>"Click here to look at the offical 2018/19 womens Manchester United
squad!"</p>
</div>
</article>
</a>
</section>
<section class="home-left">
<a href="https://www.manutd.com/en/players-and-staff/reserves">
<article class="newyear">
<img src="images/u23s.jpg" alt="u23s">
<div class="text-wrap">
<h4>u23s Team</h4>
<p>"Click here to look at the offical 2018/19 u23s Manchester United
squad!"
</p>
</div>
</article>
</a>
</section>
<section class="home-left">
<a href="https://www.manutd.com/en/players-and-staff/legends">
<article class="legends">
<img src="images/legends.jpg" alt="Legends">
<div class="text-wrap">
<h4>Manchester United Legends</h4>
<p>"Click here to look at all of the past Manchester United legend
players"
</p>
</div>
</article>
</a>
</div>
</main>
<nav id="menu-nav2">
</nav>
<script src=".js/script.js"></script>
</body>
</html>
**Style sheet**
* {
padding: 0;
margin: 0;
border: 0;
font-family: 'Ubuntu', sans-serif;
text-decoration: none;
}
body {
margin: 0;
font-family: Avenir, Helveltica, Arial, san-serif;
font-weight: bold;
font-size: 1.5rem;
color: black;
background-image: url("../images/stad.jpg");
background-size: cover;
}
/* use of * wildcard selector known to be slow so only for demo! */
body > * {
padding: 1em;
box-sizing: border-box;
}
.grid {
display: grid;
grid-template-columns:repeat (5, 1fr);
grid-template-rows: repeat(5, 1fr);
/*grid-gap: 6px; */
grid-template-areas:
"header header"
"menu menu";
}
header {
grid-area: header;
background: darkred;
box-shadow: 0px 4px 5px 0px darkred;
color: white;
}
.menu {
padding-top: 25px;
padding-bottom: 25px;
text-align: center;
}
#menu-nav2 {
grid-area: side;
background-image: url("../images/pogba3.png");
background-size: cover;
box-shadow: -5px -30px 5px 0px darkred;
}
nav {
grid-area: menu;
margin: 0;
padding: 0;
background: darkred;
box-shadow: 4px 0px 5px 0px darkred;
}
nav a {
text-decoration: none;
color: white;
}
nav ul {
list-style: none;
text-align: center;
width: 100%;
}
nav li {
height: 20px;
width: 100%;
text-align: center;
transition: box-shadow 1s;
}
nav ul li a {
padding: 0;
margin: 0;
}
nav li:hover {
box-shadow: inset 0 -100px 0 0 black;
color: black;
}
nav li:hover a {
color: darkred;
}
figure {
grid-area: figure;
background: darkred;
margin: 0;
padding-top: 10px;
text-align: center;
}
figure img {
height: 50px;
width: 50px;
}
main {
grid-area: content;
/* increasing the height of one element increases all row heights */
/*height: 25vh;*/
}
/* Start of form */
.main-form {
width: 100%;
order: 2;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
color: #333;
}
form {
display: flex;
flex-direction: column;
flex-wrap: wrap;
background-color: #C2C2C2;
width: 25%;
height: 600px;
padding: 1%;
box-shadow: 0 5px 20px black;
}
.form {
width: 400px;
}
.form_name {
width: 90%;
}
.email {
width: 90%;
}
.enquiry {
width: 90%;
height: 20%;
margin: 3%;
}
.button_form {
width: 20%;
height: 6%;
cursor: pointer;
}
#media screen and (min-width: 300px) {
.grid {
grid-template-columns: 1fr 3fr 1fr;
grid-template-rows: 10vh 50vh 50vh ;
grid-template-areas:
"figure header header"
"menu menu menu "
"content content content"
"content content content"
"side side side";
}
}
#media screen and (min-width: 600px) {
.grid {
grid-template-columns: 1fr 9fr 1fr;
/*grid-template-rows: 1fr 1fr 1fr 1fr;*/
/*or set the rows to 'view height (vh)'*/
grid-template-rows: 10vh 100vh 1vh;
grid-template-areas:
"figure header header"
"menu content side"
"menu content side";
}
}
nav {
justify-content: flex-start;
}
nav a {
padding: 1em;
}
input {
margin: 3%;
}
/* Home page content */
#searchForm {
height: auto;
width: 50%;
}
.wrapper-home {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
/* start of home */
ul {
list-style-type: none;
display: table;
width: 90%;
border-spacing: 0 10px;
}
li {
display: table-row;
}
li strong, li .txt, li .langs {
display: table-cell;
vertical-align: middle;
}
img {
display: table-cell;
padding-right: 10px;
}
li .txt {
width: 60%;
padding-right: 10px;
}
li:nth-child(even) {
background: #eee;
}
.main-home {
height: 85%;
order: 2;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
flex-direction: row;
}
.wrapper-button {
height: 80%;
width: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
flex-wrap: wrap;
}
.main-home article {
height: 10vmin;
width: 100%;
background-color: rgba(166, 14, 22, 0.5);
border-bottom: 1vmin solid rgba(166, 14, 22, 1);;
border-radius: 15px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
margin-right: 100px;
}
.text-wrap {
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
.text-wrap p {
font-size: 1.5vmin;
}
.text-wrap h4 {
font-size: 2.1vmin;
}
.main-home section {
width: 40vmin;
margin: .5%;
}
.ole img {
height: 100%;
width: auto;
}
.ole h4 {
color: oldlace;
text-shadow: 2px 2px 2px black;
}
.ole p {
color: oldlace;
text-shadow: 2px 2px 2px black;
}
.rash img {
height: 100%;
width: auto;
}
.rash h4 {
color: oldlace;
text-shadow: 2px 2px 2px black;
}
.rash p {
color: oldlace;
text-shadow: 2px 2px 2px black;
}
.goals img {
height: 100% ;
width: auto;
}
.goals h4 {
color: oldlace;
text-shadow: 2px 2px 2px black;
}
.goals p {
color: oldlace;
text-shadow: 2px 2px 2px black;
}
.players img {
height: 100%;
width: auto;
}
.players h4 {
color: oldlace;
text-shadow: 2px 2px 2px black;
}
.players p {
color: oldlace;
text-shadow: 2px 2px 2px black;
}
.potm img {
height: 100%;
width: auto;
}
.potm h4 {
color: oldlace;
text-shadow: 2px 2px 2px black;
}
.potm p {
color: oldlace;
text-shadow: 2px 2px 2px black;
}
.newyear img {
height: 100%;
width: auto;
}
.newyear h4 {
color: oldlace;
text-shadow: 2px 2px 2px black;
}
.newyear p {
color: oldlace;
text-shadow: 2px 2px 2px black;
}
.prem img {
height: 100%;
width: auto;
}
.prem h4 {
color: oldlace;
text-shadow: 2px 2px 2px black;
}
.prem p {
color: oldlace;
text-shadow: 2px 2px 2px black;
}
.women img {
height: 100%;
width: auto;
}
.women h4 {
color: oldlace;
text-shadow: 2px 2px 2px black;
}
.women p {
color: oldlace;
text-shadow: 2px 2px 2px black;
}
.u23s img {
height: 100%;
width: auto;
}
.u23s h4 {
color: oldlace;
text-shadow: 2px 2px 2px black;
}
.u23s p {
color: oldlace;
text-shadow: 2px 2px 2px black;
}
.legends img {
height: 100%;
width: auto;
}
.legends h4 {
color: oldlace;
text-shadow: 2px 2px 2px black;
}
.legends p {
color: oldlace;
text-shadow: 2px 2px 2px black;
}
.main-home article:hover {
transform: scale(1.1);
}
.video-wrapper {
width: 100%;
display: flex;
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
}
.video-wrapper iframe {
padding: 10px;
}
.wiki-header {
color: #DBE3DF;
}
#demo {
background-color: white;
text-decoration: none;
}
.txt {
font-size: 2.1vmin;
}
/* End of home page content */
.faq-main {
display: flex;
flex-direction: column;
justify-content: flex-start;
}
/* start of faq */
.faq-main h2{
color:darkred;
}
.faq-main p{
color:darkred;
}
.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
adding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
.active, .accordion:hover {
background-color: grey;
}
.accordion:after {
content: '\002B';
color: #777;
font-weight: bold;
float: right;
margin-left: 5px;
}
.active:after {
content: "\2212";
}
.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
/*end of FAQ*/
/* start of links.html */
.wrapper-contact {
display: flex;
flex-direction: column;
align-items: flex-start;
flex-wrap: wrap;
}
.main-contact {
height: 85%;
order: 2;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
flex-direction: row;
}
.main-contact article {
height: 12vmin;
width: 50vmin;
background-color: rgba(51, 51, 51, 0.5);
border: 1vmin solid black;
border-radius: 10px;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
margin: 5%;
}
.main-contact section {
margin: 2.5%;
}
.facebook img {
height: 100%;
width: auto;
}
.facebook h2 {
color: white;
text-shadow: 2px 2px 2px black;
font-size: 4vmin;
margin: 10%;
}
.gmail img {
height: 50%;
width: auto;
margin-left: 5%;
}
.gmail h2 {
color: white;
text-shadow: 2px 2px 2px black;
font-size: 2.5vmin;
margin: 10%;
}
.twitter img {
height: 100%;
width: auto;
}
.twitter h2 {
color: white;
text-shadow: 2px 2px 2px black;
font-size: 3.5vmin;
margin: 10%;
}
.number img {
height: 70%;
width: auto;
margin-left: 5%;
}
.number h2 {
color: white;
text-shadow: 2px 2px 2px black;
font-size: 4vmin;
margin: 10%;
}
.button-area {
display: flex;
justify-content: center;
align-items: center;
}
.contact_me img {
height: 70%;
width: auto;
margin-left: 5%;
}
.contact_me h2 {
color: white;
text-shadow: 2px 2px 2px black;
font-size: 3.5vmin;
margin: 10%;
}
.main-contact article:hover {
transform: scale(1.1);
}
/* end of links.html */
/* footer */
footer {
grid-area: footer;
width: 100%;
height: 5%;
position: fixed;
bottom: 0;
display: flex;
align-items: center;
justify-content: space-between;
background-color: #333;
order: 3;
}
footer a {
color: #9fff80;
margin-left: 1vmin;
margin-right: 1vmin;
font-size: 2vmin;
}
.icons {
display: flex;
align-items: center;
height: 100%;
}
i {
color: white;
cursor: pointer;
font-size: 2vmin;
}
i p {
display: none;
font-size: 2vmin;
transition: all 2s;
margin-left: 1vmin;
}
i:hover {
color: #9fff80;
}
i:hover p {
color: #9fff80;
display: inline-block;
}
.cr {
display: flex;
align-items: center;
margin-right: 10vmin;
width: 25%;
height: 100%;
}
How do i adjust the breakpoint of my buttons so that they will collapse into a column?
short answer is:
display: flex;
flex-direction: column;
justify-content: center;
I'm trying to do a project which consists on some buttons and when you click them a value is pushed into an array (custo). I need to add all the values of that array and store them in a variable, which I can't do properly… I tried joining with (" * "). after having that value in a variable I would need to multiply it by the value the user would give on the input……… furthermore, the final result would be displayed when the button Calcular is clicked, and when the reset button is clicked, the div with the result (resultado), would be cleaned and the array reset. Here is the code for what I got:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="inner-cont">
<div id="resultado"></div>
<div class="bloco-estilo" id="penteado">
<p>Penteado</p>
</div>
<div class="bloco-estilo" id="pintar">
<p>Pintar</p>
</div>
<div class="bloco-estilo" id="pintar-opt">
<ul class="cores">
<li id="cor_verm">Vermelho</li>
<li id="cor_loiro">Loiro</li>
<li id="cor_cast" cast>Castanho</li>
</ul>
</div>
<div class="bloco-estilo" id="acabamento">
<p>Acabamento</p>
</div>
<div class="lucro">
<div class="lucro-dir">
<p>Introduza o valor percentual de lucro</p>
<input type="text" maxlength="2">
<p>%</p>
</div>
<div class="lucro-esq">
<button id="reset">Reset</button>
<button id="calc">Calcular</button>
</div>
</div>
</div>
</div>
<script src="jquery-3.1.1.min.js"></script>
<script src="function.js"></script>
</body>
</html>
The CSS:
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
}
ul {
list-style: none;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
}
ul li {
display: inline;
padding: 0 40px;
box-sizing: border-box;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
}
.container {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.inner-cont {
width: 50%;
height: 80%;
background-color: #f2ce9e;
position: relative;
}
#resultado {
width: 100%;
height: 100px;
background-color: snow;
box-sizing: border-box;
border: 2px dashed #e39835;
}
.bloco-estilo {
width: 100%;
height: 80px;
background-color: rgba(255, 255, 255, 0.5);
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
font-size: 20pt;
color: navy;
font-family: Arial;
margin-bottom: 10px;
box-sizing: border-box;
cursor: pointer;
transition: all 500ms ease;
}
ul li:hover {
background-color: #8b1555;
color: white;
}
.bloco-estilo:hover {
background-color: deeppink;
color: white;
}
.lucro {
width: 100%;
height: 100px;
font-size: 12pt;
color: navy;
font-family: Arial;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
bottom: 0;
left: 0;
}
.lucro-dir {
width: 50%;
height: 100px;
font-size: 16pt;
color: navy;
font-family: Arial;
display: flex;
justify-content: center;
align-items: center;
padding: 40px;
box-sizing: border-box;
}
.lucro-esq {
width: 50%;
height: 100px;
font-size: 12pt;
color: navy;
font-family: Arial;
display: flex;
justify-content: center;
align-items: flex-end;
flex-direction: column;
}
#reset {
width: 50%;
height: 50%;
background-color: red;
border: none;
color: white;
font-size: 15pt;
float: left;
}
#calc {
width: 50%;
height: 50%;
background-color: green;
border: none;
color: white;
font-size: 15pt;
float: left;
}
input {
width: 40px;
height: 30px;
margin: 0 10px;
font-size: 12pt;
text-align: center;
font-weight: bolder;
}
#pintar-opt {
display: none;
}
The JS (i'm also using jquery):
$('#pintar').click(function () {
$('#pintar-opt').slideToggle(0);
});
var p1, p2, p2_1, p2_2, p2_3, a;
p1 = 10; //penteado
p2 = 0; // pintar
p2_1 = 3; //opt cor 1
p2_2 = 5; //opt cor 2
p2_3 = 7; //opt cor 3
a = 6; //acabamento
var custo = [];
$('#penteado').click(function () {
custo.push(p1);
});
$('#pintar').click(function () {
custo.push(p2);
});
$('#cor_verm').click(function () {
custo.push(p2_1);
});
$('#cor_loiro').click(function () {
custo.push(p2_2);
});
$('#cor_cast').click(function () {
custo.push(p2_3);
});
$('#acabamento').click(function () {
custo.push(p2_3);
});
var preco = custo.join(" * ");
Very much appreciated to anyone who tries to help me! also, it would be awesome if you could see what's wrong with the design, as it is not properly responsive…
This snippet performs the calculations. By cycling through the array elements using $.each and adding each one to a variable num (commented within the script) we can perform the addition. I've commented out the element joining line as I'm not sure why this is necessary.
n.b. The same outcome could be achieved without an array by simply incrementing and then multiplying the num variable, so it is assumed you'll be performing other tasks with the array elsewhere.
$('#pintar').click(function() {
$('#pintar-opt').slideToggle(0);
});
var p1 = 10, //penteado
p2 = 0, // pintar
p2_1 = 3, //opt cor 1
p2_2 = 5, //opt cor 2
p2_3 = 7, //opt cor 3
a = 6; //acabamento
var custo = [];
function totals() {
var num = 0, // define num
percen = parseFloat($('#perc').val()) || 0, // get the input number or enter 0 if no user input
percen = percen * 0.01, //convert the percentage
sum = 0; // the total
$.each(custo, function() { // cycle through custo
num += parseFloat(this); // increase num by element value
});
sum = (num * percen).toFixed(2); // calculate and round to two decimal places
return sum; // return aumrray sum times percentage
}
$('#penteado').click(function() {
custo.push(p1);
});
$('#pintar').click(function() {
custo.push(p2);
});
$('#cor_verm').click(function() {
custo.push(p2_1);
});
$('#cor_loiro').click(function() {
custo.push(p2_2);
});
$('#cor_cast').click(function() {
custo.push(p2_3);
});
$('#acabamento').click(function() {
custo.push(p2_3);
});
$('#calc').click(function() {
$('#resultado').text(totals()); // call on the totals() function
});
$('#reset').click(function() {
custo = []; // reset custo and num
$('#resultado').text(0);
});
// var preco = custo.join(" * "); <- not sure why you're joining them here?
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
}
ul {
list-style: none;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
}
ul li {
display: inline;
padding: 0 40px;
box-sizing: border-box;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
}
.container {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.inner-cont {
width: 50%;
height: 80%;
background-color: #f2ce9e;
position: relative;
}
#resultado {
width: 100%;
height: 100px;
background-color: snow;
box-sizing: border-box;
border: 2px dashed #e39835;
}
.bloco-estilo {
width: 100%;
height: 80px;
background-color: rgba(255, 255, 255, 0.5);
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
font-size: 20pt;
color: navy;
font-family: Arial;
margin-bottom: 10px;
box-sizing: border-box;
cursor: pointer;
transition: all 500ms ease;
}
ul li:hover {
background-color: #8b1555;
color: white;
}
.bloco-estilo:hover {
background-color: deeppink;
color: white;
}
.lucro {
width: 100%;
height: 100px;
font-size: 12pt;
color: navy;
font-family: Arial;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
bottom: 0;
left: 0;
}
.lucro-dir {
width: 50%;
height: 100px;
font-size: 16pt;
color: navy;
font-family: Arial;
display: flex;
justify-content: center;
align-items: center;
padding: 40px;
box-sizing: border-box;
}
.lucro-esq {
width: 50%;
height: 100px;
font-size: 12pt;
color: navy;
font-family: Arial;
display: flex;
justify-content: center;
align-items: flex-end;
flex-direction: column;
}
#reset {
width: 50%;
height: 50%;
background-color: red;
border: none;
color: white;
font-size: 15pt;
float: left;
}
#calc {
width: 50%;
height: 50%;
background-color: green;
border: none;
color: white;
font-size: 15pt;
float: left;
}
input {
width: 40px;
height: 30px;
margin: 0 10px;
font-size: 12pt;
text-align: center;
font-weight: bolder;
}
#pintar-opt {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="inner-cont">
<div id="resultado"></div>
<div class="bloco-estilo" id="penteado">
<p>Penteado</p>
</div>
<div class="bloco-estilo" id="pintar">
<p>Pintar</p>
</div>
<div class="bloco-estilo" id="pintar-opt">
<ul class="cores">
<li id="cor_verm">Vermelho</li>
<li id="cor_loiro">Loiro</li>
<li id="cor_cast" cast>Castanho</li>
</ul>
</div>
<div class="bloco-estilo" id="acabamento">
<p>Acabamento</p>
</div>
<div class="lucro">
<div class="lucro-dir">
<p>Introduza o valor percentual de lucro</p>
<input id="perc" type="text" maxlength="2">
<p>%</p>
</div>
<div class="lucro-esq">
<button id="reset">Reset</button>
<button id="calc">Calcular</button>
</div>
</div>
</div>
</div>
</body>
</html>