I Made a switch to toggle between 2 contact forms. Everytime when using the button, the second form jumps.
Take a look here:
https://imgur.com/G4kGqjl
Here is my js:
$("#phone-form").hide();
$("input[name=checkbox]").click(function(){
$("#mail-form, #phone-form").fadeToggle();
});
And here my HTML:
<div class="div_switch">
<label>
<h1 class="switch_text">Email</h1>
</label>
<label class="switch">
<input name="checkbox" type="checkbox" value="checkbox">
<span class="slider round"></span>
</label>
<label>
<h1 class="switch_text">Rückruf</h1>
</label>
</div>
<div id="mail-form" class="mail-form">
<form class="" action="index.html" method="post">
<div class="contact-selector">
</div>
<div class="form-row">
<div class="input-group col-md">
<div class="input-group-prepend">
<div class="input-group-text"><i class="fas fa-signature"></i></div>
</div>
<input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Dein Name">
</div>
<div class="input-group col-md">
<div class="input-group-prepend">
<div class="input-group-text"><i class="fas fa-envelope"></i></div>
</div>
<input type="email" class="form-control" id="inlineFormInputGroup" placeholder="Deine E-Mail-Adresse">
</div>
</div>
<div class="form-row">
<div class="form-group col">
<label for="exampleFormControlTextarea1"></label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3" placeholder="Deine Nachricht..."></textarea>
</div>
</div>
<div class="email-btn-holder">
<button type="submit" class="reshape_btn email-submit">Senden</button>
</div>
</form>
</div>
<div id="phone-form" class="phone-form">
<form class="" action="index.html" method="post">
<div class="contact-selector">
</div>
<div class="form-row">
<div class="input-group col-md">
<div class="input-group-prepend">
<div class="input-group-text"><i class="fas fa-signature"></i></div>
</div>
<input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Dein Name">
</div>
<div class="input-group col-md">
<div class="input-group-prepend">
<div class="input-group-text"><i class="fas fa-envelope"></i></div>
</div>
<input type="email" class="form-control" id="inlineFormInputGroup" placeholder="Deine E-Mail-Adresse">
</div>
</div>
<div class="email-btn-holder">
<button type="submit" class="reshape_btn email-submit">Senden <span><i class="fas fa-arrow-right"></i></span></button>
</div>
</form>
</div>
I tried a couple of things. Setting the display of the parent div to absolute and some other css stuff i found on the webs but cant remember. But nothing helped.
I would really appreciate some help.
Thanks in advance!!
You should separate both forms and set a callback on your fadetoggle function (there's a completion event, use that to your favor). Try something like:
$("#phone-form").hide();
$("input[name=checkbox]").click(function(){
if($("#mail-form").is(':visible')){
$("#mail-form").fadeToggle(function(){
$("#phone-form").fadeToggle();
});
} else {
$("#phone-form").fadeToggle(function(){
$("#mail-form").fadeToggle();
});
}
});
Also, check out the api:
http://api.jquery.com/fadetoggle/
I would go with #Mauricio Cárdenas' answer, but if you absolutly must have them fade at the same time, you can do this:
<style>
#parentDiv{position:relative}
#mail-form, #phone-form{position:absolute;top:0}
</style>
<div ID="parentDiv">
<div id="mail-form" class="mail-form">
//Your form code
</div>
<div id="phone-form" class="phone-form">
//Your form code
</div>
</div>
This sets both forms to absolute and places them at the same position. Adding the parent div set to relative assures the forms position won't be set by the body.
Related
I have this part of form field
When user click on the Add button will copy the above form field and user can add more in this field .
but when I add <div id="ownership"> above the code form it start to look like this
I need to put id=ownership because I want to use it in my jQuery function
<div id="ownership">
<div class="col-lg-12 mb-30 ">
<label for="add_owner"><b><span style="color:#e60000;">*</span> Name</b></label><br>
<input class="from-control" type="text" id="name" >
</div>
<div class="col-lg-6 mb-30" >
<label for="add_owner"><b><span style="color:#e60000;">*</span> Phone number</b></label><br>
<div class="input-group-prepend">
<input class="from-control" type="text" id="phone" >
</div>
</div>
<div class="col-lg-6 mb-30" >
<label for="add_owner"><b><span style="color:#e60000;">*</span> Emailn</b></label><br>
<div class="input-group-prepend">
<input class="from-control" type="email" id="email">
</div>
</div>
</div>
<div id="owner"></div>
<br>
<div class="col-md-12">
<button type="button" class="btn btn-success w-30 add_info f-r">Add</button>
</div>
<script>
$(document).ready(function(){
$(".add_info").click(function(){
var newForm = $("#ownership").clone();
$('input', newForm).val('');
$('owner').append(newForm);
});
});
</script>
How do I fix the code in order to achieve the image in number 1 ?
try this
<div class="row">
<div class="col-sm-6"> Text</div>
<div class="col-sm-6"> Text</div>
</div>
you need to apply this format then design will be properly according your desirable.
Try this way. Always use bootstrap col class inside row class then it will not cause unexpected result.
<div class="row">
<div class="col-md-12"></div>
<div class="col-md-6"></div>
<div class="col-md-6"></div>
</div>
I am dynamically generating modals with form that look like described at the bottom. I searched and found How to handle multiple forms in one page but I unfortunately can't find out how I can handle posting one of the form if exactly that one has been clicked/submitted. Any help will be greatly appreciated.
<td class="actions">
<a href="#modalForm-1" class="modal-with-form on-default cancel-row">
<i class="fas fa-edit"></i>
</a>
<div id="modalForm-1" class="modal-block modal-block-primary mfp-hide">
<form method="post" action="/insurances/update">
<section class="card">
<header class="card-header">
<h2 class="card-title">Modification - Interhyp</h2>
</header>
<div class="card-body">
<div class="form-row">
<div class="form-group col-md-6">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" value="Interhyp" name="name">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="msisdn">MSISDN</label>
<input type="text" class="form-control" id="msisdn" value="1234567" name="msisdn">
</div>
<div class="form-group col-md-6">
<label for="email">Email</label>
<input type="email" class="form-control" id="email" value="inter-daolwin#gmail.com"
name="email_address">
</div>
</div>
</div>
<footer class="card-footer">
<div class="row">
<div class="col-md-12 text-right">
<input type="hidden" name="search_uuid" value="287b5e62-a434-4e67-9ce0-f24466876114">
<button type="submit" class="btn btn-primary modal-confirm">Submit</button>
<button class="btn btn-default modal-dismiss">Cancel</button>
</div>
</div>
</footer>
</section>
</form>
</div>
</td>
<td class="actions">
<a href="#modalForm-2" class="modal-with-form on-default cancel-row">
<i class="fas fa-edit"></i>
</a>
<div id="modalForm-1" class="modal-block modal-block-primary mfp-hide">
<form method="post" action="/insurances/update">
<section class="card">
<header class="card-header">
<h2 class="card-title">Modification - Interhyp</h2>
</header>
<div class="card-body">
<div class="form-row">
<div class="form-group col-md-6">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" value="Interhyp" name="name">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="msisdn">MSISDN</label>
<input type="text" class="form-control" id="msisdn" value="1234567" name="msisdn">
</div>
<div class="form-group col-md-6">
<label for="email">Email</label>
<input type="email" class="form-control" id="email" value="inter-daolwin#gmail.com"
name="email_address">
</div>
</div>
</div>
<footer class="card-footer">
<div class="row">
<div class="col-md-12 text-right">
<input type="hidden" name="search_uuid" value="287b5e62-a434-4e67-9ce0-f24466876114">
<button type="submit" class="btn btn-primary modal-confirm">Submit</button>
<button class="btn btn-default modal-dismiss">Cancel</button>
</div>
</div>
</footer>
</section>
</form>
</div>
</td>
The other modals bear the ids "modalForm-3", "modalForm-4" and so on and can randomly be clicked/submitted.
D.
I have a problem with TinyMCE, it looks like in the picture:
enter image description here
my HTML is:
<form action="#" method="post" id="create-product">
<div class="row">
<div class="col-4">
<label for="#product-name">Product name</label>
</div>
<div class="col-8">
<input type="text" name="product-name" class="form-control" id="product-name" placeholder="Product name" required>
</div>
<div class="col-4">
<label for="#product-category">Product category</label>
</div>
<div class="col-8">
<select name="product-category" class="selectpicker form-control" id="product-category" required>
<option value="null">--none--</option>
</select>
</div>
<div class="col-4">
<label for="#product-description">Product description</label>
</div>
<div class="col-8">
<textarea name="product-description" id="product-description"></textarea>
</div>
<div class="col-12">
<button type="submit" class="btn btn-success create-product-btn w-25 m-auto"><i class="far fa-save"></i>Save</button>
</div>
</div>
</form>
But if I remove tag, it will fix the issue whitout knowing the reason.
I'm Using Tinymce 4.7.13 and bootstrap 4,
Thanks.
It was this style who caused the problem:
.col-4 ,.col-8{
display:flex;
align-item:center
}
The red zone is the login Component and I want put my login at the center of whole page view, but i don´t know why my html and body tag don´t take all the whole blank space.
Anyway if you wanna take a look to my project, then i leave my github project https://github.com/SIGX-SENPAI/Angular-VRChat
LoginComponent.html
<form class="dropdown p-5 justify-content-center bg-danger">
<div class="form-group">
<label for="exampleDropdownFormEmail2">Email address</label>
<input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="email#example.com">
</div>
<div class="form-group">
<label for="exampleDropdownFormPassword2">Password</label>
<input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password">
</div>
<div class="form-group">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="dropdownCheck2">
<label class="form-check-label" for="dropdownCheck2">
Remember me
</label>
</div>
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>
AppComponent.html
<app-navbar *ngIf="login" (showNav)="login = $event" (showOut)="local = $event"></app-navbar>
<div class="container" *ngIf="!local">
<router-outlet></router-outlet>
</div>
<div *ngIf="local">
<!-- <iframe width="100%" height="450px"
src="https://www.youtube.com/embed/PWLPw4RE9Ig?controls=0&loop=1&autoplay=1&mute=1" frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe> -->
<div class="pt-2 pb-2">
<app-promo></app-promo>
</div>
<div class="container">
<app-home></app-home>
</div>
<app-features></app-features>
<app-footer></app-footer>
</div>
enter image description here
enter image description here
The html body is the blue shadow.
enter image description here
Have you tried making the body 100%, you also need to make the html 100%?
html, body {
height: 100%;
}
I see you are using bootstrapp.css
You dont need justify-content-center unless you are not making the element display flex d-flex
Try one of these:
Here you wrap the button in another form-group and center the button inside that wrapper
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<form class="dropdown p-5 bg-danger">
<div class="form-group">
<label for="exampleDropdownFormEmail2">Email address</label>
<input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="email#example.com">
</div>
<div class="form-group">
<label for="exampleDropdownFormPassword2">Password</label>
<input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password">
</div>
<div class="form-group">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="dropdownCheck2">
<label class="form-check-label" for="dropdownCheck2">
Remember me
</label>
</div>
</div>
<div class="form-group text-center">
<button type="submit" class="btn btn-primary m-auto d-inline-block">Sign in</button>
</div>
</form>
Here you can tell form element to center all texts, but then for all form-groups to left aling the labels
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<form class="dropdown text-center p-5 bg-danger">
<div class="form-group text-left">
<label for="exampleDropdownFormEmail2">Email address</label>
<input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="email#example.com">
</div>
<div class="form-group text-left">
<label for="exampleDropdownFormPassword2">Password</label>
<input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password">
</div>
<div class="form-group text-left">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="dropdownCheck2">
<label class="form-check-label" for="dropdownCheck2">
Remember me
</label>
</div>
</div>
<button type="submit" class="btn btn-primary m-auto d-inline-block">Sign in</button>
</form>
You can use the padding-top attribute then just find a procentage that makes it move to the middle of the screen.
Body /*Or whatever class or id you wanna move*/ {
padding-top: 20%;
}
That is the way i get around. It isn't the most professional way to do it i think but it workes
When I click on my next button and it goes to step 2 and if I reload the page I would like to make sure it stays on the same div that I am on.
The 2 divs I use are join_form_1 and join_form_2
At the moment it when I reload page it goes back to first div
How can I make it stay on the div I am on?
Codepen Example Here
$(document).ready(function(){
$("#join_form_2").hide();
$("#step_1_link").addClass("active");
$("#next").click(function(){
$("#step_1_link").removeClass("active");
$("#step_2_link").addClass("active");
$("#join_form_1").hide();
$("#join_form_2").show();
});
});
HTML
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="heading-message">
<div class="text-center">
<i class="fa fa-user" aria-hidden="true"></i>
</div>
<div class="text-center">
<h1>Request A Admin Member Login</h1>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-9 col-md-9 col-sm-12 col-xs-12">
<ol class="steps list-inline">
<li id="step_1_link">
Step 1: Set up a personal account
</li>
<li id="step_2_link">
Step 2: Choose profile picture
</li>
</ol>
<div id="join_form_1">
<div class="form-group">
<label>Username</label>
<input type="text" name="username" value="" class="form-control" placeholder="" />
</div>
<div class="form-group">
<label>Email</label>
<input type="text" name="email" value="" class="form-control" placeholder="" />
</div>
<div class="form-group">
<label>Password</label>
<input type="password" name="password" value="" class="form-control" placeholder="" />
</div>
<div class="form-group">
<label>Confirm Password</label>
<input type="password" name="confirm_password" class="form-control" placeholder="" />
</div>
<div class="form-group">
<button type="button" class="btn btn-default" id="next">Next</button>
</div>
</div><!-- Setup_1 -->
<div id="join_form_2">
<div class="form-group">
<label>Upload A Image</label>
<input type="file" name="userfile" size="50" />
</div>
</div><!-- Setup_1 -->
</div>
<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
<div class="info-box">
<h2>You'll Love This Forum</h2>
</div>
</div>
</div>
</div>
You can use javascript cookie API here
So when user clicks 'Next'
Cookies.set('active', 'join_form_2');
Than if user clicked in the previous session, show form 2.
if (Cookies.get('active') == 'join_form_2') {
$("#join_form_1").hide();
$("#step_1_link").removeClass("active");
} else {
$("#join_form_2").hide();
$("#step_1_link").addClass("active");
}
Here is working codepen.
The easiest and most reliable way to do this is to use Fragment_identifier along with :target pseudo selector.
This will work even if cookies are disabled. And since you're using bootstrap, it's easy to style <a> tags like buttons.
For example:
if (!window.location.hash) {
window.location.hash = 'step1';
.steps:not(:target) {
display: none;
}
step1
step2
<div id="step1" class="steps">Step1</div>
<div id="step2" class="steps">Step2</div>