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 ">
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 ?
<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>
I'm trying to create a simple form using Bootstrap 3 where people can sign up for a small event.
On this form, they should also be able to indicate if they want one or more T-shirts, and which size(s) they want to order.
I'm not new to HTML, CSS and Javascript, but I am quite new to Bootstrap. Also while I'm a programmer by day, I'm mainly writing REST services so my design skills are fairly limited.
Using w3schools and other tutorial sites I have arrived at this:
<div class="form-group form-group-sm">
<p class="help-block">Please select the number of T-shirts per size you would like to order.</p>
<label class="col-xs-1" for="shirt-s">S</label>
<div class="col-xs-1">
<input class="form-control" type="text" id="shirt-s">
</div>
<label class="col-xs-1" for="shirt-m">M</label>
<div class="col-xs-1">
<input class="form-control" type="text" id="shirt-m">
</div>
<label class="col-xs-1" for="shirt-l">L</label>
<div class="col-xs-1">
<input class="form-control" type="text" id="shirt-l">
</div>
<label class="col-xs-1" for="shirt-xl">XL</label>
<div class="col-xs-1">
<input class="form-control" type="text" id="shirt-xl">
</div>
<label class="col-xs-1" for="shirt-xxl">XXL</label>
<div class="col-xs-1">
<input class="form-control" type="text" id="shirt-xxl">
</div>
<div class="col-xs-2"> </div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-default">Submit</button>
</div>
See jsfiddle:
https://jsfiddle.net/tonvanbart/83nbny8h/5/
Not the prettiest in the world, but I can live with it. My main question is: why is the 'submit' button not in it's own row but inlined after the input fields? At first I thought I had to get to a total of 12 columns and I only had 10. But adding a 2-column div with a non-breaking space didn't help, and adding a <br> tag had no effect either.
Also, while I can live with this (it's for an informal, small group of people who know each other well) if anybody could give me a pointer on how to get the T-shirt size indicators closer to their respective input fields, that would be great. Thank you in advance.
Feel free to let me know if you need more information.
Here's the fixed code:
https://jsfiddle.net/ccx9x7om/1/
I added the following CSS
.row .form-group label, .row .form-group input {
display: inline-block;
}
.row .form-group input {
width: 50%;
}
button {
margin: 25px;
}
In order to use bootstrap's columns properly, you need to wrap them in a row, and wrap all rows inside either a .container or a .container-fluid. I moved the labels inside their respective .col-xs-2 then wrapped everything in the needed aforementioned divs.
Another way you could do this is by nesting your columns as to split the form in half which will greatly reduce the screen space it's using and bring your inputs closer while remaining responsive across viewports.
This is simply following the container/row/column layout that Bootstrap generally follows. See Nesting Columns.
*Note: The form-group class isn't necessary, it simply adds padding around your inputs.
See working Snippet at FullPage.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<form>
<h2>Order a Shirt</h2>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="name">Name</label>
<input type="password" class="form-control" id="name" placeholder="Your Name">
</div>
<div class="form-group">
<label for="email">Email address</label>
<input type="email" class="form-control" id="email" placeholder="Email address (never shown)">
</div>
</div>
<div class="col-sm-6">
<div class="row">
<div class="col-xs-4 col-sm-4">
<div class="form-group">
<label for="shirt-s">S</label>
<input class="form-control" type="text" id="shirt-s">
</div>
</div>
<div class="col-xs-4 col-sm-4">
<div class="form-group">
<label for="shirt-m">M</label>
<input class="form-control" type="text" id="shirt-m">
</div>
</div>
<div class="col-xs-4 col-sm-4">
<div class="form-group">
<label for="shirt-l">L</label>
<input class="form-control" type="text" id="shirt-l">
</div>
</div>
</div>
<div class="row">
<div class="col-xs-4 col-sm-4">
<div class="form-group">
<label for="shirt-xl">XL</label>
<input class="form-control" type="text" id="shirt-xl">
</div>
</div>
<div class="col-xs-4 col-sm-4">
<div class="form-group">
<label for="shirt-xxl">XXL</label>
<input class="form-control" type="text" id="shirt-xxl">
</div>
</div>
<div class="col-xs-4 col-sm-4">
<div class="form-group">
<label>Order Now</label>
<button type="submit" class="btn btn-success btn-block btn-submit">Submit</button>
</div>
</div>
<div class="col-xs-12">
<p class="help-block">Please select the number of T-shirts per size you would like to order.</p>
</div>
</div>
</div>
</div>
</form>
</div>
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'm trying to have on the same line: text, search box and the button "Locate", but the following code seems not working because what I get is: the text "Map for network..." aligned with the input box while the "Locate" button is below the input box. Any suggestion?
<div style="border-color:#FCD229; margin-bottom:0px" class="panel panel-primary">
<!-- Default panel contents -->
<div style="border-color:#FCD229; background-color:#FCD229"class="panel-heading">
<div class="input-group">
<label class="control-label col-lg-8">Map for Network<p class="badge"><?php echo $net_name ?></p></label>
<div class="form-horizontal col-lg-4">
<input id="marker_id" name="address" class="form-control input-sm" type="text" placeholder="node name..">
<span class="input-group-btn">
<button type="submit" class="btn btn-default btn-sm">Locate</button>
</span>
</div>
</div>
</div>
</div>
JSFiddle "Answer"
To cut to the chase - you can look at the result of my tests on JSFiddle: http://jsfiddle.net/eThej/. NOTE - Bootstrap is responsive so you need to make the window with the preview large enough or the controls will wrap to the next line. This is intentional to allow for forms to work on smaller screens (responsive design).
Explanation / Notes
I believe the following example (pulled from the bootstrap site) does something like what you are looking for:
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword2">Password</label>
<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-default">Sign in</button>
</form>
I took your code and applied a few changes to it and got a similar result. First - you are looking for a form with a class of "form-inline". Second, if you are using a column layout I think you probably want "md" columns and not "lg" columns. Finally I think you div's aren't nested correctly. It isn't pretty but I applied these few changes and got much closer to what I think you want. The following is that result:
<div style="border-color:#FCD229; margin-bottom:0px" class="panel panel-primary">
<!-- Default panel contents -->
<div style="border-color:#FCD229; background-color:#FCD229" class="panel-heading">
<form class="form-inline">
<div class="col-md-4">
<label class="control-label">Map for Network</label>
<p class="badge">Test</p>
</div>
<div class="col-md-8">
<div class="form-group"><input id="marker_id" name="address" class="form-control input-sm"
type="text" placeholder="node name.." />
</div>
<button type="submit" class="btn btn-default">Locate</button>
</div>
</form>
</div>
</div>
Again, not a perfect answer but I think it should get you on the right track. Best of luck!
This code seems to be more suitable for what I had in mind.
<div style="border-color:#FCD229; margin-bottom:0px" class="panel panel-primary">
<!-- Default panel contents -->
<div style="border-color:#FCD229; background-color:#FCD229"class="panel-heading">
<label class="control-label col-lg-8">Map for Network Test</label>
<div class="input-group input-group-sm">
<input id="" type="text" class="form-control" placeholder="Node Name">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Locate</button>
</span>
</div><!-- /input-group -->
</div>
</div>