It should be simple but I can't see the problem.
I'm building a page like menu in the center and a search box with icon on the right side, I'm using keystonejs, pugjs and bootstrap.
Here's the problematic part of code:
div(style='margin-top:60px; width:1000px')
row
div.col-md-2.col-md-offset-4.text-left
a(href='/keystone') Hommes
div.col-md-2
a(href='/keystone') Femmes
div.col-md-2.text-right
a(href='/keystone') Enfants
div.form-group.col-md-1.col-md-offset-1
div.form-group.has-feedback
input(class='form-control', type='text', id='search-addon')
i(class='glyphicon glyphicon-search form-control-feedback')
it compiles in:
<div style="margin-top:60px; width:1000px;">
<row>
<div class="col-md-2 col-md-offset-4 text-left">Hommes</div>
<div class="col-md-2">Femmes</div>
<div class="col-md-2 text-right">Enfants</div>
<div class="form-group col-md-1 col-md-offset-1">
<div class="input-group has-feedback">
<input class="form-control" type="text" id="search-addon"><i class="glyphicon glyphicon-search form-control-feedback"></i>
</div>
</div>
</row>
The produced HTML looks OK, but the display doesn't include the icon in the input like in this fiddle
Here's what it displays
What am I doing wrong ... again :)
Thanks
Try wrapping
i(class='glyphicon glyphicon-search form-control-feedback')
in
span.input-group-addon
more: http://getbootstrap.com/components/#input-groups
ex:
div.form-group.has-feedback
input(class='form-control', type='text', id='search-addon')
span.input-group-addon
i(class='glyphicon glyphicon-search form-control-feedback')
I changed the code from
<div class="form-group col-md-2">
<div class="form-group has-feedback">
<input class="form-control" type="text" id="search-addon"><i class="glyphicon glyphicon-search"></i>
</div>
</div>
To
<div class="col-md-1 col-md-offset-1">
<div class="form-group">
<div class="form-group has-feedback">
<input type="text" class="form-control"/>
<span class="glyphicon glyphicon-search form-control-feedback"></span>
</div>
</div>
</div>
It displays correctly. But I've found that some argue that the problem is related tothe label that's mandatory
https://github.com/twbs/bootstrap/issues/12911 and https://github.com/twbs/bootstrap/issues/12873
Related
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 ?
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>
i have used Bootstrap panel for creating login form.
But when i check my ui in IE-8 it looks left centered also the glyphicon-icons also not showing.
in other browser it looks perfect.
<div class="message warning">
<div class="col-md-6 col-md-offset-3 col-xs-6 col-sm-6>
<div class="panel panel-default" >
<div class="panel-heading" >
<span class="glyphicon glyphicon-eye-open "></span> Login
</div>
<div class="panel-body">
<form class="form-horizontal" action="">
<div class="form-group">
<label for="inputEmail" class="control-label col-xs-4">Organisation Id</label>
<div class="col-xs-7 col-sm-7 col-md-7">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-th-list"></span></span>
<input type="email" class="form-control" id="inputEmail" require placeholder="Organisation Number" >
</div>
</div>
</div>
<div class="form-group">
<label for="inputEmail" class="control-label col-xs-4">Username</label>
<div class="col-xs-7">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
<input type="email" class="form-control" id="inputEmail" require placeholder="Username" >
</div>
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="control-label col-xs-4">Password</label>
<div class="col-xs-7">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
<input type="password" class="form-control" id="inputPassword" require placeholder="Password" >
</div>
</div>
</div>
<div class="form-group">
<div class="col-xs-offset-4 col-xs-6">
<div class="checkbox input-group">
<label><input type="checkbox"> Remember me</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-xs-offset-4 col-xs-10">
<button type="submit" class="btn btn-primary">Login</button>
<!--<button type="submit" class="btn btn-primary">Cancel</button> -->
</div>
</div>
</form>
</div>
</div>
</div>
</div>
i have attached image so you can easily identified problem.
This maybe caused by the page being served from the local file system.
Update: There maybe other reasons such as cross-domain issues when requesting your bootstrap css and js files from a cdn. The link below details further caveats when using Respond.js in your development vs production environments for IE8.
Please note there was also some changes in v3.0.1 regarding the use of box-sizing: border-box; due to IE8 lack of full support
To solve this you need to view this over http, the responsive features will then appear as you expect in IE8 (Document Mode 8).
The bootstrap docs explain this is due to a browser security rules relating to respond.js.
i got the solution for this problem.
i have added some extra css code, and it's working in IE-8 also.
.center {
float: none;
margin-left: auto;
margin-right: auto;
}
<div class="col-md-6 col-md-offset-3 col-xs-6 col-sm-6 center ">
I am trying to align two inputs side by side using bootstrap. Testing of regular divs as follows works great:
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
But this always pushes to the second input below the first.
<div class="row">
<div class="col-md-2 input-group">
<span class="input-group-addon">Income $</span>
<input type="number" id="income" class="form-control" placeholder="0">
<span class="input-group-addon">.00</span>
</div>
<div class="col-md-2 col-md-offset-2 input-group">
<span class="input-group-addon">Mortgage Payment $</span>
<input type="number" id="mortgagepayment" class="form-control" placeholder="0">
<span class="input-group-addon">.00</span>
</div>
</div>
Any clues?
As in given HTML there is no <form> element.
here is the
Demo using .controls-row and .control-group
<div class="container">
<div class="controls-row row">
<div class="control-group col-md-6">
<div class="input-group">
<span class="input-group-addon">Income $</span>
<input type="number" id="income" class="form-control" placeholder="0">
<span class="input-group-addon">.00</span>
</div>
</div>
<div class="control-group col-md-6">
<div class="input-group">
<span class="input-group-addon">Mortgage Payment $</span>
<input type="number" id="mortgagepayment" class="form-control" placeholder="0">
<span class="input-group-addon">.00</span>
</div>
</div>
</div>
</div>
You should use the "form-inline" Bootstrap class to achieve this:
<form class="form-inline">
<div class="form-group">
<div class="form-group">
<div class="input-group" style="width: 220px;">
<span class="input-group-addon">Income $</span>
<input type="number" id="income" class="form-control" placeholder="0">
<span class="input-group-addon">.00</span>
</div>
</div>
<div class="form-group">
<div class="input-group" style="width: 250px;">
<span class="input-group-addon">Mortgage Payment $</span>
<input type="number" id="mortgagepayment" class="form-control" placeholder="0">
<span class="input-group-addon">.00</span>
</div>
</div>
</div>
</form>
Take a look at it HERE
I think you've asked a sort of loaded question, but I'll do my best to help.
After following the BS3.x docs online, I noticed you didn't wrap your form elements in a form-x class. That usually helps with their custom CSS for form elements. Following BS convention, you're missing an outer wrapper form-group. Lastly, because your beginning label(s) are different lengths (ie Mortgage Payment), wrapping them in a grid container .col-md-2 might not render the way you intend. Regardless, changing the column class is easy to do, so that is for you to decide. Remember that BS has media queries, so how it shows for you might be different depending on device and viewport width.
All that said, I've got this fiddle that should help you.
HTML
<div class="container">
<div class="row">
<form class="form-inline">
<div class="form-group col-md-6">
<div class="input-group">
<span class="input-group-addon">Income $</span><input type="number" class="form-control" /><span class="input-group-addon">.00</span>
</div>
</div>
<div class="form-group col-md-6">
<div class="input-group">
<span class="input-group-addon">Mortgage Payment $</span><input type="number" class="form-control" /><span class="input-group-addon">.00</span>
</div>
</div>
</form>
</div>
http://jsfiddle.net/5webN/
I am trying to create a form that will show an error message box in a form with validation.
I cannot seem to make the error box fit the exact same width as the form (label -input) columns. It seems to be off no matter what I do. So for the time being I have left it as col-sm-12. Can someone explain to me why I cannot seem to get this to match the width of the label and input width ?
I am also having the same issue with the required spans. I am trying to get the "require text" to line up under the input boxes. No matter what I do this just will not work. I can pad left to make it fit per each size but this seems silly as I would think the frame work using the cols should do it for me? Can someone help me as to what I am missing. I am fairly new to bootstrap and I am just stumped. If I put class="col-sm-9 col-sm-offest-2 on the required span it doesnt do anything stays the same as class="col-sm-12". I am guessing it needs to stay within the when I pull it out things go nuts...
here is a sample of the label input and required span, the only thing I could get to work right is col-sm-12 so that it at least lined up with something but it looks ridiculous.
<div class="form-group">
<label class="col-sm-2 control-label" for="InputAddress1">Address 1</label>
<div class="col-sm-9 col-sm-offest-2 input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-asterisk"></i></span>
<input type="text" class="form-control" placeholder="Address Line 1" autofocus required>
</div>
<span class="error col-sm-12">Required</span>
</div>
full code sample can be viewed here
https://stevia-affirm.codio.io/Question.html
Thank you
Gina
I think the problem you have with the Require is that you have a typo (and maybe you did copy and paste to repeat the error on the required span?).
You don't need the offset in the input-group since the col-sm-2 for the label is already there. If you corrected the typo, you'd get something ugly because you have too many columns then (i.e., 2+ 2+ 9 = 13). Just drop the offset there.
Then you can add the offset to your required (without the typo ;-):
<span class="error col-sm-9 col-sm-offset-2">Required</span>
Also, your well is the width of the form. It may not look like it because of the right aligned labels and the fact that each of your label+inputs only add up to 11 instead of 12.
EDIT: Here's a cleaned up version of the form (most of it). You'll notice that I wrapped the input groups in separate classes for the columns. The reason for this is the combination of using form-horizontal and the input-group-addons, makes the input be 100%+the fixed width of the addon element. Wrapping everything like this will produce the result you want.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Core CSS -->
<link rel="stylesheet" type="text/css" href="plugins/bootstrap-3.1.1-dist/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>Employee Information</h1>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-12" style="padding-top:30px;">
<div class="alert alert-danger ">
<span class="glyphicon glyphicon-alert "></span><strong> message</strong>
</div>
</div>
</div>
</div>
<div class="container">
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-2 control-label ">Name</label>
<div class="col-sm-10">
<div class="input-group">
<span class="input-group-addon "><i class="glyphicon glyphicon-asterisk "></i></span>
<input type="text" placeholder="Name " class="form-control">
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="InputAddress1">Address 1</label>
<div class="col-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-asterisk"></i></span>
<input type="text" class="form-control" placeholder="Address Line 1" autofocus required>
</div>
</div>
<span class="error col-sm-10 col-sm-offset-2">Required</span>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="InputAddress2">Address 2</label>
<div class="col-sm-10">
<div class="input-group">
<span class="input-group-addon input-group-addon_width"><i class=""></i></span>
<input type="text" class="form-control" placeholder="Address Line 2">
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="InputCity">City</label>
<div class="col-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-asterisk form-control-feedback"></i></span>
<input ng-model="demo.city" ng-disabled="!editAllowed" type="text" class="form-control" placeholder="City" required>
</div>
</div>
<span ng-show="demographics_form.city.$error.required" class="error col-sm-10 col-sm-offset-2">Required</span>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="InputState">State</label>
<div class="col-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-asterisk form-control-feedback"></i></span>
<select id="state" class="form-control" required>
<option >State</option>
</select>
</div>
</div>
</div>
<div ng-hide="!editAllowed" class="col-sm-12">
<div class="row">
<div class="col-sm-offset-4 col-sm-2">
<button class="btn btn-success btn-block">Submit</button>
</div>
<div class="col-sm-2">
<button class="btn btn-info btn-block">Cancel</button>
</div>
</div>
</div>
</form>
</div>
</body>
</html>