I'm having this problem, next "form-group row" misplaced. Working on django/jinja template (flask project).
This code:
<div class="row">
<div style="color: chocolate; padding: 10px; margin-left: 10px; font-size: 25px;">Client Details</div>
<div class="col-md-12" style="padding: 20px 0px 0px;">
<form class="form-horizontal">
<div class="col-md-6" style="border-left: 5px solid #eee; margin: 0 0 20px;">
<div class="form-group row">
<label id="labelbox" class="col-sm-2 col-form-label">Client ID</label>
<div class="input-group col-sm-6">
<input class="form-control" col-sm-6 type="text" value="" id="client-id" readonly>
<span class="input-group-btn">
<button class="btn" type="button" data-clipboard-target="client-id">Copy</button>
</span
</div>
</div>
<div class="form-group row">
<label id="labelbox" class="col-sm-2 col-form-label">Client Secret</label>
<div class="input-group col-sm-10">
<input class="form-control" type="text" value="" id="client-secret" readonly>
<span class="input-group-btn">
<button class="btn" type="button" data-clipboard-target="client-secret">Copy</button>
</span
</div>
</div>
</div>
</form>
</div>
This behavior is here: http://www.bootply.com/Ig0ilwpSdh
Ideally I would like to have newline, which I could do with , but since I'm using bootstrap, I'm thinking everything could be done with just bootstrap.
And also vertically align input fields.
By the way, misplacing appears, when I add:
<span class="input-group-btn">
Can you advice how I should better handle that?
Related
I have several forms on a webpage (utilizing Bootstrap 4) and all of them have some content overflow. I can't figure out how to fix it and make the width to fit the form content. Here is a screenshot of one of the simpler forms. This is another screenshot of the other forms in case it helps. Below is some of my code.
page.html
<div class="admin_section">
<h3>Removals</h3>
<div class="admin_section_content container">
<form method="post">
<div class="form-group row">
<label for="deleteName" class="col-sm-2 col-form-label">Remove a Menu Item</label>
<div class="col-sm-2">
<input type="text" name="remove_item_name" pattern="^[a-zA-ZÀ-ÿ-' ]+$" maxlength="25"
class="form-control" id="deleteName" placeholder="Food Item Name" required>
</div>
</div>
<div class="form-group row">
<label for="removeItem" class="col-sm-2 col-form-label"></label>
<div class="col-sm-2 text-right">
<button type="submit" class="btn btn-danger" id="removeItem" name="remove_item_button"
value="clicked">Remove Item</button>
</div>
</div>
</form>
<br><br>
<form method="post">
<div class="form-group row">
<label for="deleteReceipt" class="col-sm-2 col-form-label">Refund a Receipt</label>
<div class="col-sm-2">
<input type="text" name="remove_receipt_number" pattern="^\d{10}$" minlength="10" maxlength="10"
class="form-control" id="deleteReceipt" placeholder="Receipt Number" required>
</div>
</div>
<div class="form-group row">
<label for="removeReceipt" class="col-sm-2 col-form-label"></label>
<div class="col-sm-2 text-right">
<button type="submit" class="btn btn-danger" id="removeReceipt" name="remove_receipt_button"
value="clicked">Refund Receipt</button>
</div>
</div>
</form>
</div>
</div>
general.css
.admin_section{
margin-bottom: 1.5rem;
margin-left: 35%;
margin-right: auto;
}
.admin_section_content{
font-family: 'Segoe UI', 'Open Sans', 'Helvetica Neue', sans-serif;
margin-left: 2rem;
}
select{
border-color: var(--bootstrap-grey);
border-radius: 5px;
}
form{
background-color: var(--form-grey);
border-radius: 5px;
padding: 15px;
}
body{
overflow-x: hidden;
}
Thanks for the extra information Yariel. See what happens if you put the form inside a column.
<div class="col-sm-12 col-md-6">
<form method="post">
<div class="form-group row">
<label for="deleteName" class="col-sm-2 col-form-label">Remove a Menu Item</label>
<div class="col-sm-2">
<input type="text" name="remove_item_name" pattern="^[a-zA-ZÀ-ÿ-' ]+$" maxlength="25"
class="form-control" id="deleteName" placeholder="Food Item Name" required>
</div>
</div>
<div class="form-group row">
<label for="removeItem" class="col-sm-2 col-form-label"></label>
<div class="col-sm-2 text-right">
<button type="submit" class="btn btn-danger" id="removeItem" name="remove_item_button"
value="clicked">Remove Item</button>
</div>
</div>
</form>
</div>
```
I'm not strong in frontend development :) I'm using bootstrap for created a form. But it isn't look fine. How could I align my input form in one column?
<form>
<div class="form-group form-inline">
<label for="exampleInputPrice" class="personal-form-labels">Purchase Price</label>
<input type="text" class="form-control" id="exampleInputPrice" placeholder="$$$">
</div>
<div class="form-group form-inline">
<label for="exampleInputLoan" class="personal-form-labels">Loan Amont</label>
<input type="text" class="form-control" id="exampleInputLoan" placeholder="$$$">
</div>
<div class="col-md-12 text-center block-buttons">
<button type="submit" class="btn btn-primary btn-lg">Continue</button>
</div>
</form>
enter image description here
Use of display:table-*
table {
border-collapse: separate;
}
.form-inline {
display: table-row;
}
.form-inline label, .form-inline input {
display: table-cell;
margin: 0 0 5px 10px;
}
<form>
<div class="form-group form-inline">
<label for="exampleInputPrice" class="personal-form-labels">Purchase Price</label>
<input type="text" class="form-control" id="exampleInputPrice" placeholder="$$$">
</div>
<div class="form-group form-inline">
<label for="exampleInputLoan" class="personal-form-labels">Loan Amont</label>
<input type="text" class="form-control" id="exampleInputLoan" placeholder="$$$">
</div>
<div class="col-md-12 text-center block-buttons">
<button type="submit" class="btn btn-primary btn-lg">Continue</button>
</div>
</form>
Try like this , bootstrap Horizontal form not support in bootstrap -4
Not supported ,use bootstrap 3
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<form class="form-horizontal" action="/action_page.php">
<div class="form-group">
<label class="control-label col-sm-2" for="Purchase Price">Purchase Price</label>
<div class="col-sm-4">
<input type="email" class="form-control" id="exampleInputPrice" placeholder="$$$">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="Loan Amont">Loan Amont</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="exampleInputLoan" placeholder="$$$">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Continue</button>
</div>
</div>
</form>
bootsrap-3 doc https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_form_horizontal&stacked=h
If you are using bootstrap 4 Try This :
<form>
<div class="form-group row">
<label for="exampleInputPrice" class="col-sm-2 col-form-label">Purchase Price</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="exampleInputPrice" placeholder="$$$">
</div>
</div>
<div class="form-group row">
<label for="exampleInputLoan" class="col-sm-2 col-form-label">Loan Amont</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="exampleInputLoan" placeholder="$$$">
</div>
</div>
<div class="form-group form-inline">
<button type="submit" class="btn btn-primary btn-lg">Continue</button>
</div>
</form>
https://jsfiddle.net/sv2j08dd/3/
Modulation:
Glass thickness:
css:
.inputs span{ display: inline-block; width: 60%; padding: 0 0 15px 0; }
.inputs span input{ width: 30%; float: left; height:25px;padding: 0 5px;}
.inputs{width: 100%;float: left;padding: 0 25px; box-sizing: border-box;}
.inputs label{width: 20%;float: left;}
I have this HTML bootstrap form.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<form method="POST" action="reportGenerator.php" class="form-inline">
<div class="input-group">
<input type="text" id="From" class="form-control" name="From" placeholder="Date From">
<input type="text" id="To" class="form-control" name="To" placeholder="Date To">
<select name="Target" class="form-control" type="button" id="Target" data-toggle="dropdown">
<OPTION>Sale</OPTION>
<OPTION>Purchase</OPTION>
</select>
<span class="input-group-btn">
<input class="btn btn-default" type="submit" value="Generate Report" />
</span>
</div>
</form>
</div>
</div>
The output is a little bit weird, I have it like
But what I'm trying to do is set all of them into one row exactly.
Are there any bootstrap classes that can do this?
Are there any Bootstrap Classes that can do this?
Not exactly and definitely not with an input-group/button class since they only support a single input.
You can use columns and remove the padding applied to them in order to have each input/button in a single row with no space between them. The vast majority of the CSS is cosmetic (without function) simply to show a uniform set of controls. These can be adjusted however you see fit obviously.
**The example allows the columns to collapse # 767px for improved mobile use. If this isn't desirable you can easily change the column setup to whatever makes sense.
Working Example: Use FullPage view.
.form {
margin: 20px;
}
.no-gutter > [class*='col-'] {
padding-right: 0;
padding-left: 0;
}
.form .form-control.new-form-control,
.form button {
border-radius: 0;
}
.form .form-control.new-form-control:focus {
border-color: #66afe9;
outline: 0;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6)
}
#media (min-width: 768px) {
.form .form-control.new-form-control {
border-right: 1px solid transparent;
}
.form button {
height: 34px;
}
}
#media (max-width: 767px) {
.form .form-control.new-form-control {
border-bottom: 1px solid transparent;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<form class="form">
<div class="row no-gutter">
<div class="col-xs-12 col-sm-3">
<input type="text" id="From" class="form-control new-form-control" name="From" placeholder="Date From">
</div>
<div class="col-xs-12 col-sm-3">
<input type="text" id="To" class="form-control new-form-control" name="To" placeholder="Date To">
</div>
<div class="col-xs-12 col-sm-3">
<select id="Target" class="form-control new-form-control" name="Target">
<option value="">Select 1 Option</option>
<option value="Sale">Sale</option>
<option value="Purchase">Purchase</option>
</select>
</div>
<div class="col-xs-12 col-sm-3">
<button type="submit" class="btn btn-default btn-block">
Generate Report
</button>
</div>
</div>
</form>
</div>
Simply use this code in place of your code ..
In bootstrap there are class called Col-lg-n,col-md-n.. this will divide the screen into some column n .max n value is 12..
below is the code
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" >
<div class="container">
<div class="row">
<form method="POST" action="reportGenerator.php" class="form-inline">
<div class="input-group">
<div class="col-lg-3 col-md-3">
<input type="text" id="From" class="form-control" name="From" placeholder="Date From">
</div>
<div class="col-lg-3 col-md-3">
<input type="text" id="To" class="form-control" name="To" placeholder="Date To">
</div>
<div class="col-lg-3 col-md-3">
<select name="Target" class="form-control" type="button" id="Target" data-toggle="dropdown">
<OPTION>Sale</OPTION>
<OPTION>Purchase</OPTION>
</select>
</div>
<div class="col-lg-3 col-md-3">
<span class="input-group-btn">
<input class="btn btn-default" type="submit" value="Generate Report" />
</span>
</div>
</div>
</form>
</div>
</div>
If you are using a laptop then you should consider adding the col-md-[enter number from 1 to 12] to your forms.
Code
<html lang="en">
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<form method="POST" action="reportGenerator.php" class="form-inline">
<div class="input-group">
<div class="row">
<div class="col-md-3">
<input type="text" id="From" class="form-control" name="From" placeholder="Date From">
</div>
<div class="col-md-3">
<input type="text" id="To" class="form-control" name="To" placeholder="Date To">
</div>
<div class="col-md-3">
<select name="Target" class="form-control" type="button" id="Target" data-toggle="dropdown">
<OPTION>Sale</OPTION>
<OPTION>Purchase</OPTION>
</select>
</div>
<div class="col-md-3">
<span class="input-group-btn">
<input class="btn btn-default" type="submit" value="Generate Report"
</select>
</div>
</div>
</span>
</div>
</form>
</div>
</div>
</body>
</html>
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!
In our forms, we try to:
Add a background color to the form and
background color to the the last row of the form, which usually contains our buttons.
The problem is that the background color of the last row, is not aligned correctly. You will see that the last row size is exceeded the form width.
Please see:
http://jsfiddle.net/4ThKn/2/
As you noted the black background color is not aligned correctly with the form pink color.
Here is the code, which is same as sample in bootstrap site:
<div class="container">
<div class="row">
<div class="col-md-6">
<form class="form-horizontal" role="form" style="background-color:pink">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox">Remember me</label>
</div>
</div>
</div>
<div class="form-group" style="background-color: black">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
<button type="submit" class="btn btn-default">Ignore!</button>
</div>
</div>
</form>
</div>
<div class="col-md-6">
I am just a sample
</div>
</div>
</div>
Invert your divs try this:
<div class="col-sm-offset-2 col-sm-10" style="background: black">
<div class="form-group">
<button type="submit" class="btn btn-default">Sign in</button>
<button type="submit" class="btn btn-default">Ignore!</button>
</div>
</div>
The problem was each form-group has a left and right margin of -15px, so it's expected that the black part to be 30px wider than the pink part.
To fix it I did as below:
<div style="background-color: black; margin-left: 0px; margin-right: 0px;" class="form-group">
Reference : https://github.com/morteza/bootstrap-rtl/issues/20