Desired result: "between X% and Y%", and the input groups, all on the same line.
This works with regular form fields, but not with input-group:
between
<div class="input-group d-inline-block" style="width: 5em;">
<input type="text" class="form-control" >
<div class="input-group-append">
<span class="input-group-text">%</span>
</div>
</div>
and
<div class="input-group d-inline-block" style="width: 5em;">
<input type="text" class="form-control" >
<div class="input-group-append">
<span class="input-group-text">%</span>
</div>
</div>
Use classes d-inline-flex align-items-center w-auto on input-group:
body { padding: 1em; }
input.form-control { width: 3em; }
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="input-group d-inline-flex align-items-center w-auto">
between <input type="text" class="form-control">
<div class="input-group-append">
<span class="input-group-text">%</span>
</div>
</div>
<div class="input-group d-inline-flex align-items-center w-auto">
and <input type="text" class="form-control">
<div class="input-group-append">
<span class="input-group-text">%</span>
</div>
</div>
you could try something like this:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<form class="form-inline">
<div class="form-group">
<div class="input-group">
<label for="between" class="mr-2">between</label>
<input type="text" class="form-control" id="between" placeholder="">
<div class="input-group-prepend">
<div class="input-group-text">%</div>
</div>
</div>
</div>
<div class="form-group">
<div class="input-group">
<label for="and" class="mr-2 ml-2">and</label>
<input type="text" class="form-control" id="and" placeholder="">
<div class="input-group-prepend">
<div class="input-group-text">%</div>
</div>
</div>
</div>
</form>
Related
I'm a beginner of html form designer, I would like make a simple input-group in the html, which the output which text box width is different
That mean which surname textbox is shorter and FullName is longer
can you advise how to do it ?
<div class="row h-100">
<div class="col">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="">First and last name</span>
</div>
<input type="text" id="surname" class="form-control" style="width:80px">
<input type="text" id="FullName" class="form-control" style="width:100%">
</div>
</div>
Try this.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="row h-100">
<div class="col">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="">First and last name</span>
</div>
<input type="text" id="surname" class="form-control" placeholder="Mr" style="width:80px;flex-grow: 0;">
<input type="text" id="FullName" class="form-control" placeholder="">
</div>
</div>
You Forgot to remove this enter code here text in your surname field class="form-control"
<div class="row h-100">
<div class="col">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="">First and last name</span>
</div>
<input type="text" id="surname" class="form-control" style="width:80px">
<input type="text" id="FullName" class="form-control" style="width:100%">
</div>
</div>
</div>
I have a form with 3 fields, two of them are for entering dates. I was requested to add an icon to the very end of the field.
This is the result:
If you see the field that has the icon expands beyonds the other fields to the left and right so it looks pretty ugly.
This is the code:
<div class="form-horizontal">
<div class="form-group">
<label class="col-md-4 control-label">Begin</label>
<div class="col-md-8">
<input type="text" class="form-control" placeholder="mm/dd/yyyy" />
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">End</label>
<div class="input-group col-md-8">
<input type="text" class="form-control" placeholder="mm/dd/yyyy" />
<span class="input-group-addon"><i class="fa fa-lock"></i></span>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Text Search</label>
<div class="col-md-5">
<input type="text" class="form-control">
</div>
<div class="col-md-3">
<button id="btnSavedMessages" class="btn btn-primary">Search</button>
</div>
</div>
</div>
Any clue on how to do it right?
Here is your fixed code please copy it and paste it
<div class="form-horizontal">
<div class="form-group">
<label class="col-md-4 control-label">Begin</label>
<div class="col-md-8">
<input type="text" class="form-control" placeholder="mm/dd/yyyy">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">End</label>
<div class="col-md-8">
<div class="input-group ">
<input type="text" class="form-control" placeholder="mm/dd/yyyy">
<span class="input-group-addon"><i class="fa fa-lock"></i></span>
</div></div>
</div><div class="form-group">
<label class="col-md-4 control-label">Text Search</label>
<div class="col-md-5">
<input type="text" class="form-control">
</div>
<div class="col-md-3">
<button id="btnSavedMessages" class="btn btn-primary">Search</button></div></div></div>
I have tested it works fine. Cheers!
Some CSS is messing with you.
Your line with input-group col-md-8 is apparently malfunctioning.
I made an example:
https://plnkr.co/edit/gxpaP4wR8cZzb3E4CvtR
Check if you have some custom CSS that is overriding bootstraps'.
Use my code this is working fine.
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="form-horizontal">
<div class="form-group">
<label class="col-md-4 control-label">Begin</label>
<div class="col-md-8">
<input type="text" class="form-control" placeholder="mm/dd/yyyy" />
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">End</label>
<div class="col-md-8">
<div class="input-group">
<input type="text" class="form-control" placeholder="mm/dd/yyyy" />
<span class="input-group-addon"><i class="fa fa-lock"></i></span>
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Text Search</label>
<div class="col-md-5">
<input type="text" class="form-control">
</div>
<div class="col-md-3">
<button id="btnSavedMessages" class="btn btn-primary">Search</button>
</div>
</div>
</div>
I would like to make my form in this style as image reference i tried but i did not get success
I made the structure as following code ... if there is someone have any other code reference to share will be good too. thanks
link demo
<div class="row">
<div class="col col-sm-12">
<div class="container"><br/>
<form class="form form-inline form-multiline" role="form">
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" placeholder="Pesquisar" aria-describedby="basic-addon2">
<span class="input-group-addon" id="basic-addon2"><i class="glyphicon glyphicon-search"></i></span>
</div>
</div>
<div class="form-group">
<input type="button" class="btn btn-default" value="Filtros">
</div>
<div class="col col-sm-12">
<div class="col col-sm-4">
<ul>
<h4>Situação</h4>
<li>Útumos incluídos</li>
<li>Todos</li>
<li>Ativos</li>
<li>Excluídos</li>
<li>Inativos</li>
</ul>
</div>
<div class="col col-sm-4">
<ul>
<h4>Tipo de cadastro</h4>
<li>Cliente</li>
<li>Fornecedor</li>
<li>Transportador</li>
<li>Vendedor</li>
<li>Sem tipo definido</li>
</ul>
</div>
<div class="col col-sm-4">
<h4>Outras opções de pesquisa</h4>
<div class="form-group">
<label>Vendedor</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<div class="row">
<div class="col-md-6">
<label>Município</label>
<input type="text" class="form-control">
</div>
<div class="col-md-6">
<label>Estado</label><br/>
<select name="" id="">
<option value=""></option>
</select>
</div>
</div>
</div>
<div class="form-group">
<label>Telefone / Celular</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>Prox. Visita</lebel>
<div class="row">
<div class="col-md-6">
<label>De:</label>
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<div class="col-md-6">
<label>Até:</label>
<div class='input-group date' 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 class="form-group">
<label>Sem compras no período:</lebel>
<div class="row">
<div class="col-md-6">
<label>De:</label>
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<div class="col-md-6">
<label>Até:</label>
<div class='input-group date' 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>
</div>
</form>
</div>
</div>
</div>
Use the combination of Bootstrap Grid, col-*-*, and use it with your .form-group classes.
Have a look at the snippet below (use full screen mode) or look at the updated Demo.
label {
display: block;
}
.form-group {
margin-bottom: 10px !important;
}
.form-control {
width: 100% !important;
}
.input-group {
width: 100%;
}
.form-holder {
margin: 0 -15px;
}
.form-holder h4 {
padding: 0 15px;
font-size: 14px;
font-weight: bold;
margin-bottom: 0;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col col-sm-12">
<div class="container"><br>
<form class="form form-inline form-multiline" role="form">
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" placeholder="Pesquisar" aria-describedby="basic-addon2">
<span class="input-group-addon" id="basic-addon2"><i class="glyphicon glyphicon-search"></i></span>
</div>
</div>
<div class="form-group">
<input type="button" class="btn btn-default" value="Filtros">
</div>
<div class="col col-sm-12">
<div class="col col-sm-4">
<ul>
<h4>Situação</h4>
<li>Útumos incluídos</li>
<li>Todos</li>
<li>Ativos</li>
<li>Excluídos</li>
<li>Inativos</li>
</ul>
</div>
<div class="col col-sm-4">
<ul>
<h4>Tipo de cadastro</h4>
<li>Cliente</li>
<li>Fornecedor</li>
<li>Transportador</li>
<li>Vendedor</li>
<li>Sem tipo definido</li>
</ul>
</div>
<div class="col col-sm-4">
<h4>Outras opções de pesquisa</h4>
<div class="form-holder">
<div class="form-group col-sm-12">
<label>Vendedor</label>
<input type="text" class="form-control">
</div>
<div class="form-group col-sm-8">
<label>Município</label>
<input type="text" class="form-control">
</div>
<div class="form-group col-sm-4">
<label>Estado</label>
<select name="" id="" class="form-control">
<option value="">Select</option>
</select>
</div>
<div class="form-group col-sm-12">
<label>Telefone / Celular</label>
<input type="text" class="form-control">
</div>
<h4>Prox. Visita</h4>
<div class="form-group col-sm-6">
<label>De:</label>
<div class="input-group date" id="datetimepicker1">
<input type="text" class="form-control">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<div class="form-group col-sm-6">
<label>Até:</label>
<div class="input-group date" id="datetimepicker1">
<input type="text" class="form-control">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<h4>Sem compras no período</h4>
<div class="form-group col-sm-6">
<label>De:</label>
<div class="input-group date" id="datetimepicker1">
<input type="text" class="form-control">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<div class="form-group col-sm-6">
<label>Até:</label>
<div class="input-group date" 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>
</form>
</div>
</div>
</div>
Hope this helps!
used:
[class*='col-sm-']:not(:last-child):after
I am new to bootstrap and I have the following code.
<form name="filesearch" id="filesearch" method="post" action="index.cfm">
<div class="input-group col-lg-5">
<span class="input-group-addon"><input name="searchBy" id="mfrmtrlRadio" type="radio">Manufacturer</span>
<input id="mfr" name="mfr" type="text" class="form-control">
<span class="input-group-addon">Material Name</span>
<input id="mtrlname" name="mtrlname" type="text" class="form-control">
</div>
</form>
This is not an inline form and I am trying to put space between the first input and the second span. So between input id mfr and the span of Material Name.
You can use the grid instead of using multiple add-ons inside one group.
Place your inputs inside of XS columns, then reduce the padding of the columns so the space between the two inputs isn't as large.
See working Snippets.
*Sidenote: I places an additional example as the add-ons are so large that on a mobile device there is nearly no usable input space which may or may not matter.
.no-gutter >[class*='col-'] {
padding-right: 5px;
padding-left: 5px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<hr>
<div class="well">
<p>XS Columns</p>
</div>
<form role="form" method="post" id="myForm">
<div class="container">
<div class="row no-gutter">
<div class="col-xs-6">
<div class="input-group"> <span class="input-group-addon">
<input type="radio" aria-label="..."> Manufacturer</span>
<input type="text" class="form-control" aria-label="...">
</div>
</div>
<div class="col-xs-6">
<div class="input-group"> <span class="input-group-addon" id="basic-addon1"> Material Name</span>
<input type="text" class="form-control" aria-describedby="basic-addon1">
</div>
</div>
</div>
</div>
</form>
<hr>
<div class="well">
<p>SM Columns</p>
</div>
<form role="form" method="post" id="myForm">
<div class="container">
<div class="row no-gutter">
<div class="col-sm-6">
<div class="form-group">
<div class="input-group"> <span class="input-group-addon">
<input type="radio" aria-label="..."> Manufacturer</span>
<input type="text" class="form-control" aria-label="...">
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<div class="input-group"> <span class="input-group-addon" id="basic-addon1"> Material Name</span>
<input type="text" class="form-control" aria-describedby="basic-addon1">
</div>
</div>
</div>
</div>
</div>
</form>
<hr>
How can i make this responsive (having inputs fluid to fill the whole space):
Keep in mind i need inputgroups and inputs slim right besides!
Input-group-btn width: 0 is a (maybe not perfect) trick to put the inputs right besides each other.
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-6 col-xs-12">
<div class="input-group">
<label>Strasse</label>
<input type="text" class="form-control" value="strasse" />
<span class="input-group-btn" style="width:0px;"></span>
<label>PLZ</label>
<input type="text" class="form-control" value="plz" style="margin-left:-1px" /></div>
</div>
<div class="col-md-6 col-xs-12">
<div class="input-group">
<label>Zimmer</label>
<select class="form-control input-sm" ><option>ha</option><option>hi</option></select>
<span class="input-group-btn" style="width:0px;"></span>
<label>Etage</label>
<select class="form-control input-sm" ><option>ha</option><option>hi</option></select>
<span class="input-group-btn" style="width:0px;"></span>
<label>Lift</label>
<select class="form-control input-sm" ><option>ha</option><option>hi</option></select>
</div>
</div> <!-- end form-group -->
</div>
You can inspect by minimizing and resizing browser window.
maybe what you should do is wrap input types in col,
play with the snippet-code:
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="input-group">
<div class="col-md-6 col-xs-12" style="padding:0;">
<label>Strasse</label>
<input type="text" class="form-control" value="strasse" />
</div>
<div class="col-md-6 col-xs-12" style="padding:0;">
<span class="input-group-btn" style="width:0px;"></span>
<label>PLZ</label>
<input type="text" class="form-control" value="plz" style="margin-left:-1px" /></div>
<div class="col-md-4 col-xs-4" style="padding:0;">
<label>Zimmer</label>
<select class="form-control input-sm" ><option>ha</option><option>hi</option></select>
<span class="input-group-btn" style="width:0px;"></span>
</div>
<div class="col-md-4 col-xs-4" style="padding:0;">
<label>Etage</label>
<select class="form-control input-sm" ><option>ha</option><option>hi</option></select>
<span class="input-group-btn" style="width:0px;"></span>
</div>
<div class="col-md-4 col-xs-4" style="padding:0;">
<label>Lift</label>
<select class="form-control input-sm" ><option>ha</option><option>hi</option></select>
</div>
</div> <!-- end form-group -->
</div>
</div>
EDIT: hardcoded style="padding:0;" to override default CSS