When using the has-feedback class to add an icon on a form field and using the bootstrap tooltip, the icon moves up. I get the same behavior with chrome, firefox and ie.
<div class="row">
<div class="col-md-5 col-md-offset-1">
<div class="form-group form-group-lg has-feedback">
<input class="form-control" name="foo" placeholder="foo" data-toggle="tooltip" title="Hooray!" type="text">
<span class="glyphicon glyphicon-euro form-control-feedback"></span>
</div>
</div>
</div>
JS File
$('[data-toggle="tooltip"]').tooltip();
Here the example
Bootply
Does anyone know how to solve this problem? Thank you
The reason for it failing is this Bootstrap selector:
.form-group-lg .form-control+.form-control-feedback {...}
When you hover the field, the tooltip's <div> is inserted immediately after the input, thus breaking the + condition since the icon is no longer immediately following the input. A solution is to move the tooltip on the parent element, so that it doesn't interfere with children styling:
<div class="row">
<div class="col-md-5 col-md-offset-1">
<div class="form-group form-group-lg has-feedback" data-toggle="tooltip" title="Hooray!">
<input class="form-control" name="foo" placeholder="foo" type="text">
<span class="glyphicon glyphicon-euro form-control-feedback"></span>
</div>
</div>
</div>
Demo: http://www.bootply.com/tohoEsh0cX
Related
I am trying to create UI with different containers having different input type elements.
Below is code snippet to embed datetime picker in row with label on top and datetime picker below,but its not aligning properly as the datefrom and dateto in the same row.
<div class="container-fluid bg-3 text-center">
<div class="row">
<div class="col-md-5">
<div class="row justify-content-start">
<div class="input-group date col-sm-6 " data-provide="datepicker">
<label for="DateFrom" class="control-label">Date From</label>
<input type="text" class="form-control" id="DateFrom">
<div class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</div>
</div>
<div class="input-group date col-sm-6" data-provide="datepicker">
<label for="DateTo" class="control-label">DateTo</label>
<input type="text" class="form-control" id="DateTo">
<div class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</div>
</div>
</div>
</div>
</div>
Please let me know how can align the fields in different containers on the screen horizontally inside big container.
What other css rules are effecting the label? it looks like DateTo either has an alignment rule or an offset also. I sugest using the inspect elemt tool and checking the computed style rules on both the label and its containing div. They have the same class so something must be different.
Hi I am not a good UI HTML developer but have to do some fixes on a form. I am surprised that text align is not working on this form. I can see this HTML but don't know how to align text right on label StockEnd.
<div class="col-sm-1">
<label class="control-label col-sm-1" for="StockEnd">End</label>
</div>
<div class="col-sm-2 ">
<div class="input-group">
<input type="text" name="StockEnd" class="form-control" id="StockEnd" ng-readonly="readonly" ng-model="Catalogdata.stockTo" ng-disabled="isDisabled" capitalize typeahead="item.number for item in getAutoCompleteStockNumber($viewValue)">
<span class="input-group-btn">
<button class="btn-default btn" type="button" ng-click="stockNumberSearchClick('end')"><i class="fa fa-search"></i></button>
</span>
</div>
</div>
This can be achieved with marginal adjustment to your HTML classes.
First, you must remove .col-sm-1 on your <label>, as this class causes a float:left to be applied to the element, which means any use of text-align will no longer affect it. With that class removed, you can then add .text-right to the parent of the <label>.
In the end, your HTML will look like:
<div class="col-sm-1 text-right">
<label class="control-label" for="StockEnd">End</label>
</div>
<div class="col-sm-2 ">
<div class="input-group">
<input type="text" name="StockEnd" class="form-control" id="StockEnd" ng-readonly="readonly" ng-model="Catalogdata.stockTo" ng-disabled="isDisabled" capitalize="" typeahead="item.number for item in getAutoCompleteStockNumber($viewValue)">
<span class="input-group-btn">
<button class="btn-default btn" type="button" ng-click="stockNumberSearchClick('end')"><i class="fa fa-search"></i></button>
</span>
</div>
</div>
Here's a Bootply to demonstrate.
Hope this helps! Let me know if you have any questions.
either add text-right class to the parent form-group
OR
modify the label to be display: block with text-right class to do this.
After discussing with my colleague, we made this change and it worked as required. Just removed the class from outer Div and it worked. So Instead of
<div class="col-sm-1">
<label class="control-label col-sm-1" for="StockEnd">End</label>
</div>
it is now
<div >
<label class="control-label col-sm-1" for="StockEnd">End</label>
</div>
Rest is same no change.
Here is my jsFiddle with full code example.
I would like:
The entire "page content" container (that is, the <h1> that starts "Sign in to..." as well as the entire <form> element) to be centered in the screen; and
The "Need help?" link needs to be left aligned, aligning with the submit button's left side
I am trying to style center the container via text-center. I am trying to align the link via text-left. Neither are working:
<div class="container">
<div class="row">
<div class="col-md-8 text-center">
<h1 class="strong-primary">Sign in to continue to Audit<b>Cloud</b>.</h1>
</div>
<div class="col-md-4 text-center">
<form role="form">
<div class="form-group">
<input type="email" class="form-control" id="signin-email" placeholder="Your email">
</div>
<div class="form-group">
<input type="password" class="form-control" id="signin-password" placeholder="Password">
</div>
<button type="submit" class="btn form-control btn-lg btn-success">Sign in</button>
<div class="form-group">Need help?</div>
</form>
</div>
</div>
</div>
Any ideas?
You need to apply text-align:left; to the containing <div>. Instead of class="text-left, use style="text-align:left;. I put those changes into your fiddle:
http://jsfiddle.net/fjL4f2ew/1/
I have a row that is split down into various columns and sub-columns. In the proper example there are several more inputs but I've removed them for clarity as they're not needed for this example.
<form id="inputForm" class="form-inline" role="form">
<div class="row">
<div class="col-xs-4">
<label class="control-label">Primary Packaging:</label>
</div>
<div class="col-xs-6">
<label for="pack1Height" class="control-label">Height:</label>
<div class="input-group">
<input type="text" id="pack1Height" class="form-control small text-right" />
<span class="input-group-addon">mm</span>
</div>
</div>
<div class="col-xs-2">
<label class="control-label">Vol:</label>
<label class="control-label">999</label>
<label class="control-label">cm<sup>3</sup></label>
</div>
</div>
</form>
If you look at http://jsfiddle.net/53vu25ad/ you can see the issue as "Primary Packaging" and "Vol: 999 cm3" are not vertically aligned within the row - they're top aligned. Is there something I'm missing here?
(ps: On my form, the "height" label and the input element are on the same line, I have no idea why they're not in this jsfiddle, but it's not relevant to the question - I would still expect to see the two labels either side aligned vertically).
Using bleeding-edge not-yet-released Bootstrap v3.2.1: JS Fiddle
The trick is to use a dummy .form-control-static:
<div class="col-xs-4">
<div class="form-group">
<label class="control-label">Primary Packaging:</label>
<p class="form-control-static"> </p>
</div>
</div>
Well without using experimental bootstrap, the way I got around this was adding a simple custom class that matched the form-control element height of 34px.
By setting the row line-height to the same, it automatically valigns content.
.fixedRow {
line-height: 34px;
}
<div class="row fixedRow">
<div class="col-xs-4">
<label class="control-label">Primary Packaging:</label>
</div>
...
Updated jsfiddle: http://jsfiddle.net/53vu25ad/2/
Please find the updated jsfiddle
You may need to use the .form-group class for .form-inline
<form id="inputForm" class="form-inline" role="form">
<div class="form-group">
<label class="control-label">Primary Packaging:</label>
</div>
<div class="form-group">
<label for="pack1Height" class="control-label">Height:</label>
<div class="input-group">
<input type="text" id="pack1Height" class="form-control small text-right" />
<span class="input-group-addon fw1">mm</span>
</div>
</div>
<div class="form-group">
<label class="control-label">Vol:</label>
<label class="control-label">999</label>
<label class="control-label">cm<sup>3</sup></label>
</div>
</div>
</div>
</form>
I already have one row
<div class="row input_section">
<div class="span3">
<h3>Origin</h3>
<p>Where is the orinin of the delivery? Use to calculate price of delivery</p>
</div>
<div class="span9 delivery_section">
<label><div>Address</div>
<input type="text" name="type" value=""/>
</label>
<label>
<button class="btn btn-primary" type="button">Verify</button>
</label>
<label><div style="width:100%;height:150px;border:1px solid black;"></div></label>
</div>
</div>
And I want to do the div size full in the span9 .
So,How can i write it?
straight from the bootstrap docs my friend
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
Check this jsFiddle
Bootstrap already have class form-inline to set into inline.
Use this in your existing div append this class="form-inline"
Replace this line
<div class="span9 delivery_section">
into
<div class="span9 delivery_section form-inline">
Already i use this, hope this help you!
Try this.
<div class="row input_section">
<div class="span3">
<h3>Origin</h3>
<p>Where is the orinin of the delivery? Use to calculate price of delivery</p>
</div>
<div class="span9 delivery_section">
<label>Address</label>
<div class="input-group">
<input class="form-control" type="text" placeholder="Address">
<div class="input-group-btn">
<button class="btn btn-primary" type="button"> Verify </button>
</div>
</div>
<div style="width:100%;height:150px;border:1px solid black;"></div>
</div>
</div>
If it doesn't seem to work, it probably because I'm using bootstrap 3.
label is inline element. And moreover in bootstrap to accept the width by default they have specified the display property as 'block'. Just override the code by placing the following code. Then you will done with your code.
label {
display:inline-block;
}