I am trying to create an info button that users can click on to learn more about my site through a popup modual. When testing it on the live server, clicking the button makes the background color darker, but the popup modual itself is nowhere to be seen. Please let me know what I have overlooked in my code that might be causing this error. Thank you!
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- style.css -->
<link rel="stylesheet" href="style.css" />
<!-- Font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
<title>Modal Test</title>
</head>
<body>
<!-- Info Button -->
<div class="container buttons" id="info-button">
<button class="btn rounded-btn">?</button>
</div>
<div class="modal-container" id="modal_container">
<div class="modal">
<h1>Modal Test</h1>
<p>Test text!</p>
<button id="close-info">Close me</button>
</div>
</div>
<!-- Bootstrap Bundle with Popper -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
<!-- index.js -->
<script src="index.js"></script>
</body>
</html>
style.css
body {
background-color: #363062;
font-family: 'Open Sans', sans-serif;
}
.text {
color: #E9D5DA;
}
.buttons {
padding-top: 20px;
display: flex;
justify-content: center;
align-items: center;
}
.btn {
background-color: #827397;
color: #fff;
margin: 10px;
}
.rounded-btn {
padding: 1rem 1.5rem;
border-radius: 100%;
}
#info-button {
justify-content: end;
align-items:flex-end;
}
.modal-container {
background-color: rgba(0, 0, 0, 0.3);
display: flex;
align-items: center;
justify-content: center;
position:fixed;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
opacity: 0;
pointer-events: none;
}
.modal-container.show {
pointer-events: auto;
opacity: 1;
}
.modal {
background-color: #fff;
border-radius: 5px;
padding: 30px 50px;
width: 600px;
max-width: 100%;
text-align: center;
}
.modal h1 {
margin: 0;
}
.modal p {
font-size: 14px;
opacity: 0.7;
}
index.js
const open = document.getElementById('info-button');
const close = document.getElementById('close-info');
const modal_container = document.getElementById('modal_container');
open.addEventListener('click', function() {
modal_container.classList.add('show');
});
close.addEventListener('click', function() {
modal_container.classList.remove('show');
});
The bootstrap lib has already a class .modal so you have to rename your .modal class to something else and it should works. I've tested.
Your code was interfering with the Bootstap CSS Lib. which already has a default styling behavior for modals etc.
Below, I was able to fix your issue using the bootstrap custom modal system and it works perfectly.
$("#myModal").modal()
body {
background-color: #363062;
font-family: 'Open Sans', sans-serif;
}
.text {
color: #E9D5DA;
}
.buttons {
padding-top: 20px;
display: flex;
justify-content: center;
align-items: center;
}
.btn {
background-color: #827397;
color: #fff;
margin: 10px;
}
.rounded-btn {
padding: 1rem 1.5rem;
border-radius: 100%;
}
#info-button {
justify-content: end;
align-items: flex-end;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
<body>
<!-- Info Button -->
<div class="container buttons" id="info-button">
<button class="btn rounded-btn" data-toggle="modal" data-target="#modal_container">?</button>
</div>
<!-- Modal -->
<div class="modal fade" id="modal_container" tabindex="-1" role="dialog"
aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalCenterTitle">Modal Test</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Test text!</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close
Me</button>
</div>
</div>
</div>
</div>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.12.9/dist/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous" defer></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<!-- Custom JS -->
<script src="index.js" defer></script>
</body>
Related
I have a problem. I want to use a cookie banner for my website.
I have the problem that I built my website with Boostrap. And as soon as I insert this code into my real website, the banner is displayed at the top and no longer in the style.
So it's displayed above stored. How can I insert this code so that it works properly?
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Cookie Consent Banner</title>
<!-- Google Font -->
<link
href="https://fonts.googleapis.com/css2?family=Poppins&display=swap"
rel="stylesheet"
/>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="cookiePopup" class="hide">
<img src="cookie.png" />
<p>
Our website uses cookies to provide your browsing experience and
relevant information. Before continuing to use our website, you agree &
accept of our Cookie Policy & Privacy.
</p>
<button id="acceptCookie">Accept</button>
</div>
<!-- Script -->
<script src="script.js"></script>
</body>
</html>
style.css
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: #f5f8ff;
}
#cookiePopup {
background-color: #ffffff;
position: absolute;
font-size: 14px;
width: 70vw;
max-width: 42.85em;
box-shadow: 0 0 2em rgba(5, 0, 31, 0.15);
font-family: "Poppins", sans-serif;
text-align: justify;
line-height: 1.8em;
padding: 2em 1.4em;
border-radius: 6px;
transition: all 0.5s ease-in;
}
#cookiePopup img {
display: block;
width: 3.75em;
transform: translateZ(0);
position: relative;
margin: auto;
}
#cookiePopup p {
text-align: center;
margin: 1.4em 0;
}
#cookiePopup button {
background-color: #6859fe;
border: none;
color: #ffffff;
font-size: 1.2em;
padding: 1em 1.4em;
display: block;
position: relative;
margin: auto;
border-radius: 5px;
}
#cookiePopup a {
color: #6859fe;
}
.hide {
visibility: hidden;
bottom: 0;
right: 2em;
}
.show {
visibility: visible;
bottom: 2em;
right: 2em;
}
#media only screen and (max-width: 37.5em) {
#cookiePopup {
width: 100%;
}
.hide {
bottom: 2em;
right: 0;
}
.show {
right: 0;
bottom: 0;
}
}
script.js
let popUp = document.getElementById("cookiePopup");
//When user clicks the accept button
document.getElementById("acceptCookie").addEventListener("click", () => {
//Create date object
let d = new Date();
//Increment the current time by 1 minute (cookie will expire after 1 minute)
d.setMinutes(2 + d.getMinutes());
//Create Cookie withname = myCookieName, value = thisIsMyCookie and expiry time=1 minute
document.cookie = "myCookieName=thisIsMyCookie; expires = " + d + ";";
//Hide the popup
popUp.classList.add("hide");
popUp.classList.remove("show");
});
//Check if cookie is already present
const checkCookie = () => {
//Read the cookie and split on "="
let input = document.cookie.split("=");
//Check for our cookie
if (input[0] == "myCookieName") {
//Hide the popup
popUp.classList.add("hide");
popUp.classList.remove("show");
} else {
//Show the popup
popUp.classList.add("show");
popUp.classList.remove("hide");
}
};
//Check if cookie exists when page loads
window.onload = () => {
setTimeout(() => {
checkCookie();
}, 2000);
};
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>Home - Brand</title>
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic&display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Cabin:700&display=swap">
<link rel="stylesheet" href="assets/fonts/fontawesome-all.min.css">
<link rel="stylesheet" href="assets/fonts/font-awesome.min.css">
<link rel="stylesheet" href="assets/fonts/fontawesome5-overrides.min.css">
<link rel="stylesheet" href="assets/css/Footer-Dark.css">
<link rel="stylesheet" href="assets/css/Hero-Clean-Reverse.css">
<link rel="stylesheet" href="assets/css/untitled.css">
<link
href="https://fonts.googleapis.com/css2?family=Poppins&display=swap"
rel="stylesheet"
<link rel="stylesheet" href="assets/css/style.css" />
/>
</head>
<body id="page-top" data-bs-spy="scroll" data-bs-target="#mainNav" data-bs-offset="77" style="background: var(--bs-body-bg);font-family: Cabin, sans-serif;--bs-primary: #42DCA3;--bs-primary-rgb: 66,220,163;">
<div id="cookiePopup" class="hide">
<img src="assets/img/cookie.png" />
<p>
Our website uses cookies to provide your browsing experience and
relevant information. Before continuing to use our website, you agree &
accept of our Cookie Policy & Privacy.
</p>
<button id="acceptCookie">Accept</button>
</div>
<nav class="navbar navbar-light navbar-expand-md fixed-top" id="mainNav">
<div class="container"><a class="navbar-brand" href="index.html">Name</a><button data-bs-toggle="collapse" class="navbar-toggler navbar-toggler-right" data-bs-target="#navbarResponsive" type="button" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation" value="Menu"><i class="fa fa-bars"></i></button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ms-auto">
<li class="nav-item nav-link"><a class="nav-link active" href="kontakt.html" style="background: rgba(255,255,255,0);">Kontakt</a></li>
<li class="nav-item nav-link"></li>
<li class="nav-item nav-link"></li>
</ul>
</div>
</div>
</nav>
</section>
<section class="mb-5"></section>
<footer class="text-center bg-dark" style="background: rgb(0,0,0);">
...
</footer>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/smart-forms.min.js"></script>
<script src="assets/js/grayscale.js"></script>
<script src="assets/js/script.js"></script>
</body>
</html>
If your banner is displayed at the top and no longer in the style it could be some problem in the css;
Try commenting out these css one at a time, and by reloading the page you can see if one of them is the culprit:
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/fonts/fontawesome-all.min.css">
<link rel="stylesheet" href="assets/fonts/font-awesome.min.css">
<link rel="stylesheet" href="assets/fonts/fontawesome5-overrides.min.css">
<link rel="stylesheet" href="assets/css/Footer-Dark.css">
<link rel="stylesheet" href="assets/css/Hero-Clean-Reverse.css">
<link rel="stylesheet" href="assets/css/untitled.css">
Alternatively, you can put the css "style.css" inside the html code and add !important
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>Home - Brand</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css"><!--EDIT for coding-->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic&display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Cabin:700&display=swap">
<link rel="stylesheet" href="assets/fonts/fontawesome-all.min.css">
<link rel="stylesheet" href="assets/fonts/font-awesome.min.css">
<link rel="stylesheet" href="assets/fonts/fontawesome5-overrides.min.css">
<link rel="stylesheet" href="assets/css/Footer-Dark.css">
<link rel="stylesheet" href="assets/css/Hero-Clean-Reverse.css">
<link rel="stylesheet" href="assets/css/untitled.css">
<link
href="https://fonts.googleapis.com/css2?family=Poppins&display=swap"
rel="stylesheet"/>
<!--<link rel="stylesheet" href="assets/css/style.css" />-->
</head>
<!-- Stylesheet on the html -->
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: #f5f8ff;
}
#cookiePopup {
background-color: #ffffff;
position: absolute;
font-size: 14px;
width: 70vw;
max-width: 42.85em;
box-shadow: 0 0 2em rgba(5, 0, 31, 0.15);
font-family: "Poppins", sans-serif;
text-align: justify;
line-height: 1.8em;
padding: 2em 1.4em;
border-radius: 6px;
transition: all 0.5s ease-in;
}
#cookiePopup img {
display: block;
width: 3.75em;
transform: translateZ(0);
position: relative;
margin: auto;
}
#cookiePopup p {
text-align: center;
margin: 1.4em 0;
}
#cookiePopup button {
background-color: #6859fe;
border: none;
color: #ffffff;
font-size: 1.2em;
padding: 1em 1.4em;
display: block;
position: relative;
margin: auto;
border-radius: 5px;
}
#cookiePopup a {
color: #6859fe;
}
.hide {
visibility: hidden;
bottom: 0;
right: 2em;
}
.show {
visibility: visible;
bottom: 2em;
right: 2em;
}
#media only screen and (max-width: 37.5em) {
#cookiePopup {
width: 100%;
}
.hide {
bottom: 2em;
right: 0;
}
.show {
right: 0;
bottom: 0;
}
}
</style>
<body id="page-top" data-bs-spy="scroll" data-bs-target="#mainNav" data-bs-offset="77" style="background: var(--bs-body-bg);font-family: Cabin, sans-serif;--bs-primary: #42DCA3;--bs-primary-rgb: 66,220,163;">
<!--COOKIES-->
<div id="cookiePopup" class="hide">
<img src="cookie.png" />
<p>
Our website uses cookies to provide your browsing experience and
relevant information. Before continuing to use our website, you agree &
accept of our Cookie Policy & Privacy.
</p>
<button id="acceptCookie">Accept</button>
</div>
<nav class="navbar navbar-light navbar-expand-md fixed-top" id="mainNav">
<div class="container"><a class="navbar-brand" href="index.html">Name</a><button data-bs-toggle="collapse" class="navbar-toggler navbar-toggler-right" data-bs-target="#navbarResponsive" type="button" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation" value="Menu"><i class="fa fa-bars"></i></button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ms-auto">
<li class="nav-item nav-link"><a class="nav-link active" href="kontakt.html" style="background: rgba(255,255,255,0);">Kontakt</a></li>
<li class="nav-item nav-link"></li>
<li class="nav-item nav-link"></li>
</ul>
</div>
</div>
</nav>
<!--Section-->
<section class="mb-5"></section>
<!--Footer-->
<footer class="text-center bg-dark" style="background: rgb(0,0,0);">
...
</footer>
<!-- Script -->
<script>
let popUp = document.getElementById("cookiePopup");
//When user clicks the accept button
document.getElementById("acceptCookie").addEventListener("click", () => {
//Create date object
let d = new Date();
//Increment the current time by 1 minute (cookie will expire after 1 minute)
d.setMinutes(2 + d.getMinutes());
//Create Cookie withname = myCookieName, value = thisIsMyCookie and expiry time=1 minute
document.cookie = "myCookieName=thisIsMyCookie; expires = " + d + ";";
//Hide the popup
popUp.classList.add("hide");
popUp.classList.remove("show");
});
//Check if cookie is already present
const checkCookie = () => {
//Read the cookie and split on "="
let input = document.cookie.split("=");
//Check for our cookie
if (input[0] == "myCookieName") {
//Hide the popup
popUp.classList.add("hide");
popUp.classList.remove("show");
} else {
//Show the popup
popUp.classList.add("show");
popUp.classList.remove("hide");
}
};
//Check if cookie exists when page loads
window.onload = () => {
setTimeout(() => {
checkCookie();
}, 2000);
};
</script>
<footer class="text-center bg-dark" style="background: rgb(0,0,0);">
...
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/js/bootstrap.min.js"></script><!--EDIT for coding-->
<script src="assets/js/smart-forms.min.js"></script>
<script src="assets/js/grayscale.js"></script>
<script src="assets/js/script.js"></script>
</body>
</html>
In my browser works fine
I am trying to query a cloned element in my dom and queryselector can not find it. Specifically #reply_form brings up nothing despite the id being used in the template. I've also tried ("#reply_form"+post_id) since I re id it at the bottom before pushing it to the dom and nothing. I'm all out of ideas.
Here is the code:
<template id="reply_template">
<div class="lk">
<img class="profile_image" />
<div>
<div class="user">
<div class="reply_author"></div>
<div class="reply-body"></div>
</div>
<div class="reply">
<div class="d-flex align-items-center">
<i id="upvote" class="fas fa-arrow-up hover"></i>
<span id="upvote_count_badge" class="badge bg-secondary"></span>
<i id="downvote" class="fas fa-arrow-down hover"></i>
</div>
<div class="reply_comment" id="reply">Reply</div>
<div id="post_award_modal" data-bs-toggle="modal" data-bs-target="#siteModal">
<i class="fas fa-award hover"></i>
</div>
</div>
<div id="vl" class="vl"></div>
<form id="reply_form" class="form-hidden">
<img class="profile_image"/>
<input class="cmt-reply" type="text" placeholder="Write a reply2"/>
</form>
<div id="reply_loader"><!--Nested Replies go here--></div>
</div>
</div>
</template>
<script>
function loadReplies(post_id, count) {
var reply_loader = document.querySelector('#reply_loader'+post_id)
var reply_template = document.querySelector('#reply_template');
if (count==0) {
fetch('/_load_replies?f='+post_id).then((response) => {
// Convert the response data to JSON
response.json().then((data) => {
for (var i = 0; i < data.length; i++) {
//add_post(template, counter)
// Clone the HTML template
let template_clone = reply_template.content.cloneNode(true);
// Query & update the template content
let post_id=data[i].post_id;
let post_url=data[i].post_url;
let author=data[i].author;
let author_id=data[i].author_id;
let post_saved=data[i].current_user.post_saved;
let post_upvoted=data[i].current_user.post_upvoted;
let post_downvoted=data[i].current_user.post_downvoted;
let current_user=data[i].current_user.current_user;
let is_moderator=data[i].current_user.is_moderator;
let is_big_top_moderator=data[i].current_user.is_big_top_moderator;
let awards=data[i].awards;
let media_url=data[i].media_url;
let community=data[i].community;
profile_images=template_clone.querySelectorAll(".profile_image");
for(var k=0; k<profile_images.length; k++) {
profile_images[k].src=data[i].post_profile_image;
}
let top=data[i].author;
top+=" "+moment(data[i].timestamp).fromNow();
if (awards) {
top+=' ';
for(var key in awards) {
top+=awards[key]+' '+key;
}
}
if (post_upvoted) {
template_clone.querySelector("#upvote").setAttribute("style", "color: white");
template_clone.querySelector("#downvote").setAttribute("style", "color: gray");
} else if (post_downvoted) {
template_clone.querySelector("#upvote").setAttribute("style", "color: gray");
template_clone.querySelector("#downvote").setAttribute("style", "color: white");
} else {
template_clone.querySelector("#upvote").setAttribute("style", "color: gray");
template_clone.querySelector("#downvote").setAttribute("style", "color: gray");
}
template_clone.querySelector("#upvote").setAttribute("onclick", "vote("+post_id+",1)");
template_clone.querySelector("#downvote").setAttribute("onclick", "vote("+post_id+",0)");
template_clone.querySelector("#post_award_modal").setAttribute("onclick", "build_award_modal("+post_id+")");
template_clone.querySelector(".reply_author").innerHTML=top
template_clone.querySelector(".reply-body").innerHTML=data[i].body;
template_clone.querySelector("#upvote_count_badge").innerHTML=data[i].upvotes-data[i].downvotes;
//it finds #reply no problem
template_clone.querySelector("#reply").addEventListener("click", (e)=>{
e.target.classList.toggle("blue");
//It can not find this at all no matter what. I re id it at the bottom
console.log(template_clone.querySelector("#reply_form"+post_id))
template_clone.querySelector("#reply_form"+post_id).setAttribute("style", "color: blue")
template_clone.querySelector("#vl")
});
//re id
template_clone.querySelector("#upvote").id="upvote"+post_id;
template_clone.querySelector("#upvote_count_badge").id="upvote_count_badge"+post_id;
template_clone.querySelector("#downvote").id="downvote"+post_id;
template_clone.querySelector("#reply_loader").id="reply_loader"+post_id;
template_clone.querySelector("#reply").id="reply"+post_id;
template_clone.querySelector("#reply_form").id="reply_form"+post_id;
template_clone.querySelector("#vl").id="vl"+post_id;
reply_loader.appendChild(template_clone);
}
})
})
}
}
</script>
Here is a code snippet:
function open_form(post_id) {
console.log("reply"+post_id)
document.getElementById("#reply"+post_id).classList.toggle("blue")
document.getElementById("#reply_form"+post_id).classList.toggle("open")
document.getElementsByID("#vl"+post_id).classList.toggle("open");
}
.like-comment, .reply_comment{
cursor: pointer;
}
.vl{
border-left: 1px solid white;
border-bottom: 1px solid white;
border-bottom-left-radius: 30px;
width: 5%;
top: 25px;
position: absolute;
height: 100%;
left: -20px;
display: none;
}
.thumb.open, .vl.open, .form-hidden.open{
display: flex;
}
.form-hidden{
position: relative;
transform: translateX(35px);
display: none;
}
.profile_image{
width: 30px;
height: 30px;
border-radius: 50%;
}
.cmt-reply{
width: 75%;
height: 30px;
padding: 5px;
border-radius: 8px;
border: none;
margin-left: 5px;
}
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.5.0/font/bootstrap-icons.css">
<link href="/static/css/style.css" rel="stylesheet">
<script src="https://js.stripe.com/v3/"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
</head>
<body>
<!--Broken Code here-->
<div class="reply_comment" id="reply64" onclick="open_form(64)">Reply</div>
<div id="vl64" class="vl"></div>
<form id="reply_form64" class="form-hidden">
<img class="profile_image" src="/avatars/1be25219994e4ef695e1c6f0d4d128ac_m.png">
<input class="cmt-reply" type="text" placeholder="Write a reply2">
</form>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment-with-locales.min.js" integrity="sha512-LGXaggshOkD/at6PFNcp2V2unf9LzFq6LE+sChH7ceMTDP0g2kn6Vxwgg7wkPP7AAtX+lmPqPdxB47A0Nz0cMQ==" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
</body>
When using getElementById you don't need to pass # in the string. check following snippet.
function open_form(post_id) {
console.log("reply" + post_id)
document.getElementById("reply" + post_id).classList.toggle("blue");
document.getElementById("reply_form" + post_id).classList.toggle("open");
document.getElementById("vl" + post_id).classList.toggle("open");
}
.like-comment,
.reply_comment {
cursor: pointer;
}
.vl {
border-left: 1px solid white;
border-bottom: 1px solid white;
border-bottom-left-radius: 30px;
width: 5%;
top: 25px;
position: absolute;
height: 100%;
left: -20px;
display: none;
}
.thumb.open,
.vl.open,
.form-hidden.open {
display: flex;
}
.form-hidden {
position: relative;
transform: translateX(35px);
display: none;
}
.profile_image {
width: 30px;
height: 30px;
border-radius: 50%;
}
.cmt-reply {
width: 75%;
height: 30px;
padding: 5px;
border-radius: 8px;
border: none;
margin-left: 5px;
}
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.5.0/font/bootstrap-icons.css">
<link href="/static/css/style.css" rel="stylesheet">
<script src="https://js.stripe.com/v3/"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
</head>
<body>
<!--Broken Code here-->
<div class="reply_comment" id="reply64" onclick="open_form(64)">Reply</div>
<div id="vl64" class="vl"></div>
<form id="reply_form64" class="form-hidden">
<img class="profile_image" src="/avatars/1be25219994e4ef695e1c6f0d4d128ac_m.png">
<input class="cmt-reply" type="text" placeholder="Write a reply2">
</form>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment-with-locales.min.js" integrity="sha512-LGXaggshOkD/at6PFNcp2V2unf9LzFq6LE+sChH7ceMTDP0g2kn6Vxwgg7wkPP7AAtX+lmPqPdxB47A0Nz0cMQ==" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
</body>
Here is getElementById documentation on mdn.
The thing I want to accomplish it's to hide the specific div you clicked, and show another one instead, I already tried some things but didn't work
One of them was this, as you will see I was trying its to hide the clicked element passing the id of the element by a parameter but didn't work
var el = document.getElementById(obj);
el.style.display = 'none';
}
This is how it should work: https://www.screencast.com/t/WGeokVkv
Until now I've had accomplish showing the next sibling of the clicked element, but I can't hide the one that was clicked either I can't hide the next sibling when its clicked again
How can I do that?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap css -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">
<!-- Our css -->
<title>FAQ</title>
<style>
.card{
box-shadow: 0px 5px 10px #000000;
border-radius: 25px 25px 25px 25px;
}
.fa-question-circle{
font-size: 2rem;
color: #FFC600;
}
.card-subtitle{
font-family: Impact, Charcoal, sans-serif;
color: #31261B !important;
}
.hr-yellow-border{
border: 2px solid #FFC600 ;
}
.card-text{
color: #315470 !important;
font-family: Impact, Charcoal, sans-serif;
text-transform: uppercase;
}
.hr-grey-border{
border: 2px solid #AB989D ;
}
.labels-text{
font-family: Impact, Charcoal, sans-serif;
text-transform: uppercase;
}
.labels-wrapper{
background: #315470 !important;
height: 3rem;
display: flex;
align-items: center ;
/*Take care with the transition*/
transition: 0.4s;
}
div.col-11 > .panel > p {
font-size: small;
}
.plus-icon{
cursor: pointer;
transition: 0.4s;
display: inline;
}
.panel{
display: none;
overflow: hidden;
}
</style>
</head>
<body>
<div class="container-fluid d-flex justify-content-center align-items-center">
<div class="col-9">
<br>
<div class="card" style="height: min-content;">
<div class="card-body">
<i class="fas fa-question-circle d-flex justify-content-center mb-3"></i>
<div class="col-11 mx-auto">
<hr class="hr-yellow-border">
<br>
<div class="labels-wrapper d-flex justify-content-between" id="question" onClick="hide('question')">
<h5 class="ml-2 text-white labels-text my-auto"> How do I access the event on the day of the conference?</h5><h4 class="plus-icon ml-auto mr-2 text-warning my-auto" id="question" onClick="hide('question')">+</h4>
</div>
<div class="panel">
<div class="row">
<h4 class="card-text ml-3">How do I access the event on the day of the conference?</h4><h4 class="plus-icon ml-auto mr-4 text-warning">-</h4>
</div>
<hr class="hr-grey-border">
<p class="ml-3">On October 15, 2020 at 10:00 AM EST, the login button will accept your registration credentials to access the online platform</p>
</div>
<br>
</div>
</div>
</div>
<br>
<br>
</div>
</div>
<!-- Bootstrap and jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script>
var acc = document.getElementsByClassName("labels-wrapper");
var i;
//var question = document.getElementById("question")
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
/* Toggle between adding and removing the "active" class,
to highlight the button that controls the panel */
//this.classList.toggle("panel");
/* Toggle between hiding and showing the active panel */
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
});
}
function hide(obj) {
var el = document.getElementById(obj);
el.style.display = 'none';
}
</script>
<script>
</script>
</body>
</html>
The reason your code is not working because flex library has style display:flex!important if you add display:none its will be override by library style due to important. In your javascript you have do it same way.
here is running snippet. Added solution to explain why its not working you can optimise code more.
var acc = document.getElementsByClassName("labels-wrapper");
var i;
//var question = document.getElementById("question")
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
/* Toggle between adding and removing the "active" class,
to highlight the button that controls the panel */
//this.classList.toggle("panel");
/* Toggle between hiding and showing the active panel */
// console.log(this);
// this.style.display = "none!important";
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
});
}
function hide(obj) {
console.log(obj);
var el = document.getElementById(obj);
el.setAttribute('style', 'display:none !important');
}
function openQuestion(obj) {
var el = document.getElementById(obj);
console.log(obj);
el.setAttribute('style', 'display:block');
var panel = el.nextElementSibling;
panel.style.display = "none";
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap css -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">
<!-- Our css -->
<title>FAQ</title>
<style>
.card {
box-shadow: 0px 5px 10px #000000;
border-radius: 25px 25px 25px 25px;
}
.fa-question-circle {
font-size: 2rem;
color: #FFC600;
}
.card-subtitle {
font-family: Impact, Charcoal, sans-serif;
color: #31261B !important;
}
.hr-yellow-border {
border: 2px solid #FFC600;
}
.card-text {
color: #315470 !important;
font-family: Impact, Charcoal, sans-serif;
text-transform: uppercase;
}
.hr-grey-border {
border: 2px solid #AB989D;
}
.labels-text {
font-family: Impact, Charcoal, sans-serif;
text-transform: uppercase;
}
.labels-wrapper {
background: #315470 !important;
height: 3rem;
display: flex;
align-items: center;
/*Take care with the transition*/
transition: 0.4s;
}
div.col-11>.panel>p {
font-size: small;
}
.plus-icon {
cursor: pointer;
transition: 0.4s;
display: inline;
}
.panel {
display: none;
overflow: hidden;
}
</style>
</head>
<body>
<div class="container-fluid d-flex justify-content-center align-items-center">
<div class="col-9">
<br>
<div class="card" style="height: min-content;">
<div class="card-body">
<i class="fas fa-question-circle d-flex justify-content-center mb-3"></i>
<div class="col-11 mx-auto">
<hr class="hr-yellow-border">
<br>
<div class="labels-wrapper d-flex justify-content-between" id="question" onClick="hide('question')">
<h5 class="ml-2 text-white labels-text my-auto"> How do I access the event on the day of the conference?</h5>
<h4 class="plus-icon ml-auto mr-2 text-warning my-auto" id="question" onClick="hide('question')">+</h4>
</div>
<div class="panel" onClick="openQuestion('question')">
<div class="row">
<h4 class="card-text ml-3">How do I access the event on the day of the conference?</h4>
<h4 class="plus-icon ml-auto mr-4 text-warning">-</h4>
</div>
<hr class="hr-grey-border">
<p class="ml-3">On October 15, 2020 at 10:00 AM EST, the login button will accept your registration credentials to access the online platform</p>
</div>
<br>
</div>
</div>
</div>
<br>
<br>
</div>
</div>
<!-- Bootstrap and jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
Update: Demo with complete code as requested by OP.
function toggleDivs() {
$("#div1").toggle();
$("#div2").toggle();
}
.div {
margin:50px;
height:200px;width:200px;background:blue;
}
#div2 {
background:red;display:none;
}
#div1 {z-index:10;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick="toggleDivs()">Toggler</button>
<div class="div" id="div1"></div>
<div class="div" id="div2"></div>
With jQuery, you can use toggle() function to show or hide the element on click.
$('#question').toggle();
$('#question').click(function(){
$(this).toggle();
});
or if you wish to use class instead of ID attribute, you use event delegation to target the specific element.
$('.question').on('click', function(){
$(this).toggle();
});
Please try this,
I remove same - icon in html.
This can change the icon with js
$(this).children(".plus-icon").text("+");// for + icon
$(this).children(".plus-icon").text("-");// for - icon
var acc = document.getElementsByClassName("labels-wrapper");
for (var i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
$(this).children(".plus-icon").text("+");
} else {
panel.style.display = "block";
$(this).children(".plus-icon").text("-");
}
});
}
.card{
box-shadow: 0px 5px 10px #000000;
border-radius: 25px 25px 25px 25px;
}
.fa-question-circle{
font-size: 2rem;
color: #FFC600;
}
.card-subtitle{
font-family: Impact, Charcoal, sans-serif;
color: #31261B !important;
}
.hr-yellow-border{
border: 2px solid #FFC600 ;
}
.card-text{
color: #315470 !important;
font-family: Impact, Charcoal, sans-serif;
text-transform: uppercase;
}
.hr-grey-border{
border: 2px solid #AB989D ;
}
.labels-text{
font-family: Impact, Charcoal, sans-serif;
text-transform: uppercase;
}
.labels-wrapper{
background: #315470 !important;
height: 3rem;
display: flex;
align-items: center ;
/*Take care with the transition*/
transition: 0.4s;
}
div.col-11 > .panel > p {
font-size: small;
}
.plus-icon{
cursor: pointer;
transition: 0.4s;
display: inline;
}
.panel{
display: none;
overflow: hidden;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap css -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">
<!-- Our css -->
<title>FAQ</title>
</head>
<body>
<div class="container-fluid">
<div class="col-11">
<br>
<div class="card">
<div class="card-body">
<i class="fas fa-question-circle d-flex justify-content-center"></i>
<div class="row">
<div class="col-12">
<hr class="hr-yellow-border">
<br>
<div class="labels-wrapper d-flex justify-content-between" id="question">
<h5 class="ml-2 text-white labels-text my-auto"> How do I access the event on the day of the conference?</h5>
<h4 class="plus-icon ml-auto mr-2 text-warning my-auto">+</h4>
</div>
<div class="panel">
<p class="mt-2">On October 15, 2020 at 10:00 AM EST, the login button will accept your registration credentials to access the online platform</p>
</div>
<br>
</div>
</div>
</div>
</div>
<br>
<br>
</div>
</div>
<!-- Bootstrap and jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script>
</script>
</body>
</html>
for the past 5 hours i've been trying to resolve this issue:
I have GeoComplete JQuery plugin, I have included the search field and map in a boostrap modal, unfortunate the map is not showing, well its only shows after I resize the screen, this is a known issue and on my threats this has been asked but not clearly resolved (with code, as i have) I really appreciate your help!
Sample Code (please copy all code into an index.html file)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css" media="screen">
.map_canvas { float: left; }
form { width: 300px; float: left; }
fieldset { width: 320px; margin-top: 20px}
fieldset label { display: block; margin: 0.5em 0 0em; }
fieldset input { width: 95%; }
#examples a {
text-decoration: underline;
}
#geocomplete { width: 200px}
.map_canvas {
width: 100%;
height: 400px;
margin: 10px 20px 10px 0;
}
#multiple li {
cursor: pointer;
text-decoration: underline;
}
.pac-container {
z-index: 10000 !important;
}
.pac-container:after {
background-image: none !important;
height: 0px;
}
.map_canvas {
float: left;
z-index: 10000 !important;
}
.pac-container {
background-color: #FFF;
z-index: 20;
position: fixed;
display: inline-block;
float: left;
}
.modal {
z-index: 20;
}
.modal-backdrop {
z-index: 10;
}
</style>
</head>
<body>
<!-- Trigger the modal with a button -->
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Google Search Map </h4><h6>(Map only shows after you reseize the browser page and back) nb: Don't forget to refresh input field's value</h6>
</div>
<div class="modal-body">
<div class="form-group">
<label for="usr">Search:</label>
<input id="geocomplete" class="form-control" type="text" placeholder="Type in an address" value="London, United Kingdom" />
<small>I have added the value (you can change it if you wish</small>
</div>
<div class="map_canvas"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="container">
<h3>Modal button below</h3> <hr> <p></p> <p></p> <p></p> <p></p>
<button type="button" class="btn btn-danger btn-xl" data-toggle="modal" data-target="#myModal">Open Google Map Modal</button>
</div>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/geocomplete/1.7.0/jquery.geocomplete.js"></script>
<script>
$(function(){
$("#geocomplete").geocomplete({
map: ".map_canvas",
details: "form",
types: ["geocode", "establishment"],
});
$("#find").click(function(){
$("#geocomplete").trigger("geocode");
});
});
</script>
</body>
</html>
SOLUTION
$(function(){
$("#geocomplete").geocomplete({
componentRestrictions: { country: 'ZA' },
map: ".map_canvas",
details: "form",
types: ["geocode", "establishment"],
})
.bind("geocode:result", function(event, result){
var map = $("#geocomplete").geocomplete('map');
google.maps.event.trigger(map, "resize");
map.setCenter(result.geometry.location);
});
});
I have look for lots of solutions for this in StackOverflow but none solved it, so I hope someone could helo me directly in this post.
I'm making a simple navegation bar for a web page and I wanted it to full fill the width of the browser window, so I gave it the class .container-fluid, and it worked perfectly in a big computer, but when using a laptop, the elements inside the .container-fluid overflows the window like this:
A better look at it is this:
Why is this happening?
Here is the code:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>__codekup__</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"
integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ"
crossorigin="anonymous" />
<link rel="stylesheet" href="main.css" type="text/css" />
</head>
<body>
<div class="header container-fluid">
<div class="row align-items-center justify-content-between">
<div class="col-sm-2 text-center">
<h1>Pliki</h1>
</div>
<div class="col-sm-2">
<div class="row align-items-center">
<div class="col-sm-6 text-center">
Instructions
</div>
<div class="col-sm-6 text-center">
<button type="button" class="btn btn-outline-primary pull-right">
Download Game
</button>
</div>
</div>
</div>
</div>
</div>
<div class="main"></div>
<!-- Bootstrap dependencies and jQuery library -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"
integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"
integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"
integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn"
crossorigin="anonymous"></script>
<script src="main.js" type="text/javascript"></script>
</body>
</html>
SASS
#import url('https://fonts.googleapis.com/css?family=Lato');
$primary-color: rgb(118, 200, 136);
$bg-color: rgb(33, 37, 43);
.header {
background-color: $bg-color;
height: 70px;
color: $primary-color;
.row {
height: 100%;
}
h1 {
font-family: Courier, sans-serif;
}
.btn {
color: $primary-color;
border-color: $primary-color;
font-family: Lato, sans-serif;
&:hover {
color: $bg-color;
background-color: $primary-color;
}
}
}
.main {
background: black;
}
JAVASCRIPT
$(document).ready(function () {
var h = window.innerHeight;
$('.main').css('height', h + 'px');
});
The .col-sm-2 class that wraps the button is too narrow to fit the contents. I would remove the .col-* classes from those columns, remove .row from the buttons' parent and use .d-flex instead, apply a margin between the buttons and a padding to the .header .row (to match similar to what you had before - though it isn't necessary).
Here's a pen for your changes in scss https://codepen.io/mcoker/pen/qjxmLr
$(document).ready(function () {
var h = window.innerHeight;
$('.main').css('height', h + 'px');
});
#import url("https://fonts.googleapis.com/css?family=Lato");
.header {
background-color: #21252b;
height: 70px;
color: #76c888;
}
.header .row {
height: 100%;
padding: 0 30px;
}
.header h1 {
font-family: Courier, sans-serif;
}
.header .btn {
color: #76c888;
border-color: #76c888;
font-family: Lato, sans-serif;
margin-left: 1em;
}
.header .btn:hover {
color: #21252b;
background-color: #76c888;
}
.main {
background: black;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>__codekup__</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous" />
<link rel="stylesheet" href="main.css" type="text/css" />
</head>
<body>
<div class="header container-fluid">
<div class="row align-items-center justify-content-between">
<div>
<h1>Pliki</h1>
</div>
<div>
<div class="d-flex align-items-center">
<div>
Instructions
</div>
<div>
<button type="button" class="btn btn-outline-primary pull-right">
Download Game
</button>
</div>
</div>
</div>
</div>
</div>
<div class="main"></div>
<!-- Bootstrap dependencies and jQuery library -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<script src="main.js" type="text/javascript"></script>
</body>
</html>