I'm not sure where I went wrong but my bootstrap form won't work as is because I can't type anything into the form boxes. If I move the form boxes above the third div from the top the email box works and if I move them above the second div from the top both boxes work. Can anyone explain what's going on and how to fix this?
<div class ="container" style= "height:150px;">
<div id="Logo" class="col-xs-12 col-md-11">
<img id="CashPass" src="assets/images/CashPassLogo (2).png"/>
</div>
</div>
<div class="container" style= "height:500px;" id="intro">
<div id="HomeTopContainer" class="col-xs-12 col-md-8">
<h3>
Something <i>Something</i>
</h3>
<img id="Something" src="https://abc123.jpg"/>
</div>
<div id="signup"> <!--style="height:500px; padding-right: 10%;"-->
<div class="col-xs-6 col-md-4">
<h1 class="hit">
Something
</h1>
<form class="form" name="form" ng-submit="signUp()" novalidate>
<div class="form-group"
ng-class="{ 'has-success': form.email.$valid && submitted, 'has-error': form.email.$invalid && submitted }">
<!--<label>Email</label>-->
<input type="email" name="email" class="form-control" placeholder = "Email" ng-model="user.email" required/>
</div>
<div class="form-group"
ng-class="{ 'has-success': form.password.$valid && submitted, 'has-error': form.password.$invalid && submitted }">
<!--<label>Password</label>-->
<input type="password" name="password" class="form-control" placeholder = "Password" ng-model="user.password"
ng-minlength="3"
required/>
<p class="help-block"
ng-show="(form.password.$error.minlength || form.password.$error.required) && submitted">
Password must be at least 3 characters.
</p>
</div>
</form>
</div>
</div>
<div class= "hit">
<button class="btn btn-inverse btn-lg btn-login" id = "Join" type="submit">
Join
</button>
<a class="btn btn-default btn-lg btn-register" id = "login" href="/stuff">
Login
</a>
</div>
The SCSS is as follows:
.hit {
position: relative;
padding: 30px 15px;
/*color: #F5F5F5;*/
text-align: center;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
/*background: #4393B9;*/
.center-block{};
}
.center-block {
font-size: 5em;
width: 150px;
height: 150px;
text-align: center;
};
/*id*/
#intro {
background-color: #add8e6;
}
#glyphicon{
text-align: right;
font-size: 5em;
}
#HomeTopContainer {
text-align: center;
}
#signup{
margin-left: auto;
margin-right: auto;
}
#bottomborder{
height: 75px;
background-color: #19469D;
margin-top: -7px;
text-align: center;
font-size: 20px;
}
You basically have elements overlapping each other. Your class .hit is stacked on top of your other containers (you can see it if you allow that aqua background color to show) To get around this add this CSS:
#signup {
position: relative;
z-index: 10;
}
crazymatt, thanks again for your response, though it wasn't right it got me on the right track. I actually added the following code to fix it:
.form-group{
position: relative;
z-index: 10;
}
Related
my goal is to create something like this :enter image description here
So an area where I can put a form for authentification or create an account. I already created a form in php which is linked to my database like this
<form action="connection.php" method="post">
<div class="form-group">
<label >Nom</label>
<input name = nom>
</div>
<div class="form-group">
<label >Prénom</label>
<input name = prenom>
</div>
<div class="form-group">
<label >Email</label>
<input name = mail>
</div>
<div class="form-group">
<label >Numéro de telephone</label>
<input name = tel>
</div>
<div class="form-group">
<label >mot de passe</label>
<input type=password id="inputPassword" placeholder="Password"">
</div>
<button type="submit" class="btn btn-primary" name="add">Creer son compte</button>
function inscription($db,$nom,$prenom,$mail,$tel,$mdp){
try{
$request_client = "INSERT INTO client (nom, prenom, mail, tel, mdp) VALUES (:nom, :prename, :email, :phone,:pass);";
$statement_client = $db->prepare($request_client);
$statement_client->bindParam(':nom', $nom);
$statement_client->bindParam(':prename', $prenom);
$statement_client->bindParam(':email', $mail);
$statement_client->bindParam(':phone', $tel);
$statement_client->bindParam(':pass', $mdp);
$statement_client->execute();
}
catch (PDOException $exception)
{
error_log('Request error: '.$exception->getMessage());
return false;
}
}
Is there something in boostrap or css or even js which can make me creat this blue area ?
You can do this with CSS, something like:
.blue-box {
max-width: 450px;
margin: 1rem auto;
padding: 1rem;
background: #3b52a5;
border-radius: 8px;
color: #fff;
}
.blue-box .form-group {
display: flex;
justify-content: space-between;
flex-direction: column;
margin: 0.5rem 0;
}
.blue-box .form-group input {
padding: 0.75rem 1rem;
margin-top: 0.25rem;
border: 1px solid #060537;
border-radius: 8px;
background: none;
outline: none;
color: #fff;
}
.blue-box button {
padding: 0.75rem 1rem;
margin: 0.5rem auto;
background: #060537;
border-radius: 8px;
width: 100%;
outline: none;
border: none;
color: #fff;
}
body {
background: #7db9ff;
font-family: sans-serif;
}
<form action="connection.php" method="post" class="blue-box">
<div class="form-group">
<label >Nom</label>
<input name = nom>
</div>
<div class="form-group">
<label >Prénom</label>
<input name = prenom>
</div>
<div class="form-group">
<label >Email</label>
<input name = mail>
</div>
<div class="form-group">
<label >Numéro de telephone</label>
<input name = tel>
</div>
<div class="form-group">
<label >mot de passe</label>
<input type=password id="inputPassword" placeholder="Password"">
</div>
<button type="submit" class="btn btn-primary" name="add">Creer son compte</button>
</form>
Perhaps it might be enough to make the background color of <form> into the blue that you want and also add a little padding to it so that the form fields aren't right at the edge of the box.
HTML p-3 will be your padding but only on sites that use Bootstrap.
<form class="blueBox p-3" action="connection.php" method="post">
CSS
.blueBox{
background: blue;
}
My actual test website
1.) Click on the hero head image on the top
2.) The dark gray box of the form slides in
3.) Do not fill in the form
4.) Click once on the submit button
5.) Then click on the hero head again
6.) The blue box of the Thank you page slides in
This shouldnt happen this way.
Before adding the PHP functionality of the form, I want to test the onClick submit button (not the hero head) to slide in the blue box Thank you page when form is filled in.
jQuery - I set two classes one for the hero head to slide in the form and one for the Thank you page.
JSFIDDLE does not actually show the blue box instead it goes to 404 error page
<script>
$(".openNav").click(function() {
$('.box').show();
$('.box').toggleClass("slideUp");
});
$(".openNav2").click(function() {
$('.box2').show();
$('.box2').toggleClass("slideUp");
});
</script>
HTML -
<div class="box2 slideUp" style="display: none;">
<div class="info">
<div class="frm-details">
<div class="frm-name">THANK YOU!</div>
<div class="frm-header">I will get back to you ASAP!</div>
</div>
</div>
</div>
**<!-- DARK GRAY BOX SLIDES IN -->**
<div class="box slideUp" style="display: none;">
<div class="info">
<div class="frm-details">
<div class="frm-name">FILL OUT THE FORM</div>
<div class="form-box">
<form>
<div class="frm-group">
<input type="text" required>
<span class="frm-highlight"></span>
<span class="frm-bar"></span>
<label>Full Name</label>
</div>
<div class="frm-group">
<input type="text" required>
<span class="frm-highlight"></span>
<span class="frm-bar"></span>
<label>Email</label>
</div>
<div class="frm-group">
<input type="text" required>
<span class="frm-highlight"></span>
<span class="frm-bar"></span>
<label>Text Number</label>
</div>
<div class="frm-group">
<input type="text" required>
<span class="frm-highlight"></span>
<span class="frm-bar"></span>
<label>Company Name</label>
</div>
<div class="frm-group">
<textarea type="text" rows="6" required></textarea>
<span class="frm-highlight"></span>
<span class="frm-bar"></span>
<label>Message</label>
</div>
<div class="" id=""><button class="btn-submit" class="openNav2">SEND</button> **<-- CLICK TO SLIDE THE THANK YOU BLUE BOX**
</div>
</form>
</div>
</div>
</div>
</div>
**<!-- HERO HEAD TO CLICK -->**
<div class="img-circle"><img src="imgs/img-christian.png"></div>
CSS -
/* GRAY FORM BOX */
.box {
position: fixed;
width: 288px;
height: 100vh;
background-color: #0b151b;
z-index: 0;
overflow: hidden;
transition: all 0.2s ease-in-out;
top: 170px;
text-align: center;
margin: 0 auto;
right: 0;
left: 0;
box-sizing: border-box;
}
.box.slideUp {
height: 0;
}
/* BLUE THANK YOU BOX */
.box2 {
position: fixed;
width: 288px;
height: 100vh;
background-color: #0084ff;
z-index: 0;
overflow: hidden;
transition: all 0.2s ease-in-out;
top: 170px;
text-align: center;
margin: 0 auto;
right: 0;
left: 0;
box-sizing: border-box;
}
.box2.slideUp {
height: 0;
}
I have a request form in which I have a table with pre-typed text (which belongs to other field in form in HR) which is in hide/show select option. I need some help in which when the user selects the selected it shows a table with pre-typed text and when the user submits in PHP form, the recipient so gets the exact data in the email.
I have the hide/show part working but the I'm having problems sending the table with text.
i have $usersGMGroup = nl2br($_POST["acc_GMGroup"]); so i can have the text can go to next line.
Currently, I didn't have any way in which I could submit the table so I have the same table text written in textarea, which works but when I submit the form with data and the recipient gets textarea text with the other request. For example, if I sent a request for an IT service the form also sends the textarea pre type text.
Is there any way i can make the textarea with pre type text only submit when its select is selected
$(function() {
$("#groups").change(function() {
if ($(this).val() == "GM") {
$("#groups_GM").show();
$("#acc_GMGroup").show();
} else {
$("#groups_GM").hide();
$("#acc_GMGroup").hide();
}
});
});
$('#groups').trigger('change');
//---------------------Hide Functions When Program Loads--------------------------------//
$(document).ready(function() {
$("#acc_GMGroup").hide();
});
html,
body {
min-height: 100%;
}
body,
div,
form,
input,
label {
padding: 0;
margin: 0;
outline: none;
font-family: Roboto, Arial, sans-serif;
font-size: 15px;
color: #666;
line-height: 19px;
}
legend {
color: #fff;
background-color: #095484;
padding: 3px 5px;
font-size: 20px;
}
h1 {
position: absolute;
margin: 0;
font-size: 36px;
color: #fff;
z-index: 2;
}
.testbox {
display: flex;
justify-content: center;
align-items: center;
height: inherit;
padding: 20px;
}
form {
width: 75%;
padding: 20px;
border-radius: 8px;
background: #fff;
box-shadow: 0 0 50px 0 #095484;
}
.banner {
position: relative;
height: 300px;
background-image: url("");
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.banner::after {
content: "";
background-color: rgba(0, 0, 0, 0.6);
width: 100%;
height: 100%;
}
input {
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 3px;
font-size: 17px;
font-weight: bold;
}
input {
width: calc(100% - 10px);
padding: 5px;
}
select {
width: 100%;
padding: 3px 0;
background: transparent;
font-size: 17px;
font-weight: bold;
}
.hiddenField {
display: none;
}
table.tb {
border-collapse: collapse;
width: 650px;
}
.tb th,
.tb td {
padding: 6px;
border: solid 1px #262626;
}
.tb th,
.tb td {
color: #262626;
}
.tb th {
background-color: lightblue;
}
textarea {
white-space: pre;
text-align: left;
width: 650px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="frmContact" id="frmContact" method="post" action="" enctype="multipart/form-data" class="p-3">
<div class="form-group">
<h2>Requestor's Information Employee's Information</h2>
<hr>
<div class="row">
<div class="col-6">
<label for="userReqEmp">Requestor Name</label>
<input type="text" class="form-control w-100" id="userReqEmp" name="userReqEmp" placeholder="Type Here...">
</div>
<div class="col-6">
<label for="userNameEmp">Full Name</label>
<input type="text" class="form-control w-100" id="userNameEmp" name="userNameEmp" placeholder="Type Here...">
</div>
<div class="col-6">
<label for="userComEmp">Comments (Optional)</label>
<textarea type="text" class="form-control w-100" id="userComEmp" name="userComEmp" rows="7" placeholder="Type Here..."></textarea>
</div>
<div class="col-6">
<div class="row">
<label class="col-12" for="userEIDEmp">Employee ID</label>
</div>
<div class="row">
<div class="col-12">
<input type="text" class="form-control w-100" id="userEIDEmp" name="userEIDEmp" placeholder="Type Here...">
</div>
</div>
<div class="row">
<label class="col-12" for="userOIDEmp">One ID</label>
</div>
<div class="row">
<div class="col-12">
<input type="text" class="form-control w-100" id="userOIDEmp" name="userOIDEmp" placeholder="Type Here...">
</div>
</div>
<div class="row">
<label class="col-12" for="userDateEmp">Start Date</label>
</div>
<div class="row">
<div class="col-12">
<input type="date" class="form-control w-100" id="userDateEmp" name="userDateEmp" placeholder="Type Here...">
</div>
</div>
<div class="row">
<label class="col-12">Select Department</label>
</div>
<div class="row">
<div class="col-12">
<select id="groups" name="groups" class="form-control w-100">
<option value="">Select an option</option>
<option value="GM">GM</option>
<option value="AGM">AGM</option>
</select>
</div>
</div>
<br>
<!-- GM -->
<div class="row">
<div class="col-12" id="groups_GM" name="groups_GM" style="display: none;">
<h2>DC GM Group</h2>
<table class="tb">
<tr>
<th>Domain Group Access</th>
<!-- Title -->
</tr>
<tr>
<td>PUBLIC<br>FunctionManagers<br>Managers</td>
<!-- Content -->
</tr>
<tr>
<th>Distribution List</th>
<!-- Title -->
</tr>
<tr>
<td>Woodland Mgmt<br>DCManager<br>InboundManagers<br>SrManager</td>
<!-- Content -->
</tr>
<tr>
<th>Additional Access</th>
<!-- Title -->
</tr>
<tr>
<td>DCNet<br>AS400<br>VPN Non-Standard</td>
<!-- Content -->
</tr>
</table>
</div>
</div>
<div class="row">
<div class="col-6">
<textarea class="textarea" id="acc_GMGroup" name="acc_GMGroup">
<u>Domain Group Access</u>
PUBLIC
FunctionManagers
Managers
<u>Distribution List</u>
Woodland Mgmt
DCManager
InboundManagers
SrManagers
<u>Additional Access</u>
DCNet
AS400
VPN Non-Standard
</textarea>
</div>
</div>
</div>
<!-- End of Right Side -->
</div>
</div>
</form>
you can have it disabled by default by adding disabled attribute to it which will prevent the field from being submitted with the rest of the form
<textarea class="textarea" id="acc_GMGroup" name="acc_GMGroup" disabled>
<u>Domain Group Access</u>
PUBLIC
FunctionManagers
Managers
<u>Distribution List</u>
Woodland Mgmt
DCManager
InboundManagers
SrManagers
<u>Additional Access</u>
DCNet
AS400
VPN Non-Standard
</textarea>
and re-enable it when option selected
if ($(this).val() == "GM") {
$("#groups_GM").show();
$("#acc_GMGroup").show();
$("#acc_GMGroup").prop('disabled','');
} else {
$("#groups_GM").hide();
$("#acc_GMGroup").hide();
$("#acc_GMGroup").prop('disabled','disabled');
}
For school homework, I'm creating a single page with another student. Our teacher gave us an HTML-File to clone some of the components for our own project, so that we don't have to write it from scratch. We want to create our own .js file with some listeners for the components we take from her file.
The below code produces a label called "keywords" with a question mark icon to its right and a text field further right. A click on the question mark icon opens a popup window with some options and the text field allows comma-separated strings as "keywords". Our problem is that on our HTML-Page, all these elements show up with no problem, but the popup window won't show up when we click on the question mark icon and the text field is also not activated when we click on it.
We looked at our teacher's HTML file and played on it a bit. We found out, that when we remove her js file as a script the same thing happens on her HTML file too. So we looked into her js file and checked the 55.000 lines long js file for some reference to these elements and found nothing. So we don't know, why ours doesn't work. The console shows no errors in the output when we open our HTML file. How can we make these elements respond to clicks? where should we look for errors, mistakes?
<div class="form-group">
<label class="control-label col-md-4 col-lg-3" for="offer_tag_list">
<div class="inline-help form-label" data-help="<b>You would like to use keywords:</b> In that case use one or more words for each keyword and use a comma to seperate.
br>
<b>You want to remove a keyword?</b> Then click on the <i class="fa fa-remove"></i> symbol at the end of that keyword.
<div class="panel panel-default" id="feedback-form">
<div class="panel-heading">
<h4 class="panel-title">
<i class="fa fa-question-circle"></i> Was that information useful? </h4>
</div>
<div class="panel-body">
<form class="feedback" role="form" id="new_feedback" action="/feedbacks" accept-charset="UTF-8" data-remote="true" method="post"><input name="utf8" type="hidden" value="✓" />
<div class="form-group"><textarea placeholder="You can write comments here." class="form-control" name="feedback[comment]" id="feedback_comment">
</textarea></div>
<input type="hidden" value="/offers/new" name="feedback[context]" id="feedback_context" />
<input type="hidden" value="offers.tag_list" name="feedback[help_key]" id="feedback_help_key" />
<div class="actions"> <input type="submit" name="feedback[helpful]" value="Ja" class="btn btn-default" data-disable-with="Ja" /> <input type="submit" name="feedback[helpful]" value="Nein" class="btn btn-default" data-disable-with="Nein" /></div></form> <div class="hidden response">
Thank you for your Feedback!
</div>
</div>
</div>
" data-heading="How to use keywords?" data-help-key="offers.tag_list">
<i class="fa fa-question-circle-o"></i>
</div>Keywords
</label>
<div class="col-md-8 col-lg-9">
<div class="bootstrap-tagsinput">
<span class="twitter-typeahead" style="position: relative; display: inline-block;">
<input type="text" class="tt-hint" readonly="" spellcheck="false" tabindex="-1" dir="ltr" style="position: absolute; top: 0px; left: 0px; border-color: transparent; box-shadow: none; opacity: 1; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">
<input type="text" placeholder="" class="tt-input" spellcheck="false" dir="auto" aria-activedescendant="" aria-owns="undefined_listbox" role="combobox" aria-readonly="true" aria-autocomplete="list" style="">
<span role="status" aria-live="polite" style="position: absolute; padding: 0px; border: 0px; height: 1px; width: 1px; margin-bottom: -1px; margin-right: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap;"></span>
<pre aria-hidden="true" style="position: absolute; visibility: hidden; white-space: pre; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 28px; font-style: normal; font-variant: normal; font-weight: 400; word-spacing: 0px; letter-spacing: 0px; text-indent: 0px; text-rendering: auto; text-transform: none;"></pre>
<div role="listbox" class="tt-menu" style="position: absolute; top: 100%; left: 0px; z-index: 100; display: none;">
<div role="presentation" class="tt-dataset tt-dataset-tags"></div>
</div>
</span>
</div>
<input value="" data-use-tagsinput="true" class="form-control" type="text" name="offer[tag_list]" id="offer_tag_list" style="display: none;">
</div>
</div>
Does slideToggle() change padding or margins during the transition and than bringing them back to normality? Bacause i'm trying to toggle two forms, one for login and one for registration for a static html page, but during the transition something like a top margin is created between my forms and other stuff (A text to be precise) and than everything is resized back to how it is supposed to be.
First screen is with static page and no transition, the latter during the transition: https://imgur.com/a/R5pppq5
Here the code, I'm programming on Atom with live server plugin:
// Example starter JavaScript for disabling form submissions if there are invalid fields
var index_toggle = new Boolean(true);
$(document).ready(function() {
$("#toggle_home").click(function() {
$("#login").slideToggle("slow");
$("#register").slideToggle("slow");
$("#toggle_home_txt").fadeOut(function() {
if (index_toggle) {
$(this).html("↧ LOGIN").fadeIn();
} else {
$(this).html("↥ REGISTER").fadeIn();
}
index_toggle = !index_toggle;
});
});
});
#register {
display: none;
}
body.index {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
padding-top: 80px;
padding-bottom: 40px;
background-color: white;
color: #6c757d;
}
div.index {
padding-top: 40px;
padding-bottom: 0px;
border-radius: 3%;
width: 500px;
}
button {
border-radius: 20%;
padding-bottom: 10%;
padding-top: 0;
background-color: #e9ecef;
border-color: #6c757d;
border-style: solid;
color: #6c757d;
transition: 0.3s ease;
}
button:focus {
outline: none;
}
#send_butt {
width: 40px;
height: 40px;
}
button:hover {
background-color: #6c757d;
color: white;
}
button.toggle_home {
top: 0px;
padding-bottom: 2%;
transform: translate(0, -100%);
}
img.index {
width: 100px;
height: 100px;
border-radius: 50%;
position: absolute;
left: 50%;
transform: translate(-50%, -100%);
background-color: #e9ecef;
border-color: white;
border-style: solid;
}
.form-signin {
width: 450px;
padding: 15px;
margin: auto;
}
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body class="text-center index">
<div class="jumbotron index form-signin">
<img src="images/user_index.png" class="index" />
<p id="index_text" class="my-3">Please fill this form to create an account.</p>
<form id="login" novalidate>
<hr>
<div class="form-row">
<!-- Username input -->
<div class="col-md-12 mb-3">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"> ›</span>
</div>
<input type="text" class="form-control" id="LoginUsername" placeholder="Username" required>
</div>
</div>
</div>
<!-- Password input -->
<div class="form-row">
<input type="password" class="col-md-6 mb-3 form-control" id="LoginPassword" placeholder="Password" required>
<div class="text-right col-md-6 mb-3 form-check">
<input class="form-check-input" type="checkbox" id="LoginRemember">
<label class="form-check-label" for="LoginRemember">Remember me?</label>
</div>
</div>
</form>
<div id="div_toggle">
<hr>
<div class="toggle_home" style="float:left;">
<button id="toggle_home" class="toggle_home">
<div id="toggle_home_txt">
↥ REGISTER
</div>
</button>
</div>
</div>
<form id="register" class="form-signin mt-5" novalidate>
<div class="form-row">
<div class="col mb-3">
<input type="text" class="form-control" id="RegName" placeholder="First name" required>
</div>
<div class="col-md-6 mb-3">
<input type="text" class="form-control" id="RegSurname" placeholder="Surname" required>
</div>
</div>
<div class="form-row">
<div class="col-md-12 mb-3">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"> ›</span>
</div>
<input type="text" class="form-control" id="RegUsername" placeholder="Username" required>
</div>
</div>
</div>
<div class="form-row">
<div class="col-md-6 mb-3">
<input type="password" class="form-control" id="RegPassword" placeholder="Password" required>
</div>
<div class="col-md-6 mb-3">
<input type="password" class="form-control" id="RegConfirmPassword" placeholder="Confirm Password" required>
</div>
</div>
<hr/>
</form>
<div style="float:right;">
<button id="send_butt" class="mb-2">›</button>
</div>
</div>
</body>
For anyone looking for another solution to this issue, you can use a pseudo element with a fixed height in place of margins to stop the collapsing margins effect, e.g:
.hidden-element:before {
display: block;
width: 100%;
height: 24px; /* the top margin height you want */
content: '';
}
You can also use an :after for the bottom margin.
I believe the changing gap is a result of margin collapse.
Parent and first/last child
If there is no border, padding, inline part, block formatting context created, or clearance to separate the margin-top of a block from the margin-top of its first child block ... then those margins collapse. The collapsed margin ends up outside the parent.
On page load, margins are collapsed between p.index_text and the <hr> inside form#login. When jQuery starts slideDown(), it adds overflow:hidden to the sliding element #form#login. This creates "clearance" between the <p> and the <hr> and the margin stops collapsing. Visually, the gap increases between the two elements.
There are various methods to prevent margin collapse. I chose padding since the other form already has some:
#login {
padding:15px;
}
Working example:
// Example starter JavaScript for disabling form submissions if there are invalid fields
var index_toggle = new Boolean(true);
$(document).ready(function() {
$("#toggle_home").click(function() {
$("#login").slideToggle("slow");
$("#register").slideToggle("slow");
$("#toggle_home_txt").fadeOut(function() {
if (index_toggle) {
$(this).html("↧ LOGIN").fadeIn();
} else {
$(this).html("↥ REGISTER").fadeIn();
}
index_toggle = !index_toggle;
});
});
});
#register {
display: none;
}
body.index {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
padding-top: 80px;
padding-bottom: 40px;
background-color: white;
color: #6c757d;
}
div.index {
padding-top: 40px;
padding-bottom: 0px;
border-radius: 3%;
width: 500px;
}
button {
border-radius: 20%;
background-color: #e9ecef;
border-color: #6c757d;
border-style: solid;
color: #6c757d;
transition: 0.3s ease;
}
button:focus {
outline: none;
}
#send_butt {
width: 40px;
height: 40px;
}
button:hover {
background-color: #6c757d;
color: white;
}
img.index {
width: 100px;
height: 100px;
border-radius: 50%;
position: absolute;
left: 50%;
transform: translate(-50%, -100%);
background-color: #e9ecef;
border-color: white;
border-style: solid;
}
.form-signin {
width: 450px;
padding: 15px;
margin: auto;
}
#login {
padding:15px;
}
hr,
#register {
margin: 0 !important;
}
#div_toggle {
display: flex;
align-items: center;
}
#div_toggle:after {
content: "";
flex: 1 0 auto;
border-top: 1px solid #CCC;
}
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body class="text-center index">
<div class="jumbotron index form-signin">
<img src="images/user_index.png" class="index" />
<p id="index_text" class="my-3">Please fill this form to create an account.</p>
<form id="login" novalidate>
<hr>
<div class="form-row">
<!-- Username input -->
<div class="col-md-12 mb-3">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"> ›</span>
</div>
<input type="text" class="form-control" id="LoginUsername" placeholder="Username" required>
</div>
</div>
</div>
<!-- Password input -->
<div class="form-row">
<input type="password" class="col-md-6 mb-3 form-control" id="LoginPassword" placeholder="Password" required>
<div class="text-right col-md-6 mb-3 form-check">
<input class="form-check-input" type="checkbox" id="LoginRemember">
<label class="form-check-label" for="LoginRemember">Remember me?</label>
</div>
</div>
</form>
<div id="div_toggle">
<button id="toggle_home" class="toggle_home">
<div id="toggle_home_txt">
↥ REGISTER
</div>
</button>
</div>
<form id="register" class="form-signin mt-5" novalidate>
<div class="form-row">
<div class="col mb-3">
<input type="text" class="form-control" id="RegName" placeholder="First name" required>
</div>
<div class="col-md-6 mb-3">
<input type="text" class="form-control" id="RegSurname" placeholder="Surname" required>
</div>
</div>
<div class="form-row">
<div class="col-md-12 mb-3">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"> ›</span>
</div>
<input type="text" class="form-control" id="RegUsername" placeholder="Username" required>
</div>
</div>
</div>
<div class="form-row">
<div class="col-md-6 mb-3">
<input type="password" class="form-control" id="RegPassword" placeholder="Password" required>
</div>
<div class="col-md-6 mb-3">
<input type="password" class="form-control" id="RegConfirmPassword" placeholder="Confirm Password" required>
</div>
</div>
<hr/>
</form>
<div style="float:right;">
<button id="send_butt" class="mb-2">›</button>
</div>
</div>
</body>
The animations also seem to jump and the end, but that may be a separate issue.
Edit
Further jumping seems to have been caused by margin on the second form, so I removed it. The translated button seemed to cause problems, too, so I rebuilt it. Code above was edited accordingly.