I am using Semantic-UI for designing a site for my project and I while using modal, I am seeing a jittery behaviour.
Here is the link : Click Here to Enter The Project Site
Press the 'Register' button to open up the modal dialog, and you will notice the dialog being formed in the left side and then shows up properly.
Cannot understand the reason for this behaviour.
Some help will be appreciated.
Code :
<!-- Register Box -->
<div class="ui fluid standard modal" id="RegisterBox">
<div class="ui attached message" id="headerImage">
<div class="header" id="head">
Welcome to MeetUp!
</div>
<p id="subHead">Sign-up for a new account here.</p>
</div>
<div class="ui error form segment" id="regForm">
<div class="ui black row">
<div class="two fields">
<div class="field">
<label>First Name</label>
<input class="text" placeholder="First Name" type="text" name="fname" id="txtFn">
</div>
<div class="field">
<label>Last Name</label>
<input class="text" placeholder="Last Name" type="text" name="lname" id="txtLn">
</div>
</div>
</div>
<div class="two fields">
<div class="field">
<label>Email</label>
<input class="text" placeholder="Email Id" type="email" name="email" id="txtEmail">
</div>
<div class="field">
<label>Gender</label>
<div class="text ui selection dropdown" id="cmbSex">
<div class="default text">Select</div>
<i class="dropdown icon"></i>
<input type="hidden" name="gender">
<div class="menu">
<div class="item" data-value="male" data-text="Male">
<i class="male icon"></i>
Male
</div>
<div class="item" data-value="female" data-text="Female">
<i class="female icon"></i>
Female
</div>
</div>
</div>
</div>
</div>
<div class="two fields">
<div class="field">
<label>Password</label>
<input class="text" type="password" placeholder="Password" name="pass" id="txtPassword">
</div>
<div class="field">
<label>Confirm Password</label>
<input class="text" type="password" placeholder="Password" name="Cpass" id="txtRepeatPass">
</div>
</div>
<div class="ui blue button" id="btnSubmit">Register</div>
</div>
<i class="close icon"></i>
</div>
I've detected the problem. This is a caused by the new version of the library. Using the old version[stable] solved it.
Related
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
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.
I have a two pages sign-in and sign-up in my navbar(header) angular2 project. In my sign-up page I have a link which should have to redirect to sign-in page when we clicked it. I am unable to process it.Can anyone guide me how to do it. thanks in advance
Here are the both codes i have tried with router aswell.
sign-in.component.html
<div class="modal-content" style="padding: 10px;" id="login">
<div class="modal-body text-left">
<div class="login">
<h2>Login</h2>
<hr>
<div class="row socialButtons">
<div class="col-xs-12 col-sm-12 col-md-4">
<a class="btn btn-lg btn-block btn-facebook" (click)="signInFacebook()">
<i class="fa fa-facebook visible-xs"></i>
<span class="hidden-xs">Facebook</span>
</a>
</div>
<div class="col-xs-12 col-sm-12 col-md-4">
<a class="btn btn-lg btn-block btn-linked-in" (click)="signInLinkedin()">
<i class="fa fa-linkedin visible-xs"></i>
<span class="hidden-xs">Linkedin</span>
</a>
</div>
<div class="col-xs-12 col-sm-12 col-md-4">
<a class="btn btn-lg btn-block btn-google-plus" (click)="signInGoogle()">
<i class="fa fa-google-plus visible-xs"></i>
<span class="hidden-xs">Google</span>
</a>
</div>
</div>
<br>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<form class="loginForm" action="" autocomplete="off" method="POST">
<div class="form-group">
<label class="control-label" for="signupName">Email</label>
<input type="text" class="form-control" name="username" placeholder="Email">
</div>
<div class="form-group">
<label class="control-label" for="signinPassword">Password</label>
<input type="password" class="form-control" name="password" placeholder="Password">
</div>
<button class="btn btn-lg btn-info btn-block btnlog" type="submit">Login</button>
<hr>
</form>
</div>
</div>
<div class="row row-sm-offset-3">
<div class="col-xs-12 col-sm-12 col-md-6">
<p class="forgotPwd">
Forgot password?
</p>
</div>
</div>
</div>
</div>
</div>
sign-up.component.html
<div class="modal-content" style="padding: 20px;">
<div class="modal-body text-left">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="panel panel-primary">
<div class="panel-body">
<form method="POST" action="#" role="form">
<div class="form-group">
<h2>Create account</h2>
<hr>
</div>
<div class="form-group">
<label class="control-label" for="signupName">Your name</label>
<input id="signupName" type="text" maxlength="50" class="form-control" placeholder="Your name">
</div>
<div class="form-group">
<label class="control-label" for="signupEmail">Email</label>
<input id="signupEmail" type="email" maxlength="50" class="form-control" placeholder="Email">
</div>
<div class="form-group">
<label class="control-label" for="signupPassword">Password</label>
<input id="signupPassword" type="password" minlength="6" maxlength="25" class="form-control" length="40" placeholder="Password">
</div>
<div class="form-group">
<label class="control-label" for="signupPasswordagain">Confirm Password</label>
<input id="signupPasswordagain" type="password" minlength="6" maxlength="25" class="form-control" placeholder="Confirm Password">
</div>
<div class="form-group">
<button id="signupSubmit" type="submit" class="btn btn-info btn-block">Create your account</button>
</div>
<hr>
<p>Already have an account? Sign in</p>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
PS:- I should only do this in angular r javascriprt r bootstrap way thanks in advance
Edit :- Is there anyone can do this?
I solved my issue by adding in my signup component
<div *ngIf="hide"> //at the top
<div class="modal-content" id="register" style="padding: 20px;">
<div *ngIf="show"> //at the bottom
<app-sign-in></app-sign-in>
</div>
adding a click function to the button
<p>Already have an account? <button type="button" (click)="signin()">Sign In</button></p>
in the ts file making show = true and hide= false when required like below
export class SignUpComponent implements OnInit {
show = false;
hide = true;
signin(){
this.hide=false;
this.show=true;
}
}
I want to know if it's possible to use a button instead of href to trigger a div.
Here are examples below:
This is the current div:
<div id="ver" class="modal-block modal-block-primary mfp-hide">
<section class="panel">
<header class="panel-heading">
<h2 class="panel-title">Registration Form</h2>
</header>
<form class="form-horizontal mb-lg" method="POST" novalidate="novalidate">
<div class="panel-body">
<div class="form-group mt-lg">
<label class="col-sm-3 control-label">Name</label>
<div class="col-sm-9">
<input type="text" name="name" class="form-control" placeholder="Type your name..." required/>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Email</label>
<div class="col-sm-9">
<input type="email" name="email" class="form-control" placeholder="Type your email..." required/>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">URL</label>
<div class="col-sm-9">
<input type="url" name="url" class="form-control" placeholder="Type an URL..." />
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Comment</label>
<div class="col-sm-9">
<textarea rows="5" class="form-control" placeholder="Type your comment..." required></textarea>
</div>
</div>
</div>
<footer class="panel-footer">
<div class="row">
<div class="col-md-12 text-right">
<input type="submit" name="ola" value="Submit">
<button class="btn btn-default modal-dismiss">Cancel</button>
</div>
</div>
</footer>
</form>
</section>
This is how I can trigger it using href:
<a class="modal-with-form btn btn-default" href="#ver">Open Form</a>
This is how I tried:
<a class="modal-with-form btn btn-default" href="#ver?id=$ausenciaid">Open Form</a>
But it didn't work , there is a way to use a button instead of href?
you can try this
<input type="button" onclick="location.href='Your location';" value="Open Form" />
This will give you a button and when you click on it you will transfer/open your href
Less recommended inline way:
<button onclick="location.href='Your location';"> Open Form" </button>
OR
Attach Event & trigger using javascript:
<button type="button" id="mybutton" >Open Form </button>
<script>
document.getElementById("mybutton").addEventListener("click", function(){
window.location.href = <input type="button" onclick="location.href='Your location';
});
</script>
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>