I cannot push all elements to the bottom
<div class="row">
<div class="col-sm-4">
<%=p.select :accounts_receivables_items_type_id, options_from_collection_for_select(AccountsReceivablesItemsType.all, :id, :title, p.object.accounts_receivables_items_type_id), {}, class: "form-control chosen-select"%>
</div>
<div class="col-sm-2">
<%=p.input_field :total_less_tax, class: "form-control input-sm mb15", placeholder: "Netto"%>
</div>
<div class="col-sm-3">
<button type="button" class="btn btn-danger"><span class="glyphicon glyphicon-remove"></span> Rimuovi voce</button>
</div>
</div>
GENERATED
<div class="form-group">
<label class="string optional control-label col-sm-3 control-label" for="accounts_receivable_accounts_receivables_items">Voci fattura</label>
<div class="col-sm-9">
<div id="invoice_products">
<div class="fields">
<div class="row">
<div class="col-sm-4">
<select class="form-control " id="accounts_receivable_accounts_receivables_items_attributes_1397853396301_accounts_receivables_items_type_id" name="accounts_receivable[accounts_receivables_items_attributes][1397853396301][accounts_receivables_items_type_id]"><option value="126">Vendita Auto Usata</option>
<option value="127">Pubblicità</option>
<option value="128">Contratto Gestione</option>
<option value="129">Corsa esente IVA</option>
<option value="130">Corsa con IVA</option></select>
</div>
<div class="col-sm-2">
<input class="numeric decimal required form-control" id="accounts_receivable_accounts_receivables_items_attributes_1397853396301_total_less_tax" min="0" name="accounts_receivable[accounts_receivables_items_attributes][1397853396301][total_less_tax]" placeholder="Netto" step="any" type="number" value="0.0">
</div>
<div class="col-sm-3">
<input id="accounts_receivable_accounts_receivables_items_attributes_1397853396301__destroy" name="accounts_receivable[accounts_receivables_items_attributes][1397853396301][_destroy]" type="hidden" value="false"><a class="remove_nested_fields" data-association="accounts_receivables_items" href="javascript:void(0)">
<button type="button" class="btn btn-danger"><span class="glyphicon glyphicon-remove"></span> Rimuovi voce</button>
</a> </div>
</div>
</div></div>
<a class="add_nested_fields" data-association="accounts_receivables_items" data-blueprint-id="accounts_receivables_items_fields_blueprint" data-target="#invoice_products" href="javascript:void(0)">
<button type="button" class="btn btn-success"><span class="glyphicon glyphicon-plus"></span> Aggiungi un altra voce</button>
</a>
</div>
</div>
In case of the floated elements you can use display: flex though would this break any bootstrap grid stuff?
http://fiddle.jshell.net/TNyUa/3/show/
.col-sm-9, .form-group {
display: flex;
}
.form-group > label, .col-sm-9 > div {
align-self: flex-end;
}
Related
How can I do it so that the label and input elements are placed on the same row? Can anyone help me with this?
.entry:not(:first-of-type) {
margin-top: 10px;
}
.glyphicon {
font-size: 12px;
}
<div class="container">
<div class="row">
<div class="control-group" id="fields">
<label class="control-label" for="field1">Nice Multiple Form Fields</label>
<div class="controls">
<form role="form" autocomplete="off">
<div class="entry input-group col-xs-3">
<input class="form-control" name="fields[]" placeholder="Type something">
<span class="input-group-btn">
<button class="btn btn-success btn-add" type="button">
<span class="glyphicon glyphicon-plus"></span>
</button>
</span>
</div>
</form>
</div>
</div>
</div>
</div>
The for attribute of the tag should be equal to the id attribute of the related element to bind them together, however you don't have id in your input div..
try add this :
<input class="form-control" id="field1" name="fields[]" type="text" placeholder="Type something" />
Just place the label above the input element since both are inline elements by default:
.entry:not(:first-of-type) {
margin-top: 10px;
}
.glyphicon {
font-size: 12px;
}
<div class="container">
<div class="row">
<div class="control-group" id="fields">
<div class="controls">
<form role="form" autocomplete="off">
<div class="entry input-group col-xs-3">
<label class="control-label" for="field1">Nice Multiple Form Fields</label>
<input class="form-control" name="fields[]" type="text" placeholder="Type something">
<span class="input-group-btn">
<button class="btn btn-success btn-add" type="button">
<span class="glyphicon glyphicon-plus"></span>
</button>
</span>
</div>
</form>
</div>
</div>
</div>
</div>
The requirement is a horizontal form group inside of a dropdown. When the user clicks the dropdown, they are able to enter text into the appearing text fields.
I am losing control over the width and margin of the form group when inside of the dropdown. For example, the following form group renders fine:
<form class="form-horizontal">
<div class="form-group">
<label for="strike-from" class="col-sm-2 control-label">From</label>
<div class="col-xs-1">
<input type="text" class="form-control" id="strike-from" value="">
</div>
</div>
<div class="form-group">
<label for="strike-to" class="col-sm-2 control-label">To</label>
<div class="col-xs-1">
<input type="text" class="form-control" id="strike-to" value=""">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Apply</button>
</div>
</div>
</form>
However when embedding this same HTML inside of a dropdown wrapper, the text fields extend past the container and the margin is compressed.
<div class="form-inline">
<div class="form-group">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="strikes-range" data-toggle="dropdown" aria-haspopup="true">
Strikes
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="strikes">
<li>
<form class="form-horizontal">
<div class="form-group">
<label for="strike-from" class="col-sm-2 control-label">From</label>
<div class="col-xs-1">
<input type="text" class="form-control" id="strike-from" value="">
</div>
</div>
<div class="form-group">
<label for="strike-to" class="col-sm-2 control-label">To</label>
<div class="col-xs-1">
<input type="text" class="form-control" id="strike-to" value="">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Apply</button>
</div>
</div>
</form>
</li>
</ul>
</div>
</div>
</div>
Is there an out of the box implementation of this? Otherwise do I just need to add custom styles for width of text boxes and margin?
Or am I just implementing something incorrectly?
I have edited some column widths and removed an extra " and added a class donotchange for removing the alignment error.
Here is my code
HTML
<div class="form-inline">
<div class="form-group">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="strikes-range" data-toggle="dropdown" aria-haspopup="true"> Strikes <span class="caret"></span> </button>
<ul class="dropdown-menu" aria-labelledby="strikes">
<li style="width: 280px;">
<form class="form-horizontal" style="display:block;">
<div class="form-group donotchange">
<label for="strike-from" class="col-sm-2 control-label">From</label>
<div class="col-xs-8">
<input type="text" class="form-control" id="strike-from" value="">
</div>
</div>
<div class="form-group donotchange">
<label for="strike-to" class="col-sm-2 control-label">To</label>
<div class="col-xs-8">
<input type="text" class="form-control" id="strike-to" value="">
</div>
</div>
<div class="form-group donotchange">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Apply</button>
</div>
</div>
</form>
</li>
</ul>
</div>
</div>
<!-- No need. For checking Only-->
<div class="form-group">
<button class="btn btn-default dropdown-toggle" type="button" id="strikes-range" data-toggle="dropdown" aria-haspopup="true"> Sample Button </button>
</div>
<div class="form-group">
<input type="text" class="form-control" id="strike-to" value="">
</div>
<!-- No need. For checking Only-->
</div>
CSS
#media (min-width: 768px){
.form-inline .donotchange {
display: block;
margin-bottom: 10px;
vertical-align: middle;
}
.form-horizontal .donotchange {
margin-right: 0px;
margin-left: 0px;
}}
#media (min-width: 768px){
.form-inline .donotchange {
display: block;
margin-bottom: 10px;
vertical-align: middle;
}}
Check my working code here http://www.bootply.com/N0lccYSCsg
Check whether it works as per your requirements.
Good day!
i am new in bootstrap.i design the following html form using bootstrap.
Here is the image given below:
as you can see,that the right side [red marked] size are not same.
I know about manually adjusting each of the elements width.But it is very tedious.
May be form-control causes this.Please help me on this.Thanks
here is the code :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Employee Loan Distribution</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/bootstrap-datetimepicker.min.css">
<script src="js/moment.min.js"></script> <!-- bootstrap-datetimepicker requires Moment.js to be loaded first -->
<script src="js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker({format:"DD/MM/YYYY", useCurrent: false });
});
</script>
<style>
#datetimepicker1{
width:140px;
}
body {
background-color: #584F39;
}
.panel.panel-primary {
border-color: #73AD21;
}
.panel-group .panel .panel-heading {
background: #73AD21;
}
.form-horizontal .panel.panel-primary {
border-color: #73AD21;
margin-bottom: 10px;
}
#media (max-width: 767px) {
.form-group-top {
margin-top: 15px;
}
}
</style>
</head>
<body >
<div class="container" >
<div class="panel-group">
<div class="panel panel-primary" >
<div class="panel-heading" >
<h3 class="panel-title" style="text-align: center;">Employee Loan Distribution</h3>
</div>
<div class="panel-body">
<form class="form-horizontal" >
<div class="form-group">
<label class="control-label col-sm-3" for="acode">Employee ID:</label>
<div class="col-sm-3" id = "empid" >
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user" aria-hidden="true"></i></span>
<input type="text" class="form-control" id="employeeid" placeholder="Enter ID">
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" style="text-align:right;" >Loan Name:</label>
<div class="col-sm-8">
<div class="input-group">
<select class="form-control " name="month" id="month" onchange="" >
<option value="" disabled selected>Loan</option>
<option value="01">Bank Consumer Loan</option>
<option value="02">GPF Loan Adv.</option>
<option value="03">Green Super Market Loan</option>
<option value="05">House Building Loan</option>
<option value="19">Other Loan</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="dcode">Description:</label>
<div class="col-sm-8">
<div class="input-group">
<input type="text" class="form-control" id="dcode" placeholder="Enter Loan Description">
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" style="text-align:right;">Amount:</label>
<div class="col-sm-8">
<div class="input-group">
<input type="text" class="form-control" placeholder="Enter Amount" >
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" style="text-align:right;" >Sanction Date:</label>
<div class="col-sm-3">
<div class="input-group date">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
<input type="text" id='datetimepicker1' class="form-control" placeholder="DD/MM/YYYY">
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" style="text-align:right;">Interest Rate:</label>
<div class="col-sm-8">
<div class="input-group">
<input type="text" class="form-control" placeholder="Enter Rate" >
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-success">Edit</button>
<button type="button" class="btn btn-danger">Delete</button>
<button type="button" class="btn btn-info">Exit</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
remove input-group class in no use addon-button
<div class="container" >
<div class="panel-group">
<div class="panel panel-primary" >
<div class="panel-heading" >
<h3 class="panel-title" style="text-align: center;">Employee Loan Distribution</h3>
</div>
<div class="panel-body">
<form class="form-horizontal" >
<div class="form-group">
<label class="control-label col-sm-3" for="acode">Employee ID:</label>
<div class="col-sm-9" id = "empid" >
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user" aria-hidden="true"></i></span>
<input type="text" class="form-control" id="employeeid" placeholder="Enter ID">
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" style="text-align:right;" >Loan Name:</label>
<div class="col-sm-9">
<select class="form-control " name="month" id="month" onchange="" >
<option value="" disabled selected>Loan</option>
<option value="01">Bank Consumer Loan</option>
<option value="02">GPF Loan Adv.</option>
<option value="03">Green Super Market Loan</option>
<option value="05">House Building Loan</option>
<option value="19">Other Loan</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="dcode">Description:</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="dcode" placeholder="Enter Loan Description">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" style="text-align:right;">Amount:</label>
<div class="col-sm-9">
<input type="text" class="form-control" placeholder="Enter Amount" >
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" style="text-align:right;" >Sanction Date:</label>
<div class="col-sm-9">
<div class="input-group date">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
<input type="text" id='datetimepicker1' class="form-control" placeholder="DD/MM/YYYY">
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" style="text-align:right;">Interest Rate:</label>
<div class="col-sm-9">
<input type="text" class="form-control" placeholder="Enter Rate" >
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-success">Edit</button>
<button type="button" class="btn btn-danger">Delete</button>
<button type="button" class="btn btn-info">Exit</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
https://jsfiddle.net/gpazs5pt/1/
create a custom class like this:
.custom
{
min-width: 150px;
}
add this class to all form elements.
I have 3 panels with the same width but sometimes not the same height next to each other. When the heights are the same, the panels so line up correctly and there is no weird top margin.
However, when the height differs, some panels get dragged down and start lining up with the panel body? The panel bodies are also not always the same height
My HTML structure looks like this:
<div class="wrapper" data-reactid=".0.1">
<div class="col-sm-4 list" data-reactid=".0.1.0">
<div class="panel panel-default" data-reactid=".0.1.0.0">
<div class="panel-heading clearfix" data-reactid=".0.1.0.0.0">
<h4 class="panel-title pull-left" data-reactid=".0.1.0.0.0.0">Melodic House</h4>
<button type="button" class="btn btn-default btn-sm pull-right" data-reactid=".0.1.0.0.0.1"><span class="glyphicon glyphicon-remove" aria-hidden="true" data-reactid=".0.1.0.0.0.1.0"></span></button><button type="button" class="btn btn-default btn-sm pull-right" data-reactid=".0.1.0.0.0.2"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true" data-reactid=".0.1.0.0.0.2.0"></span></button>
</div>
<ul class="list-group" data-reactid=".0.1.0.0.2">
...
</ul>
</div>
</div>
<div class="col-sm-4 list" data-reactid=".0.1.1">
<div class="panel panel-default" data-reactid=".0.1.1.0">
<div class="panel-heading clearfix" data-reactid=".0.1.1.0.0">
<h4 class="panel-title pull-left" data-reactid=".0.1.1.0.0.0">Deep House</h4>
<button type="button" class="btn btn-default btn-sm pull-right" data-reactid=".0.1.1.0.0.1"><span class="glyphicon glyphicon-remove" aria-hidden="true" data-reactid=".0.1.1.0.0.1.0"></span></button><button type="button" class="btn btn-default btn-sm pull-right" data-reactid=".0.1.1.0.0.2"><span class="glyphicon glyphicon-chevron-down" aria-hidden="true" data-reactid=".0.1.1.0.0.2.0"></span></button>
</div>
<div class="panel-body" data-reactid=".0.1.1.0.1">
<form class="form-horizontal" data-reactid=".0.1.1.0.1.0">
<div class="form-group" data-reactid=".0.1.1.0.1.0.0">
<label class="col-sm-6 control-label" data-reactid=".0.1.1.0.1.0.0.0">Min Duration (minutes)</label>
<div class="col-sm-6" data-reactid=".0.1.1.0.1.0.0.1"><input type="number" class="form-control" id="minDuration" value="0" data-reactid=".0.1.1.0.1.0.0.1.0"></div>
</div>
<div class="form-group" data-reactid=".0.1.1.0.1.0.1">
<label class="col-sm-6 control-label" data-reactid=".0.1.1.0.1.0.1.0">Max Duration (minutes)</label>
<div class="col-sm-6" data-reactid=".0.1.1.0.1.0.1.1"><input type="number" class="form-control" id="maxDuration" value="120" data-reactid=".0.1.1.0.1.0.1.1.0"></div>
</div>
<div class="form-group" data-reactid=".0.1.1.0.1.0.2">
<label class="col-sm-6 control-label" data-reactid=".0.1.1.0.1.0.2.0">Days old</label>
<div class="col-sm-6" data-reactid=".0.1.1.0.1.0.2.1"><input type="number" class="form-control" id="daysOld" value="60" data-reactid=".0.1.1.0.1.0.2.1.0"></div>
</div>
<div class="form-group" data-reactid=".0.1.1.0.1.0.3">
<label class="col-sm-6 control-label" data-reactid=".0.1.1.0.1.0.3.0">Query</label>
<div class="col-sm-6" data-reactid=".0.1.1.0.1.0.3.1"><input type="text" class="form-control" id="query" value="" data-reactid=".0.1.1.0.1.0.3.1.0"></div>
</div>
<div class="form-group" data-reactid=".0.1.1.0.1.0.4">
<label class="col-sm-6 control-label" data-reactid=".0.1.1.0.1.0.4.0">Sorting</label>
<div class="col-sm-6" data-reactid=".0.1.1.0.1.0.4.1">
<select class="form-control" id="sorting" data-reactid=".0.1.1.0.1.0.4.1.0">
<option value="hot" data-reactid=".0.1.1.0.1.0.4.1.0.0">Hot</option>
<option value="likes" data-reactid=".0.1.1.0.1.0.4.1.0.1">Likes</option>
<option value="plays" data-reactid=".0.1.1.0.1.0.4.1.0.2">Plays</option>
<option value="date" data-reactid=".0.1.1.0.1.0.4.1.0.3">Date</option>
</select>
</div>
</div>
<div class="form-group" data-reactid=".0.1.1.0.1.0.5">
<label class="col-sm-6 control-label" data-reactid=".0.1.1.0.1.0.5.0">Player Height</label>
<div class="col-sm-6" data-reactid=".0.1.1.0.1.0.5.1"><input type="number" class="form-control" id="height" value="166" data-reactid=".0.1.1.0.1.0.5.1.0"></div>
</div>
<div class="form-group" data-reactid=".0.1.1.0.1.0.6">
<label class="col-sm-6 control-label" data-reactid=".0.1.1.0.1.0.6.0">Track limit</label>
<div class="col-sm-6" data-reactid=".0.1.1.0.1.0.6.1"><input type="number" class="form-control" id="limit" value="10" data-reactid=".0.1.1.0.1.0.6.1.0"></div>
</div>
<button class="btn btn-default pull-right" type="button" data-reactid=".0.1.1.0.1.0.7">Update</button>
</form>
</div>
<ul class="list-group" data-reactid=".0.1.1.0.2">
...
</ul>
</div>
</div>
<div class="col-sm-4 list" data-reactid=".0.1.2">
<div class="panel panel-default" data-reactid=".0.1.2.0">
<div class="panel-heading clearfix" data-reactid=".0.1.2.0.0">
<h4 class="panel-title pull-left" data-reactid=".0.1.2.0.0.0">Tropical House</h4>
<button type="button" class="btn btn-default btn-sm pull-right" data-reactid=".0.1.2.0.0.1"><span class="glyphicon glyphicon-remove" aria-hidden="true" data-reactid=".0.1.2.0.0.1.0"></span></button><button type="button" class="btn btn-default btn-sm pull-right" data-reactid=".0.1.2.0.0.2"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true" data-reactid=".0.1.2.0.0.2.0"></span></button>
</div>
<ul class="list-group" data-reactid=".0.1.2.0.2">
...
</ul>
</div>
</div>
</div>
(Sorry for the React clutter)
How do I get them all to line up at the top instead of the bottom?
I was not able to reproduce this from your code snippet, but this behavior is observed when using display:table-cell, in such cases a vertical-align: top aligns them at the top.
I want to use bootstrap panel to create advance search design.
Like in this image:
My HTML is this:
<div class="panel panel-primary aplxpert-distanta-sus" id="Antet">
<div class="panel-heading clearfix">
<h3 class="panel-title pull-left aplxpert-distanta-sus">Test List</h3>
<div class="btn-group pull-right">
<div class="row form-inline">
<div class="form-group col-sm-12">
<label class="col-sm-2 control-label aplxpert-distanta-sus" for="Nume">Search:</label>
<div class="col-sm-8">
<div class="input-group">
<input type="text" class="form-control input-sm" placeholder="name......" id="cauta">
<span class="input-group-btn">
<button title="Click for search" type="button" class="btn btn-info btn-sm">
<i class="glyphicon glyphicon-search"></i>
</button>
</span>
</div>
</div>
<div class="col-sm-1">
<a title="Advance Search" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" class="btn btn-default btn-sm">
<i class="glyphicon glyphicon-chevron-down"></i>
</a>
</div>
</div>
</div>
</div>
</div>
<div id="collapseOne" class="panel-body panel-collapse collapse">
<div class="row">
<div class="col-sm-3">
<div class="form-group">
<label for="Nume" class="control-label">Nume:</label>
<input type="text" name="Nume" id="Nume" class="form-control input-sm">
</div>
<div class="form-group">
<label for="Prenume" class="control-label">Prenume:</label>
<input type="text" name="Prenume" id="Prenume" class="form-control input-sm">
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<label for="Nume" class="control-label">Nume aa:</label>
<input type="text" name="Nume" id="Nume" class="form-control input-sm">
</div>
<div class="form-group">
<label for="Prenume" class="control-label">Prenume aa:</label>
<input type="text" name="Prenume" id="Prenume" class="form-control input-sm">
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<label for="Nume" class="control-label">Nume bb:</label>
<input type="text" name="Nume" id="Nume" class="form-control input-sm">
</div>
<div class="form-group">
<label for="Prenume" class="control-label">Prenume bb:</label>
<input type="text" name="Prenume" id="Prenume" class="form-control input-sm">
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<label for="Nume" class="control-label">Nume cc:</label>
<input type="text" name="Nume" id="Nume" class="form-control input-sm">
</div>
<div class="form-group">
<label for="Prenume" class="control-label">Prenume cc:</label>
<input type="text" name="Prenume" id="Prenume" class="form-control input-sm">
</div>
</div>
</div>
</div>
<div class="panel-footer">
<strong>Result return for this criterias:</strong> nume: Popescu Ion, data: 04.05.2014, CNP: 1361813282206
</div>
</div>
Something like this: http://jsfiddle.net/nkS2e/4/
How i can do this more better because on resize not work good and in not the best way.