I have been working on a login/sign-up form where the display switches between the two forms when clicking on specific buttons. The issue that I'm facing is that the functionality only works once. My client provided me with a website template that they purchased, which includes extensive custom CSS files and its own version of Bootstrap (CSS and JavaScript). I suspect that there might be some modifications in the template causing this problem.
The HTML code for the login form and dynamic tabs looks like this:
<!-- SIGN IN/UP FORM -->
<div class="form-custom text-center container bg-white">
<img src="images/logo.png" alt="">
<div class="tab-content">
<div id="signin" class="tab-pane fade in active">
<form action="" method="post" class="mb-3">
<div class="container px-4">
<input class="form-style" type="email" name="email" placeholder="Email">
<input class="form-style" type="password" name="password" placeholder="Password">
</div>
</form>
</div>
<div id="signup" class="tab-pane fade">
<form action="" method="post" class="mb-3">
<div class="container px-4">
<input class="form-style" type="text" name="first_name" placeholder="First Name">
<input class="form-style" type="text" name="last_name" placeholder="Last Name">
<input class="form-style" type="email" name="email" placeholder="Email">
<input class="form-style" type="password" name="password" placeholder="Password">
</div>
</form>
</div>
</div>
<ul class="nav nav-pills">
<div class="container">
<div class="d-flex flex-row justify-content-center">
<li class="active">
<button data-toggle="pill" href="#signin" class="btn btn-sign">Sign in</button>
</li>
<li>
<button data-toggle="pill" href="#signup" class="btn btn-sign">Sign up</button>
</li>
</div>
</div>
</ul>
</div>
Here are my own custom style classes created from Sass:
.form-custom {
position: absolute;
top: 35vh;
left: calc(90vw - 475px);
width: 475px;
z-index: 5000;
}
@media (max-width: 575.98px) {
.form-custom {
width: 420px;
left: calc(90vw - 420px);
}
}
@media (max-width: 500px) {
.form-custom {
width: 375px;
left: calc(90vw - 375px);
}
}
@media (max-width: 400px) {
.form-custom {
width: 275px;
left: calc(90vw - 275px);
}
}
.form-style {
display: block;
width: 100%;
border-top: 0px;
border-right: 0px;
border-left: 0px;
font-size: 1rem;
}
.form-style:focus {
outline-color: transparent;
}
.btn-sign {
display: inline;
margin: 0px 20px 0px 20px;
border-radius: 0px;
width: 180px;
}
@media (max-width: 575.98px) {
.btn-sign {
width: 162px;
}
}
@media (max-width: 500px) {
.btn-sign {
width: 126px;
}
}
@media (max-width: 400px) {
.btn-sign {
width: 90px;
}
}
If anyone has any insights or suggestions on how to make this work seamlessly without glitches, please feel free to share. Your help will be greatly appreciated. Thank you!