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>
Related
Is it possible to make all prepend add-ons same width?
i.e in this screenshot I would like Email, License Key 1 & License Key 2 to be the same length, is that possible.
If I did not use add-ons and just used regular labels and a form grid it would be possible but it seems to be the prepend addons look much nicer then regular labels.
Relevant Html is
<main class="container-fluid">
<form action="/license.process" name="process" id="process" method="post">
<div class="input-group mb-2">
<div class="input-group-prepend">
<label class="input-group-text" id="licenseEmaillabel">
Email
</label>
</div>
<input type="text" name="licenseEmail" value="paultaylor#jthink.net" class="form-control" aria-describedby="licenseEmaillabel">
</div>
<div class="input-group mb-2">
<div class="input-group-prepend">
<label class="input-group-text" id="licenseKey1label">
License Key 1
</label>
</div>
<input type="text" name="licenseKey1" value="51302c021440d595c860233f136731865a12cfad2ce2cc2" class="form-control" aria-describedby="licenseKey1label">
</div>
<div class="input-group mb-2">
<div class="input-group-prepend">
<label class="input-group-text" id="licenseKey2label">
License Key 2
</label>
</div>
<input type="text" name="licenseKey2" value="1e50214376557ba3e1dede6c490f33d07b738515c8c2a03" class="form-control" aria-describedby="licenseKey2label">
</div>
<h3 class="error" style="visibility:hidden;">
</h3>
<input type="submit" name="cancel" value="Cancel" class="btn btn-outline-secondary">
<input type="submit" name="save" value="Save" class="btn btn-outline-secondary">
<button onclick="j2html.tags.UnescapedText#d352d4f" type="button" class="btn btn-outline-secondary">
Get License
</button>
</form>
</main>
So this is actually pretty complicated, because each label is in it's own div and not part of a sibling chain. And afaik, Bootstrap does not support this type of sizing, only relative sizing form classes (which essentially only makes the font bigger). That kind of eliminates most possibilities that I can think of using flex/child properties. However, I think hard-coding is not the right word usage in this circumstance. But the idea is the same.
The example of using min-width is not right in this circumstance because min-width !== width=xx. For example, if you set min-width to 50px, but 1 string of text is longer than that, you still have the same problem as above. Essentially, if you don't want to set them all to one specific value, then your only other option is to use Javascript.
Here is my pure CSS workaround:
.input-group-prepend {
width : 35%; /*adjust as needed*/
}
.input-group-prepend label {
width: 100%;
overflow: hidden;
}
Additionally you could use Boostrap specific inline styling classes, but that's arbitrary and one of the issues with Bootstrap (too many inline classes clutter code, and then you would have to manually add it to each element). Just offering it as an alternative
For example:
<div class="input-group-prepend w-50"> /* grows to 50% of parent*/
<label class="input-group-text w-100" id="licenseEmaillabel"> /* grows to 100% of parent */
Just using the bootstrap classes:
<div class="input-group">
<div class="input-group-prepend col-3">
<span class="input-group-text col-12">Name:</span>
</div>
<input type="text" class="form-control" placeholder="Name">
</div>
<div class="input-group">
<div class="input-group-prepend col-3">
<span class="input-group-text col-12">Address 1:</span>
</div>
<input type="text" class="form-control" placeholder="Street Address">
</div>
Looks like this:
Using jquery you could do something like this:
var biggest = Math.max.apply(Math, $('.input-group-text').map(function(){ return $(this).width(); }).get());
$('.input-group-text').width(biggest);
Math.max.apply reads all .input-group-text widths and returns the biggest one. The next line applies this width to all .input-group-text divs.
Sources:
jquery-get-max-width-of-child-divs
add w-50 class to input-group-prepend and
add w-100 class to input-group-text
like this
<div class="input-group">
<div class="input-group-prepend w-50">
<span class="input-group-text w-100">label</span>
</div>
<input type="text" class="form-control " />
</div>
<div class="form-row">
<div class="col-md input-group mb-3">
<div class="input-group-prepend col-5 col-sm-4 col-md-3 col-lg-3 col-xl-2 px-0">
<span class="input-group-text w-100">Label textx</span>
</div>
<input class="form-control" type="text">
</div>
</div>
This will work! Adjust the col grids accordingly for .input-group-prepend!
I have layout like this
<div class="form-group">
<div class="col-md-12">
<div class='col-md-6'>
<div class="form-group">
Date of ship:
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class="col-md-2">
<input type="submit" value="Guardar" class="btn btn-xs" style="background-color:#3399FF;color:#FFFFFF" />
</div>
</div>
</div>
Demo
That I want to do is fix label "Date of ship" just a side of input instead above of it. How can I achieve it? Regards
It's a simple matter of positioning it to the left side of the input field. You might have to decrease the size of the input box, or moving the input field to the left. To do this, you need CSS.
First of all, they're in a col-md-6. Which is half the width of a full row.
This isn't much space, but it should work, CSS:
label { float: left; }
input.form-control { float: left; }
My problem is, that my input-group's width is not 100%.
This is how it looks at the moment: https://jsfiddle.net/6gmzz07b/
I just want, that the input-group's width is 100%, so that it fills the container.
According to bootstrap example you need to add input-group-btn element.
For Example.
<div class="input-group">
<input type="text" class="form-control" aria-label="...">
<div class="input-group-btn">
<select class="form-control">
<option selected="">seconds</option>
<option>minutes</option>
<option>hours</option>
<option>days</option>
<option>weeks</option>
</select>
</div>
</div>
Fiddle here
Here is the fiddle which will take the 100% width fiddle
<div class="container">
<div class="row">
<div class="">
<div class="col-xs-12">
<div class="input-group">
<input id="ban_time" type="number" class="form-control" value="10">
<span class="input-group-addon">
<select class="form-control" style="width: auto">
<option selected="">seconds</option>
<option>minutes</option>
<option>hours</option>
<option>days</option>
<option>weeks</option>
</select>
</span>
</div>
</div>
</div>
</div>
You will have remove the input style="width:auto" and will have to add extra span and give the class input-group-addon and will have to nest the select tag inside the span tag
I was looking solution for newer version of Bootstrap like 4.6 but above answers not worked for me.
For Bootstrap v4.6 you need to add "flex: 1;" to your input. This makes your input expands to entire area except append or prepend.
<div class="input-group mb-3">
<input type="text" class="form-control" style="flex: 1;" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
<div class="input-group-append">
<span class="input-group-text" id="basic-addon2">#example.com</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>