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>
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 am having trouble making the radio button area (input-group-addon) the same size in col-sm-4 and col-sm-6 columns. I looked at some other answers where people used min-width and this solution did not work for me. I would like a uniform width for my radio button controls. Here is a visual example. My first radiobutton (input-group-addon) is wider than the second input-groups imgur link
.form-control {
width: 150px;
}
.radio-width {
width: 30px;
}
<div class="container">
<div class="form-group">
<div class="col-sm-4">
<div class="input-group">
<span class="input-group-addon radio-width">
<span class="control-label">
<input type="radio" name="anyDate" value="anyDate">
</span>
</span>
<div class="input-group-addon">
<input type="text" class="form-control">
</div>
</div>
</div>
<div class="col-sm-6">
<div class="input-group">
<span class="input-group-addon radio-width">
<span class="control-label">
<input type="radio" name="dateRange" value="dateRange">
</span>
</span>
<div class="input-group-addon">
<input type="text" class="form-control">
</div>
</div>
</div>
<div class="col-sm-2">
<input type="submit" value="Submit" class="btn btn-primary">
</div>
</div>
</div>
here is the fiddle https://jsfiddle.net/DTcHh/20504/
I think you are making a bit of confusion with input-group-addon element.
An input-group-addon should be coded as follows:
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">#</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>
Therefore your code should be like:
<div class="input-group">
<span class="input-group-addon"> <!-- don't need radio-width -->
<input type="radio" name="anyDate" value="anyDate">
</span>
<input type="text" class="form-control input-full">
</div>
Fiddle here.
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 am using bootstrap's grid to layout a form within a modal. There is too much space in between the label and the input element, and if I have two form controls in one row there is too much space between them. I am using 3 columns for each element, any less for any of them and I get word wrapping or clipping.
<div class="modal-body">
<div class="form-horizontal">
<div class="form-group">
<label class="control-label col-xs-3">Start Time:</label>
<div class="col-xs-3 margin-top-sm">
<div class="input-group bootstrap-timepicker timepicker">
<input type="text" class="form-control" data-provide="timepicker" data-bind="value:startTime" id="StartTime" />
<span class="input-group-addon" ><i class="fa fa-clock-o"></i></span>
</div>
</div>
<label class="control-label col-xs-3">End Time:</label>
<div class="col-xs-3 margin-top-sm">
<div class="input-group bootstrap-timepicker timepicker">
<input type="text" class="form-control" data-provide="timepicker" data-bind="value:endTime" id="EndTime" />
<span class="input-group-addon"><i class="fa fa-clock-o"></i></span>
</div>
</div>
</div>
</div>
</div>
I've altered your HTML and CSS to get this desired result. Instead of using cols-* I used spans, and row-fluid
HTML:
<div id="myModal" class="modal show" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<div class="row-fluid">
<div class="span6">
<label class="control-label">Start Time:</label>
<div class="input-group bootstrap-timepicker timepicker">
<input type="text" class="form-control" data-provide="timepicker" data-bind="value:endTime" id="EndTime" />
<span class="input-group-addon"><i class="fa fa-clock-o"></i></span>
</div>
</div>
<div class="span6">
<label class="control-label">End Time:</label>
<div class="input-group bootstrap-timepicker timepicker">
<input type="text" class="form-control" data-provide="timepicker" data-bind="value:endTime" id="EndTime" />
<span class="input-group-addon"><i class="fa fa-clock-o"></i></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
.span6{
display: inline-block;
max-width: 40%;
margin-left: 6%;
}
CODEPEN DEMO
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