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>
Related
My input group add on is not intact to the text. Can someone help me about this?
Here is the output
here is my style.
<style>
.dates{
width: 200px !important;
margin-left: 500px;
}
</style>
here is the code for date
<div class="form-group">
<label for="title">Date</label>
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control dates" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
Correct me If I am wrong because I don't know the context exactly. Is this necessary to set input 200px wide ?
If you really want to set input width to a specific value, It must be in the container of input-group.
.form-group-wrapper {
width: 240px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="form-group-wrapper">
<div class="form-group">
<label for="title">Date</label>
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control dates" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
Otherwise I suggest you to use bootstrap grid system to make it easier like so.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">
<div class="form-group">
<label for="title">Date</label>
<div class='input-group' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
bootstrap http://i.stack.img
<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<form>
<div class="input-group inp">
<span class="input-group-addon"><i class="fa fa-user fa-fw"></i></span>
<input class="form-control" type="text" placeholder="Email address">
</div>
<div class="input-group inp">
<span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span>
<input class="form-control" type="password" placeholder="Password">
</div>
</form>
</div>
ur.com/liYfx.png
Good evening . Can you help me with bootstrap? I can not combine two inputs into one form and add Font Awesome icon using Twitter Botstrap , like in this picture. Thank You very much .
I did something similar in my last project so here you go:
<div class="container">
<div class="row">
<form role="form">
<div class="col-md-6 col-md-offset-3">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
<input type="text" class="form-control" placeholder="MinVal">
</div>
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
<input type="text" class="form-control" placeholder="MinVal">
</div>
</div>
</div>
</form>
</div>
</div>
Working fiddle:
JSFiddle
Fiddle update:
UpdateFiddle
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
I'm using eonasdan datetimepicker and bootstrap 3. I've got one datetimepicker set as calendar and the other as time. I'd like to be able to have them side by side on the same line. But I can't quite figure it out without breaking the datetimepicker. Here is my code:
<form role="form">
<div class="form-group">
<div class="form-group">
<label for="class">Class:</label> <select multiple
class="form-control" size="2">
<option value="1">Class 1</option>
<option value="2">Class 2</option>
</select>
</div>
<div class="form-group">
</div>
<div class="form-group">
<!-- Date Picker -->
<div class="input-group date" id="startDate">
<input type='text' class="form-control" /> <span
class="input-group-addon"><span
class="glyphicon glyphicon-calendar"></span> </span>
</div>
</div>
<div class="form-group">
<!-- Time Picker -->
<div class="input-group date" id="startTime">
<input type='text' class="form-control" /> <span
class="input-group-addon"><span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</div>
</form>
And here is a JSFiddle where the date picker doesn't work but other than that OK. I also can't force the multiple select to only be 2 rows high for some reason?
This seems to be a css issue, which can be overridden. Put both datepicker and Timepicker within a div like
<div class="form-group">
<!-- Date Picker -->
<div class="input-group date " id="startDate">
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<!-- Time Picker -->
<div class="input-group date" id="startTime">
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
Then use CSS:
#startDate, #startTime {
width: 50%;
float: left;
}
Note: use % value for width to keep it as responsive
JSFiddle
Could you please check. http://jsfiddle.net/6FcBT/2/
<div class="form-group">
<!-- Date Picker -->
<div class="input-group date" id="startDate">
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar" />
</span>
<!-- Time Picker -->
<div class="input-group date" id="startTime">
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-time" />
</span>
</div>
</div>
</div><!--end form-group-->
You don't need multiple form group element. If you use one of them you can see the datepicker elements side by side.