I created a simple Bootstrap "input-group" sample, which works fine in Chrome, but does not work in IE and Firefox.
As you can see in this sample, the "Help" button does not fill the full height of its parent. In Chrome (Version 58) it works as expected.
Remove padding-top and padding-bottom
.input-group {
width: 100%;
}
.input-group-btn {
height: 100%;
}
.btn {
height: 100%;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="input-group">
<div class="input-group">
<div class="input-group-addon">
<input type="checkbox" />
</div>
<label class="form-control">Option 1</label>
</div>
<div class="input-group">
<div class="input-group-addon">
<input type="checkbox" />
</div>
<label class="form-control">Option 2</label>
</div>
<div class="input-group-btn">
<button class="btn">Help</button>
</div>
</div>
Please set a height for input-group.
.input-group {
width: 100%;
height: 10px;
}
Then it should work like expected.
There is also another good answer for this problem here.
The parent needs height: 100%
.input-group {
width: 100%;
}
.input-group-btn, .outer, .btn {
height: 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="input-group outer">
<div class="input-group">
<div class="input-group-addon">
<input type="checkbox" />
</div>
<label class ="form-control">Option 1</label>
</div>
<div class="input-group">
<div class="input-group-addon">
<input type="checkbox" />
</div>
<label class ="form-control">Option 2</label>
</div>
<div class="input-group-btn">
<button class="btn">Help</button>
</div>
</div>
Related
I have an HTML Form, with the input fields already centered, but they are not vertically aligned together.
I would like to have all of the labels and inputs vertically aligned so that all the labels are on the same vertical line, and all the inputs are on the same vertical line.
So far all I have is the fields inside a div:
<div class="container" align="center">
#formContainer{
width:40%;
margin:auto;
}
#formC{
width:100%;
}
.rows{
width:100%;
display:block;
}
.column{
width:100%;
display:inline-block;
}
.theLabels{
width:30%
float:left;
}
.theInputs{
width:60%;
float:right;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="formContainer">
<form id="formC">
<div class="rows">
<div class="column">
<label class="theLabels">
URL:
</label>
<input class="theInputs" type="text"/>
</div>
<div class="column">
<label class="theLabels">
Code Base:
</label>
<input class="theInputs" type="text"/>
</div>
<div class="column">
<label class="theLabels">
Email:
</label>
<input class="theInputs" type="email"/>
</div>
</div>
</form>
</div>
</body>
</html>
If you want 2 columns in a row you should change width:100% in column class to width:48% or make another class with width:48%. Hope it helps
Are you using Bootstrap?
Make a main div and place everything inside it.. like
<div class="container h-100">
<div class="row h-100 justify-content-center align-items-center">
<form class="col-12">
<div class="form-group">
<label for="formGroupExampleInput">Example label</label>
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
</div>
<div class="form-group">
<label for="formGroupExampleInput2">Another label</label>
<input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
</div>
</form>
</div>
</div>
See HERE
A workout for this would be to have a main which holds the entire form, and then wrap every label in a element with a fixed width, you can then do the same with the input elements.
Fiddle:
https://jsfiddle.net/7mnxwdgv/14/
<html>
<head>
<style type="text/css">
div.container {
width: 350px;
padding: 15px;
margin: 50px auto 0px auto;
clear: both;
overflow: hidden;
}
div.container span.label-holder {
display: block;
width: calc(25% - 10px);
float: left;
padding: 5px;
}
div.container span.input-holder {
display: block;
width: calc(75% - 10px);
float: left;
padding: 5px;
}
div.container span.input-holder input[type="text"]{
width: 100%;
}
</style>
</head>
<body>
<div class="container">
<form>
<span class="label-holder"><label for="url">URL</label></span>
<span class="input-holder"><input type="text" id="url" name="url" placeholder="url" /></span>
<span class="label-holder"><label for="code-base">Code Base</label></span>
<span class="input-holder"><input type="text" id="code-base" name="Code-Base" placeholder="Code Base" /></span>
<span class="label-holder"><label for="from">From</label></span>
<span class="input-holder"><input type="text" id="from" name="from" placeholder="From" /></span>
<span class="label-holder"><label for="to">to</label></span>
<span class="input-holder"><input type="text" id="to" name="to" placeholder="To" /></span>
<span class="label-holder"><label for="email">Email</label></span>
<span class="input-holder"><input type="text" id="email" name="email" placeholder="Your Email" /></span>
<span class="label-holder"><label for="app-serv">Application Servers</label></span>
<span class="input-holder">
<select name="app-serv" id="app-serv">
<option value="Incent">Incent</option>
</select>
</span>
</form>
</div>
</body>
</html>
How to remove the lines around the icon like place the icon inside the searchbox I tried background transparent border 0 still not working the border are still there
here's what I did
<center>
<div class="input-group col-xs-4 col-md-6" >
<input type="text" name="search" id="search-building" class="form-control" placeholder="Search..." required>
<div class="input-group-addon">
<i class="fas fa-search"></i>
</div>
</div>
</center>
CSS
.input-group-addon{
border:0;
background:white;
pointer-events: none;
}
Your css class rules aren't being applied because of the specificity... to solve it add a parent to your selector..
.input-group .input-group-addon{
border:0;
background:white;
pointer-events: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="input-group col-xs-4 col-md-6" >
<input type="text" name="search" id="search-building" class="form-control" placeholder="Search..." required>
<div class="input-group-addon">
<i class="fas fa-search"></i>
</div>
Check this out.
UPDATED:
Changed as per the discussion below.
.input-group input {
border-right: none;
}
.input-group .input-group-addon {
background: inherit;
}
div {
background: red;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<div>
<center>
<div class="input-group col-xs-4 col-md-6" >
<input type="text" name="search" id="search-building" class="form-control" placeholder="Search..." required>
<div class="input-group-addon">
<i class="fa fa-search"></i>
</div>
</div>
</center></div>
I'm building a web page using Bootstrap that has a list box populated with names and a search box for filtering those names. The search box has a glyphicon-remove button that appears when typed in. When clicked, the button clears the search box. My problem is that the icon causes the size of the search box to shrink, and I can't figure out why that's happening.
Here's what it looks like:
Here's what it should look like:
I can fix the problem by giving it a set width using CSS, but I want it to resize with the window like the rest of the form.
HTML:
<div class="col-lg-4">
<form>
<div class="form-group has-feedback">
<label for="txtFilter">Select A User</label>
<div class="input-group">
<input class="form-control" type="text" id="txtFilter" placeholder="Filter by name">
<span class="form-control-feedback glyphicon glyphicon-remove filter-icon"></span>
</div>
</div>
<div class="form-group">
<select class="form-control" id="lstUsers" size="8"></select>
</div>
</form>
CSS:
.filter-icon{
cursor: pointer;
pointer-events: all;
z-index: 3;}
Whenever the icon disappears the box doesn't seem to change shape. Are you sure there isn't any other css you have that might be conflicting? Otherwise there doesn't seem to be another explanation since the code you provided doesn't produce the error.
.filter-icon{
cursor: pointer;
pointer-events: all;
z-index: 3;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-lg-4">
<form>
<div class="form-group has-feedback">
<label for="txtFilter">Select A User</label>
<div class="input-group">
<input class="form-control" type="text" id="txtFilter" placeholder="Filter by name">
<span class="form-control-feedback glyphicon glyphicon-remove filter-icon"></span>
</div>
</div>
<div class="form-group">
<select class="form-control" id="lstUsers" size="8"></select>
</div>
</form>
</div>
</div>
</div>
You can try this Code
HTML
<html>
<head>
<title>SSSSSS</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="col-lg-12">
<form>
<div class="col-lg-12 form-group has-feedback">
<label for="txtFilter">Select A User</label>
</div>
<div class="col-lg-12 form-group">
<input id="txtFilter" type="search" class="form-control" placeholder="Filter by name">
<span id="searchclear" class="glyphicon glyphicon-remove"></span>
</div>
<div class="col-lg-12 form-group">
<select class="form-control" id="lstUsers" size="8"></select>
</div>
</form>
</div>
</body>
</html>
CSS
#searchclear {
position: absolute;
right: 18px;
top: 0;
bottom: 0;
height: 14px;
margin: auto;
font-size: 14px;
cursor: pointer;
color: #ccc;
}
Jquery
$("#searchclear").click(function(){
$("#txtFilter").val('');
});
$(document).ready(function(){
$('#searchclear').css("display","none");
$('#txtFilter').keyup(function () {
$('#searchclear').css("display","block");
});
})
I was able to fix this by using a variation of Kasunjuth Bimal's code below. The key was I needed to change the 'input-group' class to 'form-group'. Then I was able to re-align the icon with some additional CSS. Here's my updated code:
<form>
<div class="form-group has-feedback">
<label for="txtFilter">Select A User</label>
<div class="form-group relative">
<input class="form-control" type="text" id="txtFilter" placeholder="Filter by name">
<span class="form-control-feedback glyphicon glyphicon-remove filter-icon"></span>
</div>
</div>
<div class="form-group">
<select class="form-control" id="lstUsers" size="8"></select>
</div>
.filter-icon{
position: absolute;
right: 1px;
cursor: pointer;
pointer-events: all;
z-index: 3;
}
.relative{
position: relative;
max-width: 280px;
}
I have a bootstraap form where two field I have added the class .d-inline-block so that it comes next to each other and I have another field where I have not added the class so that It comes below of the two field.
I want this to be in the center of the div which I am not able to do it. Only the first two fields are coming to center but not the last div.
Can someone point out the mistake?
#import url( 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css' );
.d-inline-block {
width: 40%;
}
.message {
width: 80%;
}
.formClass {
margin-left: auto !important;
margin-right: auto !important;
text-align: center;
}
<form class="formClass ">
<div class="form-group d-inline-block">
<input type="text" class="form-control" id="nameInput">
<div class="form-control-placeholder"> Name </div>
</div>
<div class="form-group d-inline-block">
<input type="text" class="form-control" id="phoneInput">
<div class="form-control-placeholder"> Phone </div>
</div>
<div class="form-group message">
<input type="text" class="form-control" id="phoneInput">
<div class="form-control-placeholder"> Phone </div>
</div>
</form>
https://jsfiddle.net/97avbgsq/
Add a class to the third DIV and give that display: inline-block;:
#import url( 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css' );
.d-inline-block {
width: 40%;
}
.message {
width: 80%;
}
.formClass {
margin-left: auto !important;
margin-right: auto !important;
text-align: center;
}
.x {
display: inline-block;
}
<form class="formClass ">
<div class="form-group d-inline-block">
<input type="text" class="form-control" id="nameInput">
<div class="form-control-placeholder"> Name </div>
</div>
<div class="form-group d-inline-block">
<input type="text" class="form-control" id="phoneInput">
<div class="form-control-placeholder"> Phone </div>
</div>
<div class="form-group message x">
<input type="text" class="form-control" id="phoneInput">
<div class="form-control-placeholder"> Phone </div>
</div>
</form>
https://jsfiddle.net/tyuxpzk9/1/
While you're free to create your own custom CSS classes to control form field sizes and position, I would like to suggest using the built in grid system column classes to control the size and position of the input fields.
Bootstrap 4 Grid System
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css');
<form>
<div class="row">
<div class="form-group col-sm-4 offset-sm-2">
<input type="text" class="form-control" id="nameInput">
<label class="d-block text-center" for="nameInput">Name</label>
</div>
<div class="form-group col-sm-4">
<input type="text" class="form-control" id="phoneInput">
<label class="d-block text-center" for="phoneInput">Phone</label>
</div>
</div>
<div class="row">
<div class="form-group col-sm-8 offset-sm-2">
<input type="text" class="form-control" id="phoneInput">
<label class="d-block text-center" for="phoneInput">Phone</label>
</div>
</div>
</form>
Using bootstrap 4, you can use the helper classes .d-flex .flex-wrap .justify-content-center on the parent.
.d-inline-block {
width: 40%;
}
.message {
width: 80%;
}
.formClass {
margin-left: auto !important;
margin-right: auto !important;
text-align: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<form class="formClass d-flex flex-wrap justify-content-center">
<div class="form-group d-inline-block">
<input type="text" class="form-control" id="nameInput">
<div class="form-control-placeholder"> Name </div>
</div>
<div class="form-group d-inline-block">
<input type="text" class="form-control" id="phoneInput">
<div class="form-control-placeholder"> Phone </div>
</div>
<div class="form-group message">
<input type="text" class="form-control" id="phoneInput">
<div class="form-control-placeholder"> Phone </div>
</div>
</form>
But if you want to use your original code, to horizontally center a block element with a width, use margin-left: auto; margin-right: auto or margin: auto for short if that works for you. You can also do that using the .mx-auto bootstrap helper class.
.d-inline-block {
width: 40%;
}
.message {
width: 80%;
}
.formClass {
margin-left: auto !important;
margin-right: auto !important;
text-align: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<form class="formClass ">
<div class="form-group d-inline-block">
<input type="text" class="form-control" id="nameInput">
<div class="form-control-placeholder"> Name </div>
</div>
<div class="form-group d-inline-block">
<input type="text" class="form-control" id="phoneInput">
<div class="form-control-placeholder"> Phone </div>
</div>
<div class="form-group message mx-auto">
<input type="text" class="form-control" id="phoneInput">
<div class="form-control-placeholder"> Phone </div>
</div>
</form>
I have 2 <input> fields next to each other. The thing I want to achieve is similar to the for class class="input-group-addon" in Bootstrap - unfortunately it's only for <span>.
How can I merge these inputs to one?
jsFiddle
This is what I am looking for:
Try this
css:
#firstInput {
width: 30%;
display: inline-block;
float: left;
border-bottom-right-radius: 0;
border-top-right-radius: 0;
}
#secondInput {
width: 70%;
display: inline-block;
float: left;
border-bottom-left-radius: 0;
border-top-left-radius: 0;
border-left:0px;
}
and the HTML:
<div class="form-group">
<label for="firstInput">First Input</label>
<div>
<input type="text" id="firstInput" name="firstInput" ng-model="obj.firstInput" class="form-control">
<input type="text" id="secondInput" name="secondInput" ng-model="obj.secondInput" class="form-control">
</div>
</div>
link https://jsfiddle.net/DTcHh/30252/
<div class="row">
<div class="col-md-2">
<div class="form-group">
<input
type="text"
id="firstInput"
name="firstInput"
ng-model="obj.firstInput" class="form-control">
<input
type="text"
id="secondInput"
name="secondInput"
ng-model="obj.secondInput" class="form-control">
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="input-group">
<input id="numbers" name="numbers" type="number" ng-model="obj.num" class="form-control" min="0" />
<span class="input-group-addon">%</span>
</div>
</div>
</div>
body {
margin: 10px;
}
#firstInput, #secondInput {
float: left;
width: 50%;
}
#firstInput {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-right: 0;
}
#secondInput {
border-left: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
Try something like this with custom CSS:
CSS:
.input-group .form-control {
width:45%;
margin-right:0%;
}
HTML:
<div class="input-group">
<input type="text" class="form-control" id="exampleInput"
placeholder="fname">
<input type="text" class="form-control" id="exampleInput1"
placeholder="lname">
DEMO
Another Not exact but similar way can be using form-inline.
.form-group{
float:left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-inline">
<div class="form-group" style="float:left;">
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email" style="border-top-right-radius: 0px;border-bottom-right-radius: 0px;">
</div>
<div class="form-group" >
<input type="email" class="form-control" id="inputEmail3" placeholder="Email" style="border-top-left-radius: 0px;border-bottom-left-radius: 0px;border-left:0px;">
</div>
</div>
Combine bootstrap's form-controls/input fields
.form-control{
border-radius: 0 !important;
}
.input-group .form-control {
margin-right:0%;
width:50% !important;
/* width:100px !important;*/
}
.input-group .form-control:last-child{
margin-left:-1px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="input-group">
<input type="text" class="form-control">
<input type="text" class="form-control">
</div>
</div>
</body>
</html>
https://jsfiddle.net/DTcHh/30255/
Use below css to get the desired output
.form-group {
float: left;
}
.form-group #secondInput{
margin-top: 4px;
border-radius:0;
width: 300px;
}
.form-group #firstInput{
border-radius:0;
width: 100px;
}
Try this:
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3" style="padding:0;">
<div class="form-group">
<label for="firstInput"></label>
<input type="text" id="firstInput" name="firstInput" ng-model="obj.firstInput" class="form-control" style="border-radius:0">
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3" style="padding:0;">
<div class="form-group">
<label for="secondInput"> </label>
<input type="text" id="secondInput" name="secondInput" ng-model="obj.secondInput" class="form-control" style="border-radius:0">
</div>
</div>
</div>