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>
Related
I'm doing a form and i can't change the side text that appears with the type="file" input.
This Text
Thats my code.
<div class="form-group text-left">
<label style="margin-left:16px">CPF*</label><br>
<div class="col-md-8 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-id-card-o"></i></span>
<input name="cpf" placeholder="Informe seu CPF" class="form-control" id="cpf" required="required">
<input id="arquivo_cpf" type="file" name="arquivo_cpf" required="required" >
</div>
</div>
</div>
See if this can help you.
You can put label inside a using bootstrap, then you can use "display: none;" at the input.
Then, you can write what you want, making it smaller.
See the code:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group text-left">
<label style="margin-left:16px">CPF*</label><br>
<div class="col-md-8 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-id-card-o"></i></span>
<input name="cpf" placeholder="Informe seu CPF" class="form-control" id="cpf" required="required">
<span class="input-group-btn"><label class="btn btn-default btn-file ">
Choose file<input type="file" id="arquivo_cpf" name="arquivo_cpf" style="display:none" required="require">
</label></span>
</div>
</div>
</div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<span class="input-group-btn"><label class="btn btn-default btn-file ">
Choose File<input type="file" id="arquivo_cpf" name="arquivo_cpf" style="display:none" required="require">
</label></span>
There is no cross-browser way to do this. The "no file selected" text is in the implementation-defined part of the widget, and I don't believe that most browsers offer much in the way of browser-specific customization. On the other hand, you could simply use CSS to cover the text with something when the value attribute is empty.
input[type='file'] {
color: transparent;
}
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>
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>
I am trying to align a checkbox with a text input. I would like the text box to be a form control, so that it right aligns with the other inputs on the page. However, if I do this, it becomes a block element and there is a line break after the checkbox. If I don't use the form-control class, the input box isn't wide enough and it doesn't look right compared to the rest of the form. If I use the grid layout, there is too much space in between the checkbox and the text box.
The image below represents the following code:
<div>
<input type="checkbox" />
<input type="text" placeholder="Enter your own vendor name here ..." class="form-control" />
</div>
Simple class like form-inline and form-group would help you on this.
<div class="form-inline">
<div class="form-group">
<input type="checkbox"/>
<input type="text" placeholder="Enter your own vendor name here ..." class="form-control" />
</div>
</div>
Fiddle: http://jsfiddle.net/2yao3x5r/
However, from bootstrap documentation
This only applies to forms within viewports that are at least 768px
wide
Besides, I have a suggestion if your checkbox belongs to your input to use input-group
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox" aria-label="...">
</span>
<input type="text" class="form-control" aria-label="...">
</div>
If you have a smaller than 768px viewport, I suggest to use .row and .col modifier. e.g.
<div class="row">
<div class="col-xs-2 col-sm-2">
<input type="checkbox"/>
</div>
<div class="col-xs-10 col-sm-10">
<input type="text" placeholder="Enter your own vendor name here ..." class="form-control" />
</div>
</div>
You could use the Input-Group Add-on component for checkboxes/radios. And you can always style the input-group box if it doesn't work for your specific form setup.
See example Snippet.
body {
padding-top: 50px;
}
.input-group-addon.my-addon {
background: white;
padding-top: 10px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="well">Default</div>
<div class="container">
<div class="input-group"> <span class="input-group-addon">
<input type="checkbox" aria-label="...">
</span>
<input type="text" class="form-control" aria-label="...">
</div>
</div>
<hr>
<div class="well">Added Styling</div>
<div class="container">
<div class="input-group"> <span class="input-group-addon my-addon">
<input type="checkbox" aria-label="...">
</span>
<input type="text" class="form-control" aria-label="...">
</div>
</div>
You can use form-inline or form-horizontal
Inline-form
http://getbootstrap.com/css/#forms-inline
Horizontal-form
http://getbootstrap.com/css/#forms-horizontal
or
You have to add "display:inline-block" to your input controls
You could use input-group-addon and style the checkbox as a label for the input.
For more precise control, but less clean, you can add some CSS to the controls themselves:
#inputText {
margin-left: 20px;
}
#inputCheckbox {
position: absolute;
top: 0px;
margin-top: 0px;
}
HTML (with grid system):
<div class="col-md-2">XX</div>
<div class="col-md-8">
<input type="text" placeholder="Enter your own vendor name here ..."
class="form-control" id="inputText" />
<input type="checkbox" class="pull-left" id="inputCheckbox" />
</div>
<div class="col-md-2">XX</div>
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;
}