I’m trying to load a form modal using various buttons. I’ll be using my previous “Order Your Food” code as a simplified example and I’ve added the form and narrowed it down to just a first and last name fields and a simple mailto action for validation purposes. I've tried to simply this as much as possible so I apologize if there are any unneeded fragments of code that I may have missed and are not relevant.
If you click one of the button options, the form does load. If you fill in the two fields and hit submit, the form validates and prompts you to send an email to test#testingandrewsforms.com for the purpose of this demo so we’re not concerning ourselves with all of the post-submission client-to-server stuff.
What I’m trying to accomplish is the following:
User clicks Submit, form closes using the same CSS transition that was opened to begin with
-> Post submission form opens using the CSS transitions assigned to it
I’ve added “Show Form” and “Show Post” buttons so you can see how each modal is intended to operate independently. My theory is that there’s probably a way to use my closeBtn in javascript or JQuery to close the form on validated submission and then trigger opening the post-form modal. These windows are just being powered by href links that are assigned the form and post-form modal ids and the close button is simply removing those ids and just leaving the #. So far I’ve tried combinations of jquery click events and trigger events but neither seem to be doing anything.
I don’t think I can target the CSS attribute visibility which is used to hide the modals in jquery because they’re hidden by default and as far as I can tell from the browser inspector they’re not adding the attribute as an inline style so I don’t think I can remove it like that. I think that may be because I’m using the target selector to power the transition.
Any thoughts on how I might be able to accomplish this? I’m open to any methods, pure CSS, JS, Jquery, whatever works because so far nothing I’ve tried has worked for me. I've searched SO and there are several posts on trigger events but none seem to be related to doing so with modals linked via hrefs.
let foodHeaderText = document.getElementById('foodHeaderText');
const orderBtn = document.getElementsByClassName('orderBtn');
const closeBtn = document.getElementsByClassName('closeBtn');
for (let order = 0; order < orderBtn.length; order++) {
orderBtn[order].addEventListener('click', function(event) {
foodHeaderText.innerHTML = event.target.attributes["value"]["value"];
})
}
for (let close = 0; close < closeBtn.length; close++) {
closeBtn[close].addEventListener('click', function(event) {
foodHeaderText.innerHTML = "Food";
contactFormInput.reset();
})
}
//validate and display post modal
$(document).ready(function () {
$("#contactForm").submit(function (e) {
$("#closeFormButton").trigger("click");
$("#formPost").show();
});
});
*,
*::before,
*::after {
box-sizing: border-box !important;
}
html {
font-size: 100% !important;
}
.foodHeader {
display: block;
font-family: Univers, Helvetica Neue, Helvetica, Arial;
font-weight: 700;
text-align: center;
color: black;
font-size: 3rem;
margin: 0 auto;
}
.btnContainer {
display: flex;
flex-direction: row;
}
.orderBtn {
display: block;
font-family: Univers, Helvetica Neue, Helvetica, Arial;
font-weight: 700;
text-align: center;
color: white;
width: 200px;
height: 50px;
margin: 0 auto;
background-color: red;
font-size: 0.8rem;
padding: 10px 10px;
line-height: 2rem;
text-decoration: none !important;
outline: 1px solid black;
}
.closeBtnContainer {
display: block;
margin: 20px auto;
text-align: center;
}
.contactFormModal {
visibility: hidden;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
height: auto;
width: auto;
margin: 0 auto;
overflow: visible;
transform: translateY(calc(-50% - 50%));
transition: all 0.6s ease-out;
}
.contactFormModal:target {
visibility: visible;
z-index: 2;
transform: translateY(calc(50% - 50%));
transition: transform 0.6s ease-out;
}
.formWrapper {
position: relative;
display: block;
background-color: #FAFAFA;
outline: 1px solid black;
margin: 0 auto;
max-width: 520px;
width: auto;
height: auto;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.6);
}
.closeBtn {
display: inline-block;
position: absolute;
right: 1rem;
top: 0.95rem;
width: auto;
height: auto;
user-select: none;
cursor: pointer;
margin: 0 auto;
}
.fa-window-close {
color: #646464;
transition: color 0.2s linear;
}
.fa-window-close:hover,
.fa-window-close:focus {
color: black;
transition: color 0.2s linear;
}
.orderFormHeader {
font-family: Univers, Helvetica Neue, Helvetica, Arial;
display: block;
font-weight: bold;
text-align: center;
color: black;
font-size: clamp(2.2em, 3vw, 2.2em);
margin: 0rem auto;
padding: 0.7rem 0rem 0rem 0rem;
line-height: 1.3em;
letter-spacing: -0.02em;
}
.orderFormLineBreaker {
margin: 0em auto 0.5em auto;
display: block;
border: none;
color: white;
height: 1px;
background: black;
background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 190, from(#000), to(#FAFAFA));
}
.orderFormContainer {
width: 520px;
height: auto;
display: block;
position: relative;
margin: 0 auto;
background-color: transparent;
}
.footerContainer {
display: flex;
flex-direction: row;
align-items: center;
margin: 0.5rem auto;
}
.submitBtnNoSelect {
user-select: none;
}
.submitBtn {
font-family: Univers, Helvetica Neue, Helvetica, Arial;
display: inline-block;
font-weight: 700;
width: 7rem;
height: auto;
color: white;
background-color: #CC1818;
padding: 0.2rem 0rem 0.1rem 0.5rem;
margin: 0rem 1rem 0rem auto;
text-align: left;
text-decoration: none;
font-size: 1.5em;
word-spacing: normal;
cursor: pointer;
border: 1px solid black;
transition: all 0.3s ease-in-out;
}
.contactFormContainer {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
}
.orderPageRow {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
margin: 0 auto;
padding: 0.5rem 1rem 0rem 1rem;
}
.orderPageRow:first-child {
padding-top: 1rem;
}
.orderPageColumn {
display: flex;
flex-direction: column;
flex-basis: 100%;
flex: 1;
margin: 0 auto;
text-align: left;
}
.contactFieldNames {
font-family: Univers, Helvetica Neue, Helvetica, Arial;
display: inline-block;
font-weight: 700;
color: #646464;
background-color: transparent;
padding: 0rem 0rem 0rem 0rem;
margin: 0rem auto;
text-align: left;
text-decoration: none;
font-size: 1rem;
word-spacing: normal;
}
.formInput {
height: 100%;
width: 246px;
padding: 10px;
font-family: Univers, Helvetica Neue, Helvetica, Arial;
font-weight: 700;
font-size: 1rem;
}
.requiredAsterisk {
font-family: Univers, Helvetica Neue, Helvetica, Arial;
display: inline-block;
font-weight: 700;
font-size: 1em;
}
.disclosureText {
font-family: Univers, Helvetica Neue, Helvetica, Arial;
display: inline-block;
font-weight: 400;
line-height: 1.2em;
font-size: 0.7em;
text-align: justify;
text-justify: inter-word;
color: #646464;
margin: 0rem 1rem 0.85rem 1rem;
}
.commentsInput {
display: block;
font-family: Univers, Helvetica Neue, Helvetica, Arial;
font-weight: 700;
background-color: white;
font-size: 1rem;
resize: vertical;
overflow: auto;
overflow-wrap: break-word;
min-height: 82px;
width: 246px;
line-height: 20px;
padding: 10px;
border: 1px solid #767676;
border-radius: 2px;
}
/* begin form post modal */
.formPostContainer {
width: 520px;
height: auto;
display: block;
position: relative;
margin: 0 auto;
background-color: transparent;
}
.formPostModal {
visibility: hidden;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
height: auto;
width: auto;
margin: 0 auto;
overflow: visible;
transform: translateX(calc(-50% - 50%));
transition: all 0.6s ease-out;
}
.formPostModal:target {
visibility: visible;
z-index: 2;
transform: translateX(calc(50% - 50%));
transition: transform 0.6s ease-out;
}
.formPostWrapper {
position: relative;
display: block;
background-color: #FAFAFA;
outline: 1px solid black;
margin: 0 auto;
max-width: 520px;
width: auto;
height: auto;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.6);
}
.formPostConfirmationText {
position: relative;
display: block;
font-family: Oswald, Univers, Helvetica Neue, Helvetica, Arial;
font-weight: 700;
line-height: 1.2em;
font-size: 1.6em;
text-align: justify;
text-justify: inter-word;
color: #646464;
margin: 0rem 1rem;
}
.homeBtnNoSelect {
user-select: none;
}
.homeBtn {
font-family: Univers, Helvetica Neue, Helvetica, Arial;
display: inline-block;
font-weight: 700;
width: 35%;
height: auto;
color: white;
background-color: #CC1818;
padding: 0.2rem 0.5rem 0.1rem 0rem;
margin: 0.5rem auto 0rem auto;
text-align: center;
text-decoration: none;
font-size: 1.5em;
word-spacing: normal;
cursor: pointer;
border: 1px solid black;
transition: all 0.3s ease-in-out;
}
.formPostFooter {
display: flex;
flex-direction: column;
align-items: center;
margin: 0.5rem auto;
}
/* end form post modal */
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<meta name="viewport" content="width=device-width, initial-scale=1" charset="UTF-8">
<link rel=" stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="foodHeader">Order Your Food</div>
<div class="btnContainer">
<a class="orderBtn" href="#contactForm" name="foodItem" value="Cheeseburger">Order Your Cheeseburger</a>
<a class="orderBtn" href="#contactForm" name="foodItem" value="Salad" style="background-color: green">Order Your Salad</a>
<a class="orderBtn" href="#contactForm" name="foodItem" value="Sub" style="background-color: blue">Order Your Sub</a>
</div>
<a class="testBtn" href="#contactForm">
Sign Up
</a>
<a class="formSubmitPostTest" href="#formPost">
Post Form
</a>
<!-- contact form -->
<div class="contactFormModal" id="contactForm">
<form class="formWrapper" action="mailto:test#testingandrewsforms.com" method="post" enctype="text/plain" id="contactFormInput">
<a class="closeBtn" id="closeFormButton" href="#"><i class="fa fa-window-close"></i></a>
<div class="orderFormHeader">Order Your <div id="foodHeaderText">Food</div>
</div>
<div class="orderFormLineBreaker"></div>
<div class="orderFormContainer">
<div class="contactFormContainer">
<div class="orderPageRow">
<div class="orderPageColumn">
<label>
<span class="contactFieldNames">
First Name
<div class="requiredAsterisk">*</div>
</span>
</label>
</div>
<div class="orderPageColumn">
<input id="firstName" type="text" maxlength="20" minlength="2" class="formInput" required>
</div>
</div>
<div class="orderPageRow">
<div class="orderPageColumn">
<label>
<span class="contactFieldNames">
Last Name
<div class="requiredAsterisk">*</div>
</span>
</label>
</div>
<div class="orderPageColumn">
<input id="lastName" type="text" maxlength="20" minlength="2" class="formInput" required>
</div>
</div>
</div>
<div class="footerContainer">
<div id="burtonLogoOrderForm"></div>
<button class="submitBtn submitBtnNoSelect" id="submitFormBtn" type="submit" name="submit">Submit
</button>
</div>
<p class="disclosureText">Bottom text
</p>
</div>
</form>
</div>
<div class="formPostModal" id="formPost">
<div class="formPostWrapper">
<a class="closeBtn" id="closeFormButton" href="#"><i class="fa fa-window-close"></i></a>
<div class="orderFormHeader">Thank You!</div>
<div class="orderFormLineBreaker"></div>
<div class="formPostContainer">
<p class="formPostConfirmationText">We've received your request and will be in
touch soon!
</p>
<div class="formPostFooter">
<div id="burtonLogoPostForm"></div>
<div class="homeBtn homeBtnNoSelect">
Return Home
</div>
</div>
</div>
</div>
</div>
</body>
The form validation doesn't seem to trigger in Chrome so here's a jsfiddle that seems to work fine in Firefox (security settings I'm guessing?) https://jsfiddle.net/astombaugh/kf2vgq0p/678/
Bonus crude illustration just in case my explanation isn't sufficient:
I managed to come up with a solution by using the onsubmit event in JS. Since my form's validation is powered by HTML5 I needed some way of performing both the actions I desired in my original post but do so on a valid form submission and not just by clicking the submit button.
So, I removed the :target: selectors from my CSS and changed the classes to contactFormModalVisible and formPostModalVisible, and used javascript's classList to add and remove those classes as needed. Then I built an onsubmit event that only fires on a valid form submission from the HTML structure. It seems to work but I'll have to check it once I've gotten to the part where I'm actually sending information. If there's anything about this answer that could be improved please feel free to share.
let foodHeaderText = document.getElementById('foodHeaderText');
let contactForm = document.getElementById('contactForm');
let postForm = document.getElementById('formPost')
const orderBtn = document.getElementsByClassName('orderBtn');
const closeBtn = document.getElementsByClassName('closeBtn');
const submitBtn = document.getElementsByClassName('submitBtn');
for (let order = 0; order < orderBtn.length; order++) {
orderBtn[order].addEventListener('click', function(event) {
foodHeaderText.innerHTML = event.target.attributes['value']['value'];
contactForm.classList.add('contactFormModalVisible');
})
}
for (let close = 0; close < closeBtn.length; close++) {
closeBtn[close].addEventListener('click', function(event) {
foodHeaderText.innerHTML = 'Food';
contactForm.classList.remove('contactFormModalVisible');
postForm.classList.remove('formPostModalVisible');
contactFormInput.reset();
})
}
for (let submit = 0; submit < submitBtn.length; submit++) {
submitBtn[submit].addEventListener('click', function(event) {
contactForm.onsubmit = (e) => {
contactForm.classList.remove('contactFormModalVisible');
postForm.classList.add('formPostModalVisible');
e.preventDefault();
}
})
}
*,
*::before,
*::after {
box-sizing: border-box !important;
}
html {
font-size: 100% !important;
}
.foodHeader {
display: block;
font-family: Univers, Helvetica Neue, Helvetica, Arial;
font-weight: 700;
text-align: center;
color: black;
font-size: 3rem;
margin: 0 auto;
}
.btnContainer {
display: flex;
flex-direction: row;
}
.orderBtn {
display: block;
font-family: Univers, Helvetica Neue, Helvetica, Arial;
font-weight: 700;
text-align: center;
color: white;
width: 200px;
height: 50px;
margin: 0 auto;
background-color: red;
font-size: 0.8rem;
padding: 10px 10px;
line-height: 2rem;
text-decoration: none !important;
outline: 1px solid black;
}
.closeBtnContainer {
display: block;
margin: 20px auto;
text-align: center;
}
.contactFormModal {
visibility: hidden;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
height: auto;
width: auto;
margin: 0 auto;
overflow: visible;
transform: translateY(calc(-50% - 50%));
transition: all 0.6s ease-out;
}
.contactFormModalVisible {
visibility: visible;
z-index: 2;
transform: translateY(calc(50% - 50%));
transition: transform 0.6s ease-out;
}
.formWrapper {
position: relative;
display: block;
background-color: #FAFAFA;
outline: 1px solid black;
margin: 0 auto;
max-width: 520px;
width: auto;
height: auto;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.6);
}
.closeBtn {
display: inline-block;
position: absolute;
right: 1rem;
top: 0.95rem;
width: auto;
height: auto;
user-select: none;
cursor: pointer;
margin: 0 auto;
}
.fa-window-close {
color: #646464;
transition: color 0.2s linear;
}
.fa-window-close:hover,
.fa-window-close:focus {
color: black;
transition: color 0.2s linear;
}
.orderFormHeader {
font-family: Univers, Helvetica Neue, Helvetica, Arial;
display: block;
font-weight: bold;
text-align: center;
color: black;
font-size: clamp(2.2em, 3vw, 2.2em);
margin: 0rem auto;
padding: 0.7rem 0rem 0rem 0rem;
line-height: 1.3em;
letter-spacing: -0.02em;
}
.orderFormLineBreaker {
margin: 0em auto 0.5em auto;
display: block;
border: none;
color: white;
height: 1px;
background: black;
background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 190, from(#000), to(#FAFAFA));
}
.orderFormContainer {
width: 520px;
height: auto;
display: block;
position: relative;
margin: 0 auto;
background-color: transparent;
}
.footerContainer {
display: flex;
flex-direction: row;
align-items: center;
margin: 0.5rem auto;
}
.submitBtnNoSelect {
user-select: none;
}
.submitBtn {
font-family: Univers, Helvetica Neue, Helvetica, Arial;
display: inline-block;
font-weight: 700;
width: 7rem;
height: auto;
color: white;
background-color: #CC1818;
padding: 0.2rem 0rem 0.1rem 0.5rem;
margin: 0rem 1rem 0rem auto;
text-align: left;
text-decoration: none;
font-size: 1.5em;
word-spacing: normal;
cursor: pointer;
border: 1px solid black;
transition: all 0.3s ease-in-out;
}
.contactFormContainer {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
}
.orderPageRow {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
margin: 0 auto;
padding: 0.5rem 1rem 0rem 1rem;
}
.orderPageRow:first-child {
padding-top: 1rem;
}
.orderPageColumn {
display: flex;
flex-direction: column;
flex-basis: 100%;
flex: 1;
margin: 0 auto;
text-align: left;
}
.contactFieldNames {
font-family: Univers, Helvetica Neue, Helvetica, Arial;
display: inline-block;
font-weight: 700;
color: #646464;
background-color: transparent;
padding: 0rem 0rem 0rem 0rem;
margin: 0rem auto;
text-align: left;
text-decoration: none;
font-size: 1rem;
word-spacing: normal;
}
.formInput {
height: 100%;
width: 246px;
padding: 10px;
font-family: Univers, Helvetica Neue, Helvetica, Arial;
font-weight: 700;
font-size: 1rem;
}
.requiredAsterisk {
font-family: Univers, Helvetica Neue, Helvetica, Arial;
display: inline-block;
font-weight: 700;
font-size: 1em;
}
.disclosureText {
font-family: Univers, Helvetica Neue, Helvetica, Arial;
display: inline-block;
font-weight: 400;
line-height: 1.2em;
font-size: 0.7em;
text-align: justify;
text-justify: inter-word;
color: #646464;
margin: 0rem 1rem 0.85rem 1rem;
}
.commentsInput {
display: block;
font-family: Univers, Helvetica Neue, Helvetica, Arial;
font-weight: 700;
background-color: white;
font-size: 1rem;
resize: vertical;
overflow: auto;
overflow-wrap: break-word;
min-height: 82px;
width: 246px;
line-height: 20px;
padding: 10px;
border: 1px solid #767676;
border-radius: 2px;
}
/* begin form post modal */
.formPostContainer {
width: 520px;
height: auto;
display: block;
position: relative;
margin: 0 auto;
background-color: transparent;
}
.formPostModal {
visibility: hidden;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
height: auto;
width: auto;
margin: 0 auto;
overflow: visible;
transform: translateX(calc(-50% - 50%));
transition: all 0.6s ease-out;
}
.formPostModalVisible {
visibility: visible;
z-index: 2;
transform: translateX(calc(50% - 50%));
transition: transform 0.6s ease-out;
}
.formPostWrapper {
position: relative;
display: block;
background-color: #FAFAFA;
outline: 1px solid black;
margin: 0 auto;
max-width: 520px;
width: auto;
height: auto;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.6);
}
.formPostConfirmationText {
position: relative;
display: block;
font-family: Oswald, Univers, Helvetica Neue, Helvetica, Arial;
font-weight: 700;
line-height: 1.2em;
font-size: 1.6em;
text-align: justify;
text-justify: inter-word;
color: #646464;
margin: 0rem 1rem;
}
.homeBtnNoSelect {
user-select: none;
}
.homeBtn {
font-family: Univers, Helvetica Neue, Helvetica, Arial;
display: inline-block;
font-weight: 700;
width: 35%;
height: auto;
color: white;
background-color: #CC1818;
padding: 0.2rem 0.5rem 0.1rem 0rem;
margin: 0.5rem auto 0rem auto;
text-align: center;
text-decoration: none;
font-size: 1.5em;
word-spacing: normal;
cursor: pointer;
border: 1px solid black;
transition: all 0.3s ease-in-out;
}
.formPostFooter {
display: flex;
flex-direction: column;
align-items: center;
margin: 0.5rem auto;
}
/* end form post modal */
<body>
<meta name="viewport" content="width=device-width, initial-scale=1" charset="UTF-8">
<link rel=" stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="foodHeader">Order Your Food</div>
<div class="btnContainer">
<a class="orderBtn" href="#contactForm" name="foodItem" value="Cheeseburger">Order Your Cheeseburger</a>
<a class="orderBtn" href="#contactForm" name="foodItem" value="Salad" style="background-color: green">Order Your Salad</a>
<a class="orderBtn" href="#contactForm" name="foodItem" value="Sub" style="background-color: blue">Order Your Sub</a>
</div>
<a class="testBtn" href="#contactForm">
Sign Up
</a>
<a class="formSubmitPostTest" href="#formPost">
Post Form
</a>
<!-- contact form -->
<div class="contactFormModal" id="contactForm">
<form class="formWrapper" action="mailto:test#testingandrewsforms.com" method="post" enctype="text/plain" id="contactFormInput">
<a class="closeBtn" id="closeFormButton" href="#"><i class="fa fa-window-close"></i></a>
<div class="orderFormHeader">Order Your <div id="foodHeaderText">Food</div>
</div>
<div class="orderFormLineBreaker"></div>
<div class="orderFormContainer">
<div class="contactFormContainer">
<div class="orderPageRow">
<div class="orderPageColumn">
<label>
<span class="contactFieldNames">
First Name
<div class="requiredAsterisk">*</div>
</span>
</label>
</div>
<div class="orderPageColumn">
<input id="firstName" type="text" maxlength="20" minlength="2" class="formInput" required>
</div>
</div>
<div class="orderPageRow">
<div class="orderPageColumn">
<label>
<span class="contactFieldNames">
Last Name
<div class="requiredAsterisk">*</div>
</span>
</label>
</div>
<div class="orderPageColumn">
<input id="lastName" type="text" maxlength="20" minlength="2" class="formInput" required>
</div>
</div>
</div>
<div class="footerContainer">
<div id="burtonLogoOrderForm"></div>
<button class="submitBtn submitBtnNoSelect" id="submitFormBtn" type="submit" name="submit">Submit
</button>
</div>
<p class="disclosureText">Bottom text
</p>
</div>
</form>
</div>
<div class="formPostModal" id="formPost">
<div class="formPostWrapper">
<a class="closeBtn" id="closeFormButton" href="#"><i class="fa fa-window-close"></i></a>
<div class="orderFormHeader">Thank You!</div>
<div class="orderFormLineBreaker"></div>
<div class="formPostContainer">
<p class="formPostConfirmationText">We've received your request and will be in
touch soon!
</p>
<div class="formPostFooter">
<div class="homeBtn homeBtnNoSelect">
Return Home
</div>
</div>
</div>
</div>
</div>
</body>
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 have a webpage with a navigation bar and a card with information on it. The navigation bar resizes with the screen but I'm struggling to get the card to do the same
. I've tried changing the px to rem in the CSS but that doesn't seem to work. I've also tried making a wrapper that goes around the elements within the body of the HTML but that hasn't solved the problem either.
If anyone can help me with this I'd be really appreciative.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<div class="content-wrapper">
<div class="loader"></div>
<header>
[Ayanfe]:)
<ul>
<li>Next</li>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</header>
<main>
<a href="#" class="card">
<div class="inner">
<time class="subtitle">Before I delve into my pitch, I think its important to acknowledge that present me is much different from younger me. Growing up, I was extroverted, trusting and extremely open to people. As life progressed the realities of the world became more apparent and the world that lived inside my head became a lot more attractive.<time>
<br>
<br>
<time class="Key">Keyword: Escapism<time>
</div>
</a>
</div>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: black;
padding: 0;
margin: 0;
height: 100vh;
width: 100vh;
}
header {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 1.875rem 6.25rem;
display: flex;
justify-content: space-between;
align-items: center;
font-family: Poppins, sans-serif;
z-index: 10000;
}
header .logo {
color: #fff;
font-weight: 700;
text-decoration: none;
font-size: 1.563rem;
text-transform: uppercase;
letter-spacing: 0.313rem;
}
header ul{
display: flex;
justify-content: center;
align-items: center;
}
header ul li {
list-style: none;
margin-left: 1.25rem;
}
header ul li a {
text-decoration: none;
padding: 0.375rem 0.938rem;
color: #fff;
border-radius: 1.25rem;
}
header ul li a:hover,
header ul li a.active {
background: #fff;
color: #2b1055;
}
main,
footer {
max-width: 60rem;
margin: 0 auto;
}
.card {
height: 28.125rem;
position: relative;
left: 18.75rem;
top: 12.5rem;
padding: 1.25rem;
box-sizing: border-box;
display: flex;
align-items: flex-end;
text-decoration: none;
border: 0.25rem solid;
border-color: black;
margin-bottom: 1.25rem;
background: url(./Images/1.jpg);
background-repeat: no-repeat;
background-size: 105%;
margin: auto;
}
#include media {
height: 500px;
}
.inner {
height: 100%;
width: 500px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: white;
box-sizing: border-box;
padding: 40px;
border: solid;
border-color: grey;
border-radius: 2px;
}
#include media {
width: 50%;
height: 100%;
}
.title {
font-size: 24px;
color: black;
text-align: center;
font-weight: 700;
color: #181818;
text-shadow: 0px 2px 2px #a6f8d5;
position: relative;
margin: 0 0 20px 0;
}
#include media {
font-size: 30px;
}
.subtitle {
color: black;
font-size: 20px;
text-align: center;
}
.content-wrapper {
margin-left: auto;
margin-right: auto;
width: 60rem;
}
The solution to your problem is to remove the body {...} option and then responsiveness will work for <a class="card">. Plus I added some #media(max-width: ... px) settings.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: black;
}
header {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 1.875rem 6.25rem;
display: flex;
justify-content: space-between;
align-items: center;
font-family: Poppins, sans-serif;
z-index: 10000;
}
header .logo {
color: #fff;
font-weight: 700;
text-decoration: none;
font-size: 1.563rem;
text-transform: uppercase;
letter-spacing: 0.313rem;
}
header ul{
display: flex;
justify-content: center;
align-items: center;
}
header ul li {
list-style: none;
margin-left: 1.25rem;
}
header ul li a {
text-decoration: none;
padding: 0.375rem 0.938rem;
color: #fff;
border-radius: 1.25rem;
}
header ul li a:hover,
header ul li a.active {
background: #fff;
color: #2b1055;
}
main,
footer {
max-width: 60rem;
margin: 0 auto;
}
.card {
height: 28.125rem;
width: 70%;
position: relative;
left: 18.75rem;
top: 12.5rem;
padding: 1.25rem;
display: flex;
align-items: flex-end;
text-decoration: none;
border: 0.25rem solid;
border-color: black;
background: url(./Images/1.jpg);
background-repeat: no-repeat;
background-size: 105%;
margin: 0 !important;
}
/*
#include media {
height: 500px;
}*/
.inner {
height: 100%;
width: 50%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: white;
box-sizing: border-box;
padding: 40px;
border: solid;
border-color: grey;
border-radius: 2px;
}
/* #include media {
width: 50%;
height: 100%;
}*/
.title {
font-size: 24px;
color: black;
text-align: center;
font-weight: 700;
color: #181818;
text-shadow: 0px 2px 2px #a6f8d5;
position: relative;
margin: 0 0 20px 0;
}
/*#include media {
font-size: 30px;
}*/
.subtitle {
color: black;
font-size: 20px;
text-align: center;
}
.Key{
margin-top: 50px;
}
.content-wrapper {
height: 100vh;
}
#media(max-width: 1000px) {
.Key, .subtitle {
font-size: 1rem;
}
}
#media(max-width: 750px) {
.Key, .subtitle {
font-size: 0.8rem;
}
.inner {
height: 70%;
}
}
#media(max-width: 720px) {
.Key, .subtitle {
font-size: 0.6rem;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="content-wrapper">
<header>
[Ayanfe]:)
<ul>
<li>Next</li>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</header>
<a href="#" class="card">
<div class="inner">
<time class="subtitle">Before I delve into my pitch, I think its important to acknowledge that present me is much different from younger me. Growing up, I was extroverted, trusting and extremely open to people. As life progressed the realities of the world became more apparent and the world that lived inside my head became a lot more attractive.<time>
<br>
<br>
<time class="Key">Keyword: Escapism<time>
</div>
</a>
</div>
</body>
</html>
You have the width of .inner set to 500px.
That means it will always stay 500px, independent of screen size.
Try using a percentage instead - your header has width: 100%, that's why it changes width on resize.
If you need more flexibility than that, calc() allows you to calculate a value with different units, such as width: calc(20% - 10px + 2rem)
So check this out:
//Code for button a donde quieres ir
//Start var
var nearby_search;
function nearby_choose(choice){
nearby_search = choice;
}
//Overlay code
function nearby_search_on() {
document.getElementById("nearby_search").style.display = "block";
}
function nearby_search_off() {
document.getElementById("nearby_search").style.display = "none";
}
#font-face {
font-family: biolinum;
src: 'fonts/LinBiolinum_R.ttf';
}
#font-face {
font-family: biolinum;
src: 'fonts/LinBiolinum_RB.ttf';
font-weight: bold;
}
#font-face {
font-family: biolinum;
src: 'fonts/LinBiolinum_RI.ttf';
font-style: italic;
}
body {
background-color: #FCF7F8;
font-size: 62.5%;
height: 100%;
margin: 0px;
}
p {
margin-block-start: 0rem;
margin-block-end: 0rem;
}
h1 {
margin-block-start: 0rem;
margin-block-end: 0rem;
}
.domainhome {
font-family: biolinum;
font-size: 2rem;
text-align: center;
color: #1D263B;
background-color: #FCF7F8;
border: none;
cursor: pointer;
outline:none;
margin-top: 2rem;
margin-left: 5rem;
}
a:link {
color: #1D263B;
background-color: transparent;
text-decoration: none;
}
a:visited {
color: #1D263B;
background-color: transparent;
text-decoration: none;
}
.flex-container {
display: flex;
flex-shrink: 0;
/* background-color: DodgerBlue; */
margin-top: 4rem;
}
.left-bar {
flex-direction: column;
margin-left: 5rem;
}
.right-bar {
flex-direction: column;
margin-left: 5rem;
margin-right: 5rem;
height: 100%;
width: 100%;
}
button {
transition: 0.4s;
}
button:hover {
transform: rotate(-1deg) translate(0px, -8px);
}
.adondequieresir {
font-family: biolinum;
font-size: 1.66rem;
text-align: center;
color: #FCF7F8;
background-color: #1D263B;
border: none;
width: 275px;
height: 75px;
cursor: pointer;
outline:none;
margin-bottom: 3rem;
}
.agregarubicacion {
font-family: biolinum;
font-size: 1.33rem;
text-align: center;
color: #FCF7F8;
background-color: #1D263B;
border: none;
width: 275px;
height: 50px;
border-radius: 50px;
cursor: pointer;
outline:none;
margin-bottom: 3rem;
}
.personasunidas {
font-family: biolinum;
font-size: 1.33rem;
text-align: center;
color: #FCF7F8;
background-color: #1D263B;
border: none;
width: 275px;
height: 50px;
border-radius: 50px;
cursor: pointer;
outline:none;
margin-bottom: 3rem;
}
.icons {
float: left;
margin-left: 7px;
margin-right: 10px;
}
#map {
height: 400px;
}
#nearby_search {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5);
z-index: 2;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="flex-container">
<div class="left-bar">
<div>
<button onClick="nearby_search_on()" class="adondequieresir"><p>¿a dónde quieres ir?</p></button>
<div id="nearby_search">
<button onClick="nearby_search_off()" class="adondequieresir" style="background-color: #A288E3;"><p>¿a dónde quieres ir?</p></button>
</div>
</div>
</div>
</body>
</html>
I'm trying to create something like a dropdown menu, but more stylish. So I decided not to use a tag and instead use javascript variables and buttons to accomplish my goal. But the point is, when the button is clicked, I want it to turn to lighter, darken everything behind and (eventually) add other buttons with options to choose from. And the snippet above is my (faultish) approach. For example, I actually used two buttons to try and simulate the color change of virtually the same "¿a donde quieres ir" button. How can I responsively align these two buttons? What would be the cleanest way to accomplish what I want as a whole? I would kindly appreciate any help :)
I think you can use one button, separate it from the background, and then use 'z-index' to put the button up.
function nearby_search_toggle() {
var tmpDisplay = document.getElementById("tmpBg");
var tmpBtn = document.getElementById("tmpBtn");
if (tmpDisplay.style.display == 'block') {
tmpDisplay.style.display = "none";
tmpBtn.classList.remove('active');
} else {
tmpDisplay.style.display = "block";
tmpBtn.classList.add('active');
}
}
body {
background-color: #FCF7F8;
font-size: 62.5%;
height: 100%;
margin: 0px;
}
p {
margin-block-start: 0rem;
margin-block-end: 0rem;
}
h1 {
margin-block-start: 0rem;
margin-block-end: 0rem;
}
.domainhome {
font-family: biolinum;
font-size: 2rem;
text-align: center;
color: #1D263B;
background-color: #FCF7F8;
border: none;
cursor: pointer;
outline: none;
margin-top: 2rem;
margin-left: 5rem;
}
a:link {
color: #1D263B;
background-color: transparent;
text-decoration: none;
}
a:visited {
color: #1D263B;
background-color: transparent;
text-decoration: none;
}
.flex-container {
display: flex;
flex-shrink: 0;
/* background-color: DodgerBlue; */
margin-top: 4rem;
}
.left-bar {
flex-direction: column;
margin-left: 5rem;
}
.right-bar {
flex-direction: column;
margin-left: 5rem;
margin-right: 5rem;
height: 100%;
width: 100%;
}
button {
transition: 0.4s;
}
button:hover {
transform: rotate(-1deg) translate(0px, -8px);
}
.adondequieresir {
position: relative;
font-family: biolinum;
font-size: 1.66rem;
text-align: center;
color: #FCF7F8;
background-color: #1D263B;
border: none;
width: 275px;
height: 75px;
cursor: pointer;
outline: none;
margin-bottom: 3rem;
z-index: 2;
}
.adondequieresir.active {
background-color: white;
color: red;
}
#tmpBg {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 1;
}
.agregarubicacion {
font-family: biolinum;
font-size: 1.33rem;
text-align: center;
color: #FCF7F8;
background-color: #1D263B;
border: none;
width: 275px;
height: 50px;
border-radius: 50px;
cursor: pointer;
outline: none;
margin-bottom: 3rem;
}
.personasunidas {
font-family: biolinum;
font-size: 1.33rem;
text-align: center;
color: #FCF7F8;
background-color: #1D263B;
border: none;
width: 275px;
height: 50px;
border-radius: 50px;
cursor: pointer;
outline: none;
margin-bottom: 3rem;
}
.icons {
float: left;
margin-left: 7px;
margin-right: 10px;
}
#map {
height: 400px;
}
<div class="flex-container">
<div class="left-bar">
<div>
<div id="tmpBg"></div>
<button onClick="nearby_search_toggle();" class="adondequieresir" id="tmpBtn">
<p>¿a dónde quieres ir?</p>
</button>
</div>
</div>
</div>
I have created few elements but the render is making one showing below the other. In the image below, you will see that I have a toggle below the 3 tiles instead of being place before.
that should look like the image below:
below is the code :
import React from 'react';
import PriceCard from '../components/materialdesign/PriceCard';
import { Col, Row} from 'react-bootstrap';
import PriceInfo from '../config/PriceInfo';
import TextContents from '../assets/translations/TextContents';
import './HowItWorks.css';
class HowItWorks extends React.Component {
constructor(props) {
super(props);
this.state = {
toggle: false
};
this.toggleState = this.toggleState.bind(this);
}
toggleState(){
this.setState({
toggle: !this.state.toggle
});
}
render() {
const Switch =
<form className="switch-field">
<div className="switch-field-element">
<input
type="radio"
id="switch_left"
name="switchToggle"
value={TextContents.CreditsBundle}
onChange={this.toggleState}
checked={!this.state.toggle}
/>
<label htmlFor="switch_left">{TextContents.CreditsBundle}</label>
</div>
<div className="switch-field-element">
<input
type="radio"
id="switch_right"
name="switchToggle"
value={TextContents.SubscriptionsBundle}
onChange={this.toggleState}
checked={this.state.toggle}
/>
<label htmlFor="switch_right">{TextContents.SubscriptionsBundle}</label>
</div>
</form>
const CreditBundles =
<div className="hiw-price-info-container">
<PriceCard desc={TextContents.TextDescHiw1} price={PriceInfo.Credits1.values.price} credits={PriceInfo.Credits1.values.credits} percent={PriceInfo.Credits1.values.percentage} buttontext={TextContents.BuyCreditsBtn}/>
<PriceCard desc={TextContents.TextDescHiw2} price={PriceInfo.Credits2.values.price} credits={PriceInfo.Credits2.values.credits} percent={PriceInfo.Credits2.values.percentage} buttontext={TextContents.BuyCreditsBtn}/>
<PriceCard desc={TextContents.TextDescHiw2} price={PriceInfo.Credits3.values.price} credits={PriceInfo.Credits3.values.credits} percent={PriceInfo.Credits3.values.percentage} buttontext={TextContents.BuyCreditsBtn}/>
</div>
const Subscription =
<div className="hiw-price-info-container">
<PriceCard desc={TextContents.TextDescHiw1} price={PriceInfo.Subscription1.values.price} credits={PriceInfo.Subscription1.values.credits} buttontext={TextContents.SubscribeBtn}/>
<PriceCard desc={TextContents.TextDescHiw1}price={PriceInfo.Subscription2.values.price} credits={PriceInfo.Subscription2.values.credits} buttontext={TextContents.SubscribeBtn}/>
<PriceCard desc={TextContents.TextDescHiw1} price={PriceInfo.Subscription3.values.price} credits={PriceInfo.Subscription3.values.credits} buttontext={TextContents.SubscribeBtn}/>
</div>
return (
<div className="hiw-container">
<h1> {TextContents.HowItWorksTitle} </h1>
<p> {TextContents.VillagePassport} </p>
{Switch}
{!this.state.toggle && CreditBundles}
{this.state.toggle && Subscription}
</div>
);
}
}
export default HowItWorks;
and the css :
:root {
--village-selector-height: 80px;
--village-color-blue: #14cff0;
}
.hiw-container {
margin-left: auto;
margin-right: auto;
margin-top: 5rem;
margin-bottom:5rem;
width: 70%;
display: flex;
flex-direction: column;
}
.hiw-container h1{
font-family: Fredoka One;
font-size: 50px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1;
letter-spacing: normal;
text-align: center;
color: #333333;
margin-bottom: 3rem;
}
.hiw-container h2{
font-family: Fredoka One;
font-size: 40px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 0.58;
letter-spacing: -0.8px;
text-align: center;
color: #333333;
margin-bottom: 2rem;
margin-top: 5rem;
}
.hiw-container p{
font-family: Source Sans Pro;
font-size: 20px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.6;
letter-spacing: normal;
text-align: center;
color: #616161;
}
.hiw-price-info-container {
display: flex;
flex-direction: row;
justify-content: center;
height: 500px;
}
.switch-field {
display: flex;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.switch-field-element {
position: relative;
height: 80px;
}
.switch-field-element:not(:first-of-type) {
margin-left: -60px;
}
.switch-field input {
position: absolute;
height: 100%;
width: 100%;
opacity: 0;
}
.switch-field label {
display: inline-block;
position: relative;
padding: 0px 80px;
background-color:#f4f7f8;
height: 50px;
line-height: 50px;
cursor: pointer;
transition: all .1s;
color: #dfdfdf;
user-select: none;
border-radius: 40px;
font-size: 20px;
font-weight: bold;
font-family: Source Sans Pro;
}
.switch-field label::after {
content: '';
display: block;
position: absolute;
width: 4px;
height: 8px;
border-bottom: 2px solid white;
border-right: 2px solid white;
transform: rotate(45deg);
}
.switch-field input:checked + label {
background-color: var(--village-color-blue);
border-color: var(--village-color-blue);
color: white;
z-index: 1;
box-shadow: 0px 15px 20px -2px rgba(black, .1);
}
.switch-field label:first-of-type {
padding-right: 80px;
}
.switch-field label:first-of-type::before {
right: 0;
top: 0;
}
.switch-field label:first-of-type::after {
right: 12px;
top: 9px;
}
.switch-field label:last-of-type {
padding-left: 80px;
}
.switch-field label:last-of-type::before {
left: 0;
top: 0;
}
.switch-field label:last-of-type::after {
left: 12px;
top: 9px;
}
/* tablet, ipad version (change font-size here if needed)*/
#media (min-width: 768px) and (max-width: 1024px){
.hiw-container {
margin-left: auto;
margin-right: auto;
margin-bottom:5rem;
width: 50%;
}
}
/* mobile version (change font-size here if needed)*/
#media (max-width: 600px) {
.hiw-container {
margin-left: auto;
margin-right: auto;
margin-bottom:5rem;
width: 70%;
}
}
Any idea how to fix it with breaking the toggle switch experience ?
Thanks
I think if you are using bootstrap then why you are not using row and columns I can see you are using custom class for structuring which is not a good practice.
Z-index might be overwritten, try:
z-index: 1 !important;
the problem is related to CSS
.hiw-price-info-container {
display: flex;
flex-direction: row;
justify-content: center;
height: 500px;
position:relative;
}