I am integrating bootstrap 3 into my own admin template and I have an issue with the display of an input group. I don't know which CSS rule breaks the display of input group. Here is the JSFIDDLE http://jsfiddle.net/Zw7BG/
<div class="input-group">
<input type="text" id="form_weight" value="0" name="weight" class="form-control text-right">
<span class="input-group-addon">Kg</span>
</div>
You just add a class pull-right in below code:
<input type="text" id="form_weight" value="0" name="weight" class="form-control text-right pull-right">
<span class="input-group-addon">Kg</span>
Pls check: http://jsfiddle.net/Zw7BG/2/
Add style="display:inline-block;" in the div tag with the input-group class.
This will override the display:table defined in the input-group class (which is the source of the bug/feature in BS 3.x).
<div class="input-group" style="display:inline-block;">
<input type="text" id="form_weight" value="0" name="weight" class="form-control text-right">
<span class="input-group-addon">Kg</span>
</div>
Related
My code
I'm using Bootstrap 3 and bootstrap-select plugin.
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">
<i class="glyphicon glyphicon-user"></i>
</span>
<select class="form-control selectpicker">
<option value="1" text="Test"></option>
<option value="2" text="Test 2"></option>
<option value="3" text="Test 3"></option>
</select>
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">#</span>
<input type="email" required class="form-control" placeholder="Email Adress"/>
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">https://stackoverflow.com/questions/</span>
<input type="text" required="" class="form-control" placeholder="ID">
</div>
</div>
Result
When closed:
When open:
Possible reason
bootstrap-select plugin generates the following HTML:
<div class="dropdown bootstrap-select form-control open">...</div>
Bootstrap CCS has the following rule which aligns all form-control's inside .input-group at the same z-index:
.input-group .form-control {
z-index: 2;
// ...
}
Question
I want items in the dropdown to appear in front of the input fields, but they are rendered behind (see the above screenshots). Browser: Chrome 71.
How to fix this?
A correct HTML should be
<div class="dropdown bootstrap-select input-group-btn form-control open">...</div>
The bootstrap-select plugin should have generated this class for you, but if it hasn't - just append the class manually. Example:
<select class="form-control input-group-btn selectpicker">
Result
Explanation
The bootstrap-select plugin has the following CCS rule which does the trick:
.bootstrap-select.form-control.input-group-btn {
z-index: auto;
}
I have a form group with both a label and input
<div class="col-md-12 form-group">
<label class="col-sm-2 col-form-label" for="name">Name</label>
<input type="text" class="form-control" name="name" id="name" [(ngModel)]="person.name" disabled/>
</div>
However the label displays above the input field, i need it at its side. I have bootstrap 4.0 installed.
I've tried with class="col-sm-2 col-form-label" and does not work either.
Any suggestions?
The col-sm-2 shouldn't be nested directly in col-md-12. Use the grid like this...
https://www.codeply.com/go/Gdt1BZs9Hg
<form class="col-12">
<div class="form-row">
<label class="col-sm-2 col-form-label" for="name">Name</label>
<input type="text" class="form-control col-sm-10" name="name" id="name" [(ngModel)]="person.name" disabled/>
</div>
</form>
Notice that form-row must used to contain the col-. The col-sm-10 controls the width of the input, so you can change that as needed. Read more in the docs: https://getbootstrap.com/docs/4.0/components/forms/#form-grid
Also, note the correct use of the grid row > columns from the Bootstrap docs...
In a grid layout, content must be placed within columns and only
columns may be immediate children of rows... You may also swap .row for .form-row, a variation of our standard grid row that overrides the default column gutters for tighter and more compact layouts.
You can achieve it by using class form-inline
<div class="form-inline">
<div class="col-md-12 form-group">
<label class="col-sm-2 col-form-label" for="name">Name</label>
<input type="text" class="form-control" name="name" id="name" [(ngModel)]="person.name" disabled/>
</div>
</div>
The suggestions in other posts didn't work in Bootstrap 5. So I tested it by updating one of the demos in the Bootstrap 5 documentation and it worked. With this demo application, <label>, <input> and <button> elements can be defined in a single line:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<form role="form">
<div class="input-group flex-nowrap">
<span class="input-group-text" id="addon-wrapping">Article Title</span>
<input type="text" class="form-control" placeholder="Please enter the new article name..." aria-label="Username" aria-describedby="addon-wrapping">
<button class="btn btn-primary" type="submit" id="article-update-button">Update</button>
</div>
</form>
The form screenshot is available below: For more information, visit the Bootstrap 5 Input Group page.
See Bootstrap 4 documentation about Forms and use form-inline
<div class="col-md-12 form-group form-inline">
<label class="col-sm-2 col-form-label" for="name">Name</label>
<input type="text" class="form-control" name="name" id="name" [(ngModel)]="person.name" disabled/>
</div>
This Bootstrap code gives you a date input field. However it gives me a huge area to the right of the input field that is not used and can't be used. How can I get rid of that unused area ?
When in this exemple I put in two "xx" you can see that this area hides the text
Code :
<div class="form-group has-feedback has-error">
<label for="date_born">Date naissance</label>
<div class="input-group date" id="date_born">
<input name="date_born" class="form-control" value="16/09/2016" placeholder="jj/mm/aaaa" type="text" id="date_born" data-bv-field="date_born">
<span class="input-group-addon">
<span class="glyphicon-calendar glyphicon"></span>
</span>
</div>
</div>
If you are talking about input right padding .has-feedback .form-control {padding-right: 42.5px;} this comes from.less bootstrap by default .form-control Properties
try this
.has-feedback .form-control {padding-right:5px !important;}
One way could be to add a fixed width to the 'input-group' div, like
<div class="form-group has-feedback has-error">
<label for="date_born">Date naissance</label>
<div class="input-group date" id="date_born" style="width: 150px;">
<input name="date_born" class="form-control" value="16/09/2016" placeholder="jj/mm/aaaa" type="text" id="date_born" data-bv-field="date_born">
<span class="input-group-addon">
<span class="glyphicon-calendar glyphicon"></span>
</span>
</div>
</div>
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.
I want to add a Textfield input-group-addon. The problem is that when I use this class with a glyphicon the icon is not positioned right next to textfield see the image below.
Maybe someone has some hints for me - why is that?
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="name2"></label>
<div class="col-md-4">
<input id="name2" name="name2" type="text" placeholder="" class="form-control input-md">
</div>
</div>
<!-- Multiple Radios (inline) -->
<div class="form-group">
<label class="col-md-4 control-label" for="gender">Geschlecht</label>
<div class="col-md-4">
<label class="radio-inline" for="gender-0">
<input type="radio" name="gender" id="gender-0" value="1" checked="checked">
männlich
</label>
<label class="radio-inline" for="gender-1">
<input type="radio" name="gender" id="gender-1" value="2">
weiblich
</label>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="gender">Geburtsdatum</label>
<div class="col-md-4">
<div class='input-group date' id='datetimepicker2'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker2').datetimepicker({
language: 'de'
});
});
</script>
</div>
</div>
Your code works fine with Bootstrap only (see this fiddle http://jsfiddle.net/WNAB8/1/)
The problem is in your own css. Use developer tools (F12) to find out what gives margin-right for the input or margin-left for the addon. Or optionally paste in your custom css so we can help you.
Update:
It definitely is because of given max-width for inputs. If for some reason you want to use max-width anyway, one solution is to give the max-width to .input-group:
.input-group {
max-width: 280px;
}
Demo: http://jsfiddle.net/WNAB8/5/
In your fiddle you are overriding bootstrap's textarea maxwidth option. Remove this from CSS:
/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
max-width: 280px;
}
Working example
If you want to change the width of your text areas, change it using the form layout. From your layout you should look at the horizontal form and width can be changed by placing the input into a div controlled with the col-*:
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>