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>
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'm making a form and I want the left half of the page to fill up the section. I have tried col-lg-4, changing the CSS width to 100%, nothing is changing the actual input field. I have searched Stack Overflow, but I couldn't find anything that worked. The first picture is what I have, and the second picture is what I was trying to recreate.
<section class="col-md-6">
<form class="form-group row">
<div class="form-group">
<input type="text" class="form-control" id="inputEmail" placeholder="Cool Person">
</div>
<div class="form-group">
<input type="email" class="form-control" id="inputEmail" placeholder="you#yourdomain.com">
</div>
<div class="form-group">
<input type="text" class="form-control" id="inputSubject" placeholder="what's up?">
</div>
<div class="form-group">
<textarea rows="6" class="form-control" placeholder="What's on your mind?"></textarea>
</div>
</form>
</section>
set css display property to inline-block and give width 100%
.form-control{
display:inline-block;
width:100%
}
ok first of all you cannot have two elements with the same id, because only the last element will get to have that id and the first one won't
to answer your question try to this in css
.form-group, .form-control {width : 100%;}
I'd rather though you'd give an id to your form and then call these classes as its children, like -#form_id .form-group {...
use bootstrap div as mentioned below and try
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<input type="text" class="form-control" id="inputEmail"
placeholder="Cool Person">
</div>
<div class="form-group">
<input type="email" class="form-control" id="inputEmail" placeholder="you#yourdomain.com">
</div>
<div class="form-group">
<input type="text" class="form-control" id="inputSubject" placeholder="what's up?">
</div>
<div class="form-group">
<textarea rows="6" class="form-control" placeholder="What's on your mind?"></textarea>
</div>
</div>
<div class="col-sm-6">
Maps Section Comes Here!
</div>
</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 have the following HTML:
<input type="text" class="form-control" name="watch" value="" placeholder="watch">
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="number" class="form-control" name="price" value="" placeholder="Price (optional)" style="width: 140px;">
</div>
<span class="btn btn-primary" onclick="update($(this));"><span class="glyphicon glyphicon-upload" aria-hidden="true"></span> Update</span>
JSFIDDLE
It renders like this:
How can I get both inputs and the button on the same line? I've been messing with the CSS but can't seem to get it to work. I was able to get it working with a table, but I know a CSS solution would be "better."
You can use Inline Forms like in the Bootstrap Documentation found here:
https://getbootstrap.com/docs/3.4/css/#forms-inline
The 'form-inline' class is probably what you're looking for.
Solution 1 - Using the Grid
Use the Bootstrap’s predefined grid classes for arranging the form elements.
The grid gives you a better control over the width of the elements and scales better than the Inline Form solution.
<form>
<div class="form-row">
<div class="form-group col-md-7">
<input type="text" class="form-control" name="watch" value="" placeholder="watch">
</div>
<div class="form-group col-md-3">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">$</div>
</div>
<input type="text" class="form-control" id="price0" placeholder="Price (optional)">
</div>
</div>
<div class="form-group col-md-2">
<button type="submit" class="btn btn-primary" onclick="update($(this));"><i class="fa fa-arrow-circle-o-up" aria-hidden="true"></i> Update</button>
</div>
</div>
</form>
Solution 2: Inline Form:
Use an Inline Form, as described by Bootstrap Inline Form Documentation.
You need to manually address the width and alignment.
<form class="form-inline">
<div class="form-group">
<input type="text" class="form-control" name="watch" value="" placeholder="watch">
</div>
<div class="input-group m-2">
<div class="input-group-prepend">
<div class="input-group-text">$</div>
</div>
<input type="text" class="form-control" id="price" placeholder="Price (optional)">
</div>
<button type="submit" class="btn btn-primary m-2" onclick="update($(this));"><i class="fa fa-arrow-circle-o-up" aria-hidden="true"></i> Update</button>
</form>
Running Example
This JSFiddle shows both solutions running.
The sample code and fiddle are updated for Bootstrap 4.
Use grid layout with xs phone size to force grid on responsive, the grid is divided into 12 cells so you'll need 3 x 4.
<div class="row">
<div class="col-xs-4">
</div>
<div class="col-xs-4">
</div>
<div class="col-xs-4">
</div>
</div>
You could also have one of them bigger than the others:
<div class="row">
<div class="col-xs-7">
</div>
<div class="col-xs-3">
</div>
<div class="col-xs-2">
</div>
</div>
As long as they add up to 12.
Demo
Bootstrap Grid
In Bootstrap 4 you use multiple
<div class="col"></div>
What I have done here is use the standard Bootstrap grid system of .col-md-5 and .col-md-7 under .row to place all the element on 1 row but I can't seem to make it work.
Another thing is the element keeps getting pulled down to another line below the input.
<div class='col-md-12'>
<div class='row'>
<div class='col-md-5'>
<select class='form-control'>
<option value='us'>USA</option>
</select>
</div>
<div class='col-md-7'>
<span class="" style="display: inline">
<span class="input-group">
<span class="input-group-addon">
ZIP/Postal code
</span>
<input class="form-control" type="text">
</span>
<a href='#' class=''>
cancel
</a>
</span>
</div>
</div>
</div>
How can I put all these onto 1 line?
Here's a jsfiddle for it: http://jsfiddle.net/2656xt63/
There's nothing wrong with your bootstrap column classes, but the elements will only appear side by side on md screen widths (>= 992px). The fiddle panel is narrower than that so the elements are stacked.
If you use col-xs-* the elements will appear side by side at all times.
Alternatively, for a small form such as this, you could use an inline form:
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="country">Country</label>
<select class='form-control' id="country">
<option value='us'>USA</option>
</select>
</div>
<div class="form-group">
<span class="input-group">
<span class="input-group-addon">
ZIP/Postal code
</span>
<input class="form-control" type="text">
</span>
</div>
<div class="form-group">
<a href="#" class="btn btn-default">
cancel
</a>
</div>
</form>
Here's a bootply demonstrating the inline form.