So I have a strange problem with Bootstrap span.
I have an input text with two spans. But the second span is going to new line.
Here is an example:
<div class="col-md-6" style="width:50%;margin-bottom: 10px">
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
<span class="glyphicon glyphicon-search"></span>
</div>
</div>
JsFiddle example
How to make the second span stay in the same line?
Just add the input-group-addon class to your second span.
<div class="col-md-6" style="width:50%;margin-bottom: 10px">
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
<span class="input-group-addon glyphicon glyphicon-search"></span>
</div>
</div>
The only problem is that the glyphicon has a top:1px style which gives you an offset of 1 pixel. Just override that in your css.
Related
enter image description here
I am trying to create a website, but I am new to css and html, so I am having hard time doing it. So here is a problem.
In the picture, two bars saying "include ingredients and exclude ingredients" and "+" and "-" buttons should be attached together, but they are not. Can someone help me on this please?
Here is html code:
<div class="well well-white well-sm hidden-sm hidden-xs menu">
<div class="input-group">
<input type="text" class="form-control" value="" data-role="tagsinput" id="includeIngredientsLG" placeholder="Include ingredients">
<span class="input-group-addon">
<span class="glyphicon glyphicon-plus"></span>
</span>
<input type="text" class="form-control" value="" data-role="tagsinput" id="excludeIngredientsLG" placeholder="Exclude ingredients" style="margin-left: 3px;">
<span class="input-group-addon">
<span class="glyphicon glyphicon-minus"></span>
</span>
</div>
</div>
Add css for .bootstrap-tagsinput
.bootstrap-tagsinput {
display:table-cell
}
working demo: http://codepen.io/anon/pen/EWeKbM
input-group has display: table css property, while the <input class="form-control" has display: table-cell css property.
If the width of the child element that has table-cell is defined (let's say width: 100px), then the next child element with table-cell property, although not defined, will fill in the rest of the space.
Contents within input-group will automatically resize — no need reduce size of it.
Try to something like this.
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="well well-white well-sm menu">
<div class="input-group">
<input type="text" class="form-control" value="" data-role="tagsinput" id="includeIngredientsLG" placeholder="Include ingredients">
<span class="input-group-addon">
<span class="glyphicon glyphicon-plus"></span>
</span>
<input type="text" class="form-control" value="" data-role="tagsinput" id="excludeIngredientsLG" placeholder="Exclude ingredients" style="margin-left: 3px;">
<span class="input-group-addon">
<span class="glyphicon glyphicon-minus"></span>
</span>
</div>
</div>
You can try this snippet. I've splitted each input and addon to their own group.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="well well-white">
<div class="input-group">
<input type="text" class="form-control" value="" data-role="tagsinput" id="includeIngredientsLG" placeholder="Include ingredients">
<span class="input-group-addon">
<span class="glyphicon glyphicon-plus"></span>
</span>
</div>
<div class="input-group">
<input type="text" class="form-control" value="" data-role="tagsinput" id="excludeIngredientsLG" placeholder="Exclude ingredients" style="margin-left: 3px;">
<span class="input-group-addon">
<span class="glyphicon glyphicon-minus"></span>
</span>
</div>
</div>
I need to append calendar icon at the end of the input box as show in example but it streach the height of the local wrapper while i want it to be the height of input feild
http://codepen.io/anon/pen/bEEEzX?editors=110
<div class="col-md-3 col-xs-12 ">
<div class="input-group">
<label>Start </label>
<input type="text" class="form-control" placeholder="Start Date" aria-describedby="basic-addon2">
<span class="input-group-addon glyphicon glyphicon-calendar" id="basic-addon2"></span>
</div>
</div>
How can i change it so that height of the icon is same as input.
#basic-addon2{
max-height:40px !important;
width:30px;
background-color:red;
position:absolute;
right:0;
margin-bottom:-30px !important;
}
adding above css doesnt help either.
You are implementing it wrong, check bootstrap's documentation once again.
You need to put your icons inside the input-group-addon span and you also messed it with your wrong CSS. check the shared snippet.
<span class="input-group-addon"><span class="glyphicon"></span></span>
#basic-addon2 {
background-color: red;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-md-3 col-xs-12 ">
<label>Start</label>
<div class="input-group">
<input type="text" class="form-control" placeholder="Start Date" aria-describedby="basic-addon2">
<span class="input-group-addon" id="basic-addon2">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
Below is the code of Bootstrap which does not show properly the next element
<div class="row">
<div class="col-md-12">
<div class="col-md-2"><input type="checkbox" id="my-checkbox"/></div>
<div class="input-group date form_datetime col-md-5" data-date="1979-09-16T05:25:07Z" data-date-format="dd MM yyyy - HH:ii p" data-link-field="dtp_input1">
<input class="form-control" size="16" type="text" value="" readonly>
<span class="input-group-addon">
<span class="glyphicon glyphicon-remove"></span>
</span>
<span class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</span>
<input type="hidden" id="dtp_input1" value="" />
</div>
<div class="col-md-5">Hi</div>
</div>
</div>
I have used the suggestion given in bootstrap 3 input-group 100% width but it is not working
<div class="col-md-5">
<div class="input-group date form_datetime">
...
</div>
</div>
i have moved col-md-5 to a new parent div. please see the example
My form is marked up using bootstrap. It renders more or less as I intended, but there's no space between the input groups, as illustrated below. The data-binding attributes are knockout syntax, but I don't think they matter one way or the other for the purposes of this question.
<div style="width: 250px;">
<form class="form-horizontal">
<div class="input-group input-group-lg">
<span class="input-group-addon">
<i class="icon-fixed-width icon-search"></i>
</span>
<input class="form-control" placeholder="foo NEAR bar"
data-bind="value: predicate, valueUpdate: 'afterkeydown'" />
</div>
<div class="input-group input-group-lg">
<span class="input-group-addon">
<i class="icon-fixed-width icon-step-backward"></i>
</span>
<input class="form-control" type="text"
data-bind="datepicker: { value: a, dateFormat: 'd MM yy' }" />
</div>
<div class="input-group input-group-lg">
<span class="input-group-addon">
<i class="icon-fixed-width icon-step-forward"></i>
</span>
<input class="form-control" type="text"
data-bind="datepicker: { value: b, dateFormat: 'd MM yy' }" />
</div>
<div class="btn-group btn-group-lg pull-right">
<span class="btn btn-default"><i class="icon-download-alt"></i></span>
<span class="btn btn-primary"><i class="icon-arrow-right"></i></span>
</div>
</form>
</div>
Here we see the result of the above mark-up.
Bootstrap is pretty comprehensive, so I imagine there are tags for controlling this, but the documentation is a terse run of samples and I haven't found anything similar enough to clue me in.
Often bootstrap is quite cleverly constructed so that a single class applied to (say) the parent div will apply in various ways to all the children. So, what tag do I need and where ought I place it in order to get interstitial spacing for the input groups?
The class that applies a margin between groups in a form is .form-group. Bootstrap says:
Do not mix form groups directly with input groups. Instead, nest the
input group inside of the form group.
So in your case:
Normal form
<div class="form-group">
<div class="input-group input-group-lg">
<span class="input-group-addon">
<i class="icon-fixed-width icon-search"></i>
</span>
<input class="form-control" placeholder="foo NEAR bar" data-bind="value: predicate, valueUpdate: 'afterkeydown'" />
</div>
</div>
The only problem here is that you are using .form-horizontal. When you do that, Bootstrap applies a negative left and right margin to the .form-control because it expects you to arrange your fields using .col-xs-4 (or whatever). So I suggest either you don't use that .form-horizontal class in the form, or you add a col-* class to fix the negative margin:
Horizontal form
<div class="form-group">
<div class="col-xs-12">
<div class="input-group input-group-lg">
<span class="input-group-addon">
<i class="icon-fixed-width icon-search"></i>
</span>
<input class="form-control" placeholder="foo NEAR bar"
data-bind="value: predicate, valueUpdate: 'afterkeydown'" />
</div>
</div>
</div>
Demo(s)
See http://jsfiddle.net/7T9r9/ as an example.
<li>
<span class="row">
<div class="col-md-3">
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox" class="checkbox"/>
</span>
<input type="text" class="form-control input-append" value="test">
<span class="input-group-addon"></span>
</div>
</div>
<div class="col-md-9">
<div class="input-group">
<input type="text" class="form-control"
value="test">
<span class="input-group-addon">
<a href="#">
<span class="glyphicon glyphicon-trash"></span>
</a>
</span>
</div>
</div>
</span>
</li>
What I would like to achieve is to have the first input width fitting the text inside of it (a fixed width would do as well I guess).
The second input should occupy the rest of the row and all the elements should be on the same line.
Is there a way to do this?
I'm guessing your fiddle is an example of the effect that you want, but you don't want to use different columns for it.
Dynamic width Text input based on value length is not possible (unless recently via some css goddess like Verou finding something). So assuming fixed width on that guy.
The other guy then can take advantage of the other fixed width to do a margin etc.
Something like this:
HTML
<span class="row">
<div class="test1 input-group">
<span class="input-group-addon">
<input type="checkbox" class="checkbox"/>
</span>
<input type="text" class="form-control input-append" value="test">
<span class="input-group-addon"></span>
</div>
<div class="test2 input-group">
<input type="text" class="form-control"
value="test">
<span class="input-group-addon">
<a href="#">
<span class="glyphicon glyphicon-trash"></span>
</a>
</span>
</div>
</span>
CSS
.row {
position:relative;
}
.test1 {
width:200px
}
.test2 {
position:absolute !important;
top:20px;
margin-left:200px;
}