Preventing password box auto select - html

I am learning django and have built a very basic profile form, I am experiencing a strange issue during page load.
The profile page has a password change form which is at the page bottom and during the browser loading, it auto-navigates to this form and enters the first input field of the form?
Has anyone experienced this and if so how do i prevent this from occurring?
Form on load:
<div class="col-lg-4">
<div class="block">
<!-- Table Styles Title -->
<div class="block-title">
<h2><strong>Change Password</strong></h2>
</div>
<p>Change your password here!</p
<form action="/profile/change_password/" method="post" class="form-horizontal">
<input type="hidden" name="csrfmiddlewaretoken" value="Azuwo63bFBZyum9WJSwwp8gwNcdBKw0cvURhLHoZcVDTsq7ecAJArZTYFE0dHleB">
<div class="col-xs-12">
<div id="div_id_old_password" class="form-group">
<label for="id_old_password" class=" requiredField">
Old password<span class="asteriskField">*</span> </label>
<div class="">
<input type="password" name="old_password" autocomplete="current-password" autofocus class="textinput textInput form-control" required id="id_old_password"> </div>
</div>
<div id="div_id_new_password1" class="form-group">
<label for="id_new_password1" class=" requiredField">
New password<span class="asteriskField">*</span> </label>
<div class="">
<input type="password" name="new_password1" autocomplete="new-password" class="textinput textInput form-control" required id="id_new_password1"> <small id="hint_id_new_password1" class="form-text text-muted"><ul><li>Your password can’t be too similar to your other personal information.</li><li>Your password must contain at least 8 characters.</li><li>Your password can’t be a commonly used password.</li><li>Your password can’t be entirely numeric.</li></ul></small> </div>
</div>
<div id="div_id_new_password2" class="form-group">
<label for="id_new_password2" class=" requiredField">
New password confirmation<span class="asteriskField">*</span> </label>
<div class="">
<input type="password" name="new_password2" autocomplete="new-password" class="textinput textInput form-control" required id="id_new_password2"> </div>
</div>
</div>
<!-- Form Buttons -->
<div class="form-group form-actions">
<div class="col-xs-12 text-right">
<button type="submit" class="btn btn-sm btn-success"> Change Password</button>
</div>
</div>
<!-- END Form Buttons -->
</form>
</div>
Django Template:
<div class="col-lg-4">
<div class="block">
<!-- Table Styles Title -->
<div class="block-title">
<h2><strong>Change Password</strong></h2>
</div>
<p>Change your password here!</p>
<form action="{% url 'change_password'%}" method="post" class="form-horizontal">
{% csrf_token %}
<div class="col-xs-12">
{{ passform|crispy }}
</div>
<!-- Form Buttons -->
<div class="form-group form-actions">
<div class="col-xs-12 text-right">
<button type="submit" class="btn btn-sm btn-success"> Change Password</button>
</div>
</div>
<!-- END Form Buttons -->
</form>
</div>
I am not using javascript on this page it really is a basic setup for learning.
Many thanks

Related

Glyphicon on textbox disappears when selected

