I have a password input box which contains a glyphicon info image on the right side. I am using parsley.js to validate this input box. On form submit if password validation fails parsley displays the error message beneath the input box as expected but also breaks the alignment of the glyphicon icon and makes it protrude out of the input box. Please find jsfiddle demo here
https://jsfiddle.net/bsbef0qd/2/ . Thanks
<form id="form" data-parsley-validate="">
<div class="row">
<div class="col-xs-4">
<label for="password" class="control-label">Password</label>
<div class="input-group add-on">
<input type="password" name="userFormPassword" id="userFormPassword" value="" class="form-control input-sm" required/>
<span class="input-group-addon">
<a class='my-tool-tip' data-toggle="tooltip" data-placement="left" title="Some password instructions">
<i class='glyphicon glyphicon-info-sign'></i>
</a>
</span>
</div>
</div>
<div class="form-group col-xs-4">
<label for="confirm" class="control-label">Confirm Password</label>
<input type="password" name="confirm" value="" class="form-control input-sm" />
</div>
</div>
<button type="submit">Submit</button>
</form>
You can change the error displaying position..
Add this part to your form tag as a attribute "data-parsley-errors-container="#errorContainer""
<form id="form" data-parsley-validate="" data-parsley-errors-container="#errorContainer">
put this div to where you want the errors to display
<div id="errorContainer"></div>
I have edited your fiddle check the demo
Also Check the Plugin documentation here
also, you can use data-parsley-errors-container="#your-div-id" in your input element
<div class="form-group">
<label for="middle-name" class="control-label col-md-3 col-sm-3 col-xs-12">Start Time</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<div class=" datetimepicker3 input-append timepick">
<input class="form-control" data-format="hh:mm" placeholder="HH:MM" type="text" name="startTime" data-parsley-errors-container="#startTimeErrorContainer" required="required" id="startTime" />
<span class="add-on"><i class="fa fa-clock-o icon-time"></i></span>
</div>
<div id="startTimeErrorContainer"></div>
</div>
Related
I am trying to center everything in a form, with the labels and the values in input fields. This works, except when using the input-group-append class in Bootstrap. The input field and the appended button is treated as one and the entire thing is centered. How can I center just the input field?
It looks like this:
My code:
<div class="col-lg-12 text-center">
<div class="form-group boxed">
<div class="input-wrapper">
<label class="label" for="firstname">Name</label>
<input name="firstname" class="form-control" style="text-align:center"type="text" value="john">
</div>
</div>
<div class="form-group boxed">
<div class="input-wrapper">
<label class="label" for="email">E-mail</label>
<div class="input-group">
<input name="email" type="text" class="form-control" style="text-align:center" value="info#domain.com">
<span class="input-group-append numspan">
<button class="btn btn-primary" type="button">Search</button>
</span>
</div>
</div>
</div>
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 ?
In Bootstrap, if I have an input box with label and button in the same row, how do I get the button to align? I don't want to append it to the input box using input-append - any ideas?
<div class="row">
<div class="form-group col-sm-3">
<label for="txtSchedFromDate">
From:</label>
<input type="text" class="form-control input-sm" id="txtSchedFromDate" />
</div>
<div class="form-group col-sm-3">
<label for="txtSchedToDate">
To:</label>
<input type="text" class="form-control input-sm" id="txtSchedToDate" />
</div>
<div class="form-group col-sm-3">
<button type="button" id="btnResetEngineers" class="btn btn-default">
Reset Engineers</button>
</div>
</div>
JSFiddle
Many thanks
These are the changes I have made
Just include form-control in the button class and an empty label for the button's div
<div class="form-group col-sm-3">
<label for="txtSchedFromDate">
</label>
<button type="button" id="btnResetEngineers" class="form-control btn btn-default">Reset Engineers</button>
</div>
Here's a corrected fiddle
https://jsfiddle.net/Indu9594/rcwyso3x/
I'm trying to create a simple inline form using input groups to display icons before the inputs. As far as I'm aware of I'm following the documentation but the form doesn't display as expected. See this JSFiddle, it demonstrates the problem. I assumed it should be displayed like this (only with the icons prepended of course). How can this be solved?
My code:
<form class="form-inline" role="form">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>
<input type="email" class="form-control" placeholder="Enter email"/>
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span>
<input type="password" class="form-control" placeholder="Choose password"/>
</div>
</div>
<button type="submit" class="btn btn-default">Create account</button>
</form>
This is known issue and will be fixed in Bootstrap v.3.2.0 according to this ship list.
Before that you can fix it your self like this:
.input-group {
display: inline-table;
vertical-align: middle;
.input-group-addon,
.input-group-btn,
.form-control {
width: auto !important;
}
}
i've made it work like this:
<form class="form-inline" role="form">
<div class="row">
<div class="form-group col-sm-3">
<div class="input-group"> <span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>
<input type="email" class="form-control" placeholder="Enter email" />
</div>
</div>
<div class="form-group col-sm-3">
<div class="input-group"> <span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span>
<input type="password" class="form-control" placeholder="Choose password" />
</div>
</div>
<button type="submit" class="btn btn-default">Create account</button>
</div>
http://jsfiddle.net/n5qmc/
Taken from Bootstrap Docs
Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout by adding .form-horizontal to the form. Doing so changes .form-groups to behave as grid rows, so no need for .row.
I also added in semantic attributes for the labels you should always be using on every input (use .sr-only to hide the labels if necessary). This makes the form not inline but horizontal.
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="email" class="sr-only">Email</label>
<div class="input-group col-sm-3">
<span class="input-group-addon">
<i class="fa fa-envelope-o fa-fw"></i>
</span>
<input type="email" id="email" name="email" class="form-control" placeholder="Enter email" />
</div>
<div class="form-group">
<label for="password" class="sr-only">Password</label>
<div class="input-group col-sm-3">
<span class="input-group-addon">
<i class="fa fa-key fa-fw"></i>
</span>
<input type="password" id="password" name="password" class="form-control" placeholder="Choose password" />
</div>
</div>
<button type="submit" class="btn btn-default">Create account</button>
</form>
Not sure if this is helpful, but I thought I would post as I haven't seen this elsewhere. I was trying to get an inline form with inline labels and an add-on using Bootstrap v3. Here is the code that worked for me. I used the grid system in divs to position the label and input group and the add-on within a grid item.
<div class="form-group">
<div class="col-sm-2">
<label class="control-label" for="input_one">Label Text</label>
</div>
<div class="col-sm-10">
<div class="input-group">
<input class="form-control" placeholder="Placeholder Text" type="text" name="input_one" id="input_one">
<span class="input-group-addon">Add on text</span>
</div>
</div>
</div>
I would like to control the size of my input elements using the class .col-lg-* outlined here on the bootstrap website. However, putting the <span> element inside of a div completely messes it up:
HTML with div:
<div class="input-group input-group-lg">
<label for="" class="control-label">Paycheck</label>
<div class="col-lg-10">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" id="">
</div>
</div>
How can I set the width of the input elements so that they are all the same?
I want the left margin of each input element to be flush like so:
This is what it looks like now:
This is my current HTML:
<div class="col-md-6">
<div class="content">
<h2>Income</h2>
<form class="form-income form-horizontal" role="form">
<div class="input-group input-group-lg">
<label for="" class="control-label">Paycheck</label>
<span class="input-group-addon">$</span>
<input type="text" class="form-control" id="">
</div>
<div class="input-group input-group-lg">
<label for="" class="control-label">Investments</label>
<span class="input-group-addon">$</span>
<input type="text" class="form-control" id="">
</div>
<div class="input-group input-group-lg">
<label for="" class="control-label">Other</label>
<span class="input-group-addon">$</span>
<input type="text" class="form-control" id="">
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">Update</button>
</form>
</div>
LIVE EXAMPLE: http://jsfiddle.net/jfXUr/
As per my comment above, try grouping the label and .input-group together with a .form-group container.
<div class="form-group">
<label for="" class="control-label">Paycheck</label>
<div class="input-group input-group-lg">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" id="">
</div>
</div>
Demo here - http://jsfiddle.net/jfXUr/1/