I was attempting to make a contact form for my site, which can be previewed here.
I used the Bootstrap Validator script to add verification icons/checks. However, when a textbox is selected that is used with the script, the validation icon disappears, like this:
This happens with the other boxes as well (except for the Subject box, which I didn't activate the validation script for.) How would I fix this? It worked on CodePen, but not on my site.
Here's the HTML for the page.
HTML and CSS for just the form:
<div class="container">
<form class="well form-horizontal" action="https://formspree.io/example#example.com" method="post" id="contact_form">
<fieldset>
<!-- Form Name -->
<legend>Contact Me</legend>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label">Name <label class="text-danger">*</label></label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-user"></i></span>
<input name="name" placeholder="Name" class="form-control" type="text">
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label">Email <label class="text-danger">*</label></label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-envelope"></i></span>
<input name="email" placeholder="Email Address" class="form-control" type="text">
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label">Subject</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-comment"></i></span>
<input name="_subject" placeholder="Subject" class="form-control" type="text">
</div>
</div>
</div>
<!-- Text area -->
<div class="form-group">
<label class="col-md-4 control-label">Message <label class="text-danger">*</label></label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-pencil"></i></span>
<textarea class="form-control" name="input" placeholder="Message"></textarea>
</div>
</div>
</div>
<!-- Config -->
<input type="hidden" name="_next" value="/contactthanks.html" />
<!-- Required fields text -->
<div class="form-group">
<label class="col-md-4 control-label"></label>
<div class="col-md-4">
<div class="text-danger">* Required field</div>
</div>
</div>
<!-- Button -->
<div class="form-group">
<label class="col-md-4 control-label"></label>
<div class="col-md-4">
<button type="submit" class="btn btn-primary"><span class="fa fa-send"></span> Send</button>
</div>
</div>
</fieldset>
</form>
</div>
</div>
textarea {min-height:50px; resize:vertical;}
Thanks in advance, and sorry for the long question.
Using Chrome Developer tools, you can see that adding the :focus pseudo-class to the element increases the z-index value of the <input /> to 3, while the .form-control-feedback class maintains a z-index of 2.
Adding this selector appears to resolve it:
input:focus ~ .form-control-feedback {
z-index: 3;
}
However, my guess is that this is the intended behavior in Bootstrap so the icon does not get in the way while the user is typing.
.input-group .form-control:focus {
z-index: 3;
}
When you select an input, its icon goes behind cos of input's z index. Maybe try changin it ?

what is wrong with my code?

<div class="row">
<div class="container">
<div class="col-md-4 col-md-offset-4">
<div class="login-wrapper">
<div class="login-head">
<h3 class="text-center"> Log in </h3>
</div>
<form>
<div class="form-group">
<label for="email" class="sr-only"> Email </label>
<input type="text" placeholder="email here" class="form-control">
</div>
<div class="form-group">
<label for="email" class="sr-only"> Password </label>
<input type="text" placeholder="Password here" class="form-control">
</div>
<button type="button" class="btn btn-danger center-block"> Login </button>
</form>
</div>
</div>
</div>
</div>
After this code i got scroll bar in my browser so i inspect and found that if i make change
.row { margin-right: 0;}
it is just fine. It is nothing to do with my css i removed my css and tried. so should i change the value of .row all the time which is provided by bootstrap? default value is
.row{margin-right: -15px;}
EDIT: Code is formatted like code now
As mentioned in Bootstrap docs, container should be a top level wrapping class, which should contain class row. You've swapped these classes. I think this is the reason of issue.
First rule of bootstrap introduction says:
Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
Code should look:
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div class="login-wrapper">
<div class="login-head">
<h3 class="text-center"> Log in </h3>
</div>
<form>
<div class="form-group">
<label for="email" class="sr-only"> Email </label>
<input type="text" placeholder="email here" class="form-control">
</div>
<div class="form-group">
<label for="email" class="sr-only"> Password </label>
<input type="text" placeholder="Password here" class="form-control">
</div>
<button type="button" class="btn btn-danger center-block"> Login </button>
</form>
</div>
</div>
</div>
</div>

Dropzone.js inside a Bootstrap modal break flow and styling

I am using the Dropzone.js plugin (which function to send via ajax and drag and drop effect, files to server) the problem is that it's breaking all the form of the stream (which contains other basic fields as input text / password) already tried incapsular tags within divs, add maximum size for file upload area but nothing worked.
I am using only the JS and CSS provided by jquery, bootstrap and
dropzone (and the shipping configuration).
I add the full sample project with this problem on Github
Scripts in tag Head
<link rel="stylesheet" href="library/Bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="library/dropzone/dropzone.css">
<link rel="stylesheet" href="assets/css/main.css">
<script defer src="library/jquery-1.11.1/jquery-1.11.1.min.js"></script>
<script defer src="library/Bootstrap/js/bootstrap.min.js"></script>
<script defer src="library/dropzone/dropzone.js"></script>
<script defer src="assets/js/main.js"></script>
Bootstrap modal:
<div class="modal fade" id="add-product-modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title span7 text-center" id="myModalLabel">Add Product</h4>
</div>
<div class="modal-body">
<form class="form-horizontal dropzone" id="add-product-form" action="#" method="post">
<div class="dropzone-previews"></div> <!-- this is were the previews should be shown. -->
<div class="form-group">
<label for="input_email" class="control-label col-md-3">Your Email (login)</label>
<div class="col-md-9">
<input type="email" class="form-control" id="email" name="email" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="input_password" class="control-label col-md-3">Password</label>
<div class="col-md-9">
<input type="password" class="form-control" id="pass" name="pass" placeholder="Password">
</div>
</div>
<div class="checkbox text-center">
<label><input type="checkbox" id="remember_me" name="remember_me">Remember me on this computer</label>
</div>
<div class="form-group text-center">
<div class="col-md-6 col-md-offset-3">
<button type="reset" class="btn btn-danger">Reset</button>
<button type="submit" class="btn btn-info">Login</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
The actual modal:
As it should be:
An easy solution is to use a div element inside the form to use as dropzone, here is how the modal-body would look like.
html:
<div class="modal-body">
<form class="form-horizontal" id="add-product-form" action="#" method="post">
<div id="myDropzone" class="dropzone"></div> <!-- This is the dropzone element -->
<div class="form-group">
<label for="input_email" class="control-label col-md-3">Your Email (login)</label>
<div class="col-md-9">
<input type="email" class="form-control" id="email" name="email" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="input_password" class="control-label col-md-3">Password</label>
<div class="col-md-9">
<input type="password" class="form-control" id="pass" name="pass" placeholder="Password">
</div>
</div>
<div class="checkbox text-center">
<label>
<input type="checkbox" id="remember_me" name="remember_me">Remember me on this computer</label>
</div>
<div class="form-group text-center">
<div class="col-md-6 col-md-offset-3">
<button type="reset" class="btn btn-danger">Reset</button>
<button type="submit" class="btn btn-info">Login</button>
</div>
</div>
</form>
</div>
Then since you are using a div for your dropzone element you need to specify the url in the dropzone configuration:
js:
Dropzone.autoDiscover = false;
var myDropzone = new Dropzone("div#myDropzone", { url: "#"});

Bootstrap popover is too narrow

http://jsfiddle.net/0y8oy7gf/2/
I have a Bootstrap 3 form in which I have a popover that is placed at the right of the first text input. The popover is triggered on focus of that input, and the trigger is working correctly. My problem is that I'd like for the popover to be wider so that I can have longer lines of text, but it seems to be contained within the parent .col-xs-6. Is there any way to have it be contained by .container-fluid instead, so that it can occupy the empty space on the right?
HTML is below, and the above jsfiddle demonstrates the problem. Thanks!
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="row">
<div class="col-xs-6 col-xs-offset-3 panel panel-gray floating">
<div class="panel-body">
<form action="?" method="POST" id="foo">
<div class="form-group">
<h3>Set your new password</h2>
</div>
<div class="form-group form-group-lg">
<label for="new-password">New password</label>
<input type="password" class="form-control" id="new-password" autofocus data-toggle="popover" data-content="8-20 characters long" data-trigger="focus" data-placement="right" viewport="container">
</div>
<div class="form-group form-group-lg">
<label for="confirm-new-password">Confirm new password</label>
<input type="password" class="form-control" id="confirm-new-password">
</div>
<div class="form-group form-group-lg">
<label for="security-answer">Answer your security question:</label>
<p id="security-question">How many cups of sugar does it take to get to the moon?</p>
<input type="text" class="form-control" id="security-answer">
</div>
<div class="btn-group-lg">
<input type="submit" value="Change password" class="btn btn-primary btn-block" id="btn_changePassword">
</div>
</form>
<br>
</div>
</div>
</div>
</div>
</div>
</div>
You simply need to set the data-container attribute to tell the popover which element to use as it's containing element (see the documentation):
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="row">
<div class="col-xs-6 col-xs-offset-3 panel panel-gray floating">
<div class="panel-body">
<form action="?" method="POST" id="foo">
<div class="form-group">
<h3>Set your new password</h2>
</div>
<div class="form-group form-group-lg">
<label for="new-password">New password</label>
<input type="password" class="form-control" id="new-password" autofocus data-toggle="popover" data-container=".container-fluid" data-content="8-20 characters long" data-trigger="focus" data-placement="right" viewport="container">
</div>
<div class="form-group form-group-lg">
<label for="confirm-new-password">Confirm new password</label>
<input type="password" class="form-control" id="confirm-new-password">
</div>
<div class="form-group form-group-lg">
<label for="security-answer">Answer your security question:</label>
<p id="security-question">How many cups of sugar does it take to get to the moon?</p>
<input type="text" class="form-control" id="security-answer">
</div>
<div class="btn-group-lg">
<input type="submit" value="Change password" class="btn btn-primary btn-block" id="btn_changePassword">
</div>
</form>
<br>
</div>
</div>
</div>
</div>
</div>
</div>
http://jsfiddle.net/0y8oy7gf/3/

Bootstrap login and signup forms are not aligning

I want my Signup and Login form at the same place .By default i want to show the Signup form . On Login Button Click event i want Signup form should be replaced by Login form at the same place or position but its not happening . What is happening is Signup form is coming at top while login form is coming at down . To see the result as of now i have removed Visibility css ..
Here is my Markup ..
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="top-content">
<div class="inner-bg">
<div class="container">
<div class="row">
<div class="col-sm-7 text">
<h1><strong>Custom</strong> Authentication Form</h1>
<div class="description">
<p>
Please register or enter credentials to enjoy the app
</p>
</div>
<!-- Trying to add Angular JS Snippet !-->
<div ng-controller="LoginController" class="top-big-link">
<a class="btn btn-link-1" href="" ng-click="$event.preventDefault();Register()">Login</a>
</div>
</div>
<!-- Signup Form Here !-->
<div ng-controller="SignupformController" class="col-sm-5 form-box">
<div class="form-top">
<div class="form-top-left">
<h3>Sign up now</h3>
<p>Fill in the form below to get instant access:</p>
</div>
<div class="form-top-right">
<i class="fa fa-pencil"></i>
</div>
<div class="form-top-divider"></div>
</div>
<div class="form-bottom">
<form role="form" action="" method="post" class="registration-form">
<div class="form-group">
<label class="sr-only" for="form-first-name">First name</label>
<input type="text" name="form-first-name" placeholder="First name..." class="form-first-name form-control" id="form-first-name">
</div>
<div class="form-group">
<label class="sr-only" for="form-last-name">Last name</label>
<input type="text" name="form-last-name" placeholder="Last name..." class="form-last-name form-control" id="form-last-name">
</div>
<div class="form-group">
<label class="sr-only" for="form-email">Email</label>
<input type="text" name="form-email" placeholder="Email..." class="form-email form-control" id="form-email">
</div>
<button type="submit" class="btn">Sign me up!</button>
</form>
</div>
</div>
<!-- Login Form Here !-->
<div ng-controller="LoginformController" class="col-sm-5 form-box">
<div class="form-top">
<div class="form-top-left">
<h3>Login now</h3>
<p>Fill in the form below to get instant access:</p>
</div>
<div class="form-top-right">
<i class="fa fa-pencil"></i>
</div>
<div class="form-top-divider"></div>
</div>
<div class="form-bottom">
<form role="form" action="" method="post" class="registration-form">
<div class="form-group">
<label class="sr-only" for="UserID">User ID</label>
<input type="text" name="UserID" placeholder="User ID..." class="form-first-name form-control" id="UserID">
</div>
<div class="form-group">
<label class="sr-only" for="Password">Password</label>
<input type="text" name="Password" placeholder="Password..." class="form-last-name form-control" id="Password">
</div>
<button type="submit" class="btn">Login!</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
Please help me to resolve this ..
This is how I did it:
<div class="col-sm-7 text">
<h1><strong>Atlas</strong> Authentication Form</h1>
<div class="description">
<p>Please register or enter credentials to enjoy the app</p>
</div>
<ul class="nav nav-pills" id="myTab">
<li class="active">Sign Up </li>
<li>Log In </li>
</ul>
</div>
</div>
<div class="tab-content">
<div class="tab-pane active" id="signup">
<div ng-controller="SignupformController" class="col-sm-5 form-box">
...
</div>
</div>
<div class="tab-pane" id="login">
<div ng-controller="LoginformController" class="col-sm-5 form-box">...</div>
</div>
</div>
Here is the JSFiddle demo
What you are actually to achieve is basically the way bootstrap nav-pills work. You just need to display the buttons as nav-pills and then set the respective contents in tab-content class.
Using data-toggle="pill" will automatically switch between the tabs and contents.
(You can add the fade class along the tab-pane class to give the switching a little effect like this :) )