I am trying to have a small inline form on a page that has a couple of fields for search filters and two buttons for submitting and reset. If I am above the form fields the buttons at the end get out of alignment with the form fields. How would I fix this so it is all inline below the labels?
<div class="row g-3 align-text-bottom">
<form class="row row-cols-md-auto g-3 align-items-center" name="frmRequestSearch" id="frmRequestSearch" method="post" action="#cgi.script_name#">
<div class="col-sm-7">
<label class="form-label">ID</label>
<input type="text" name="cardholder_id" id="id" class="form-control" value="#form.cardholder_id#" placeholder="ID">
</div>
<div class="col-sm">
<label class="form-label">CG</label>
<select class="form-select" name="cardholder_group" value="#cg#" id="cg">
<option></option>
<cfloop query="qryAllGroups">
<option value="#displayname#">#displayname#</option>
</cfloop>
</select>
</div>
<div class="col-sm">
<button type="submit" name="submit" class="btn btn-secondary">Show Results</button>
</div>
<div class="col-sm">
Reset Parameters
</div>
</form>
</div>
Simply use align-items-end...
<form class="row row-cols-md-auto g-3 align-items-end" name="frmRequestSearch" id="frmRequestSearch" method="post" action="#cgi.script_name#">
<div class="col-sm-7">
<label class="form-label">ID</label>
<input type="text" name="cardholder_id" id="id" class="form-control" value="#form.cardholder_id#" placeholder="ID">
</div>
<div class="col-sm">
<label class="form-label">CG</label>
<select class="form-select" name="cardholder_group" value="#cg#" id="cg">
<option></option>
<cfloop query="qryAllGroups">
<option value="#displayname#">#displayname#</option>
</cfloop>
</select>
</div>
<div class="col-sm">
<button type="submit" name="submit" class="btn btn-secondary">Show Results</button>
</div>
<div class="col-sm">
Reset Parameters
</div>
</form>
Demo
Also, you don't want to have a row directly inside another row. Only columns col* should be placed directly in a row.
Related
I am using Bootstrap 5.2, and I have a form that includes the following form snippet:
<div class="row mb-2 align-items-center">
<div class="col-sm-4">
<label class="checkbox-inline" for="Credit_Pulled">Credit Pulled</label>
<input type="checkbox" class="form-check-inline" value="1" name="Credit_Pulled" id="Credit_Pulled">
</div>
<div class="col-sm-4">
<label class="checkbox-inline" for="Is_On_Terms">Approved For Terms</label>
<input type="checkbox" class="align-middle" value="true" name="Is_On_Terms" id="Is_On_Terms">
</div>
<div class="col-sm-4 form-floating">
<label for="Terms_Days">Terms Period</label>
<select class="form-select form-control d-flex" id="Terms_Days" name="Terms_Days">
<option value="0" selected>NONE</option>
<option value="30">NET-30</option>
<option value="60">NET-60</option>
<option value="90">NET-90</option>
</select>
</div>
</div>
<div class="row mb-2">
<div class="col-sm-4 form-floating">
<label for="Credit_Limit">Approved Limit</label>
<input type="text" class="form-control d-flex" id="Credit_Limit" name="Credit_Limit">
</div>
</div>
<div class="row mb-2">
<div class="col-sm-12 w-100 form-floating">
<label for="Review_Notes">Review Notes</label>
<textarea class="form-control rounded" rows="8" id="Review_Notes" name="Review_Notes"></textarea>
</div>
</div>
When I view the form, this is what I get:
The problem is, the form labels and their contents overlap. Is there any way (even by adding custom CSS) to prevent this so that they display cleanly?
Bootstrap docs says that the <label> needs to come after the <input> https://getbootstrap.com/docs/5.0/forms/floating-labels/
This question already has answers here:
Vertical Align Center in Bootstrap 4 [duplicate]
(20 answers)
Closed 2 years ago.
I'm trying to build a simple filter-bar which has a custom-control element.
The element should be aligned vertically but it seems not to be working. This is the markup for the filter-bar:
<div class="bg-light p-3 card">
<form class="form-inline">
<div class="form-row">
<div class="col-auto">
<input type="text" placeholder="The team's name" class="form-control" value="" />
</div>
<div class="col-auto">
<select class="form-control">
<option value="">Select the season</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
</select>
</div>
<div class="col-auto">
<button type="submit" class="btn btn-secondary">
<i class="fas fa-search"/> Search</button>
</div>
<div class="col-auto">
<div class="custom-control custom-switch align-center">
<input type="checkbox" class="custom-control-input" id="vpx" checked="" />
<label class="custom-control-label" for="vpx">Hide 0-point teams</label>
</div>
</div>
</div>
</form>
</div>
But the result is shown below:
No matter which align- class I add, the element won't move a bit. Already tried to set the display property to inline-block as stated in the bootstap-docs.
Only way to achieve something like centered is to add mt-2 class but this seems not to be the correct way this should be done.
Add align-items-center to form-row and also close the <i> tag correctly on Search button
body{ min-width: 800px;}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="bg-light p-3 card">
<form class="form-inline">
<div class="form-row align-items-center">
<div class="col-auto">
<input type="text" placeholder="The team's name" class="form-control" value="" />
</div>
<div class="col-auto">
<select class="form-control">
<option value="">Select the season</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
</select>
</div>
<div class="col-auto">
<button type="submit" class="btn btn-secondary">
<i class="fas fa-search"> Search</i></button>
</div>
<div class="col-auto">
<div class="custom-control custom-switch align-center">
<input type="checkbox" class="custom-control-input" id="vpx" checked="" />
<label class="custom-control-label" for="vpx">Hide 0-point teams</label>
</div>
</div>
</div>
</form>
</div>
There are a few similar questions but none that really provide a solution for my issue (as far as I can see)
Here is my code:
<div class="form-group">
<div class="col-xs-3">
<label for="quantity">Quantity:</label>
<input type="quantity" class="form-control" min="1" max="100" ng-model="formData.quantity" required />
</div>
<div class="col-xs-9">
<label for="type">Type:</label>
<select class="form-control" name="type" ng-model="formData.type" required>
<option value="240" selected>240</option>
<option value="120">120</option>
</select>
<!--<input type="text" class="form-control" name="type" ng-model="formData.type"> -->
</div>
</div>
<div class="form-group">
<label for="type">Type 2:</label>
<select class="form-control" name="typ2 ng-model="formData.typ2e" required>
<option value="240" selected>240</option>
<option value="120">120</option>
</select>
<!--<input type="text" class="form-control" name="type" ng-model="formData.type"> -->
</div>
<div class="form-group row">
<div class="col-xs-6 col-xs-offset-3">
<a ui-sref="form.interests" class="btn btn-block btn-info">
Next Section <span class="glyphicon glyphicon-circle-arrow-right"></span>
</a>
</div>
</div>
Between the form groups there is no vertical spacing, it's all joined together one on top of the other. Not sure what to do. Any help would be appreciated!
You can wrap all the code with the form-horizontal
<div class="form-horizontal">your code</div>
Or add to your css file next code:
.form-group::before,
.form-group::after {
content: " ";
display: table;
}
I'm doing an application with Rails and AngularJS which have a form with a select list, the problem it's that it looks pretty ugly, because the width is too large for the options it have.
Here's my form with some sample values
How can I shorten the width of the select list without distorting the rest of the form?
Here's the code of my form
<h1>Create Form</h1>
<form ng-submit="addPoll()" style="margin-top:30px;">
<div class="form-group">
<label>Title</label>
<input type="text" class="form-control" ng-model="title"></input>
</div>
<div class="form-group">
<label>Description</label>
<textarea type="text" class="form-control" ng-model="description"></textarea>
</div>
<div class="form-group">
<label>Group</label>
<select class="form-control" ng-model="data.groupSelect">
<option ng-repeat="group in data.groups" value="{{group.id}}" >{{group.name}}</option>
</select>
</div>
<div class="form-group">
<label>Welcome Message</label>
<textarea type="text" class="form-control" ng-model="initial_message"></textarea>
</div>
<div class="form-group">
<label>Outgoing Message</label>
<textarea type="text" class="form-control" ng-model="final_message"></textarea>
</div>
<div class="checkbox">
<label>
<input type="checkbox" ng-model="allow_anonymous_answer"> Allow Anonymous Answer
</label>
</div>
<button type="submit" class="btn btn-primary" style="float: right;">Continue</button>
</form>
You can do it a few different ways. You can either add an inline style to the div.form-group or use Bootstrap's grid system. Here's two examples:
<div class="form-group" , style="width: 200px">
<label>Group</label>
<select class="form-control" ng-model="data.groupSelect">
<option ng-repeat="group in data.groups" value="{{group.id}}">{{group.name}}</option>
</select>
</div>
<div class="row">
<div class="col-sm-3">
<div class="form-group">
<label>Group</label>
<select class="form-control" ng-model="data.groupSelect">
<option ng-repeat="group in data.groups" value="{{group.id}}">{{group.name}}</option>
</select>
</div>
</div>
</div>
JSFiddle
I have some bootstrap 3.0 based markup that produces an inline form like this:
The code for this is:
<div class="container">
<form class="form-inline" role="form" id="gh_save">
<div class="form-group">
<input type="text" placeholder="Github username" class="form-control" id="gh_user">
</div>
<div class="form-group">
<div class="col-lg-6">
<input type="text" placeholder="API Key" class="form-control" id="gh_apikey">
</div>
</div>
<button type="submit" class="btn btn-success"> Save </button>
</form>
I am trying to increase the width of the second box (API Key) to be twice what it is now, but no matter what I change the width of the div holding the second input is changing the width. Can someone show me how this done?
when I manually set the width of the second INPUT, I get this:
<form class="form-horizontal">
<div class="form-group">
<div class="col-xs-4">
<input type="text" placeholder="Github username" class="form-control" id="gh_user"/>
</div>
<div class="col-xs-6">
<input type="text" placeholder="API Key" class="form-control" id="gh_apikey" />
</div>
<div class="col-xs-2">
<button type="submit" class="btn btn-success"> Save </button>
</div>
</div>
</form>
DEMO
PS : close input tags as <input class="" />
Final edit here, I guess external bootstrap 3.1.1 was not getting included thus you got the result in 3 different lines, take a look at this
Final Demo
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<div class="container">
<form class="form-inline" role="form" id="gh_save">
<div class="form-group">
<div class="col-xs-4">
<input type="text" placeholder="Github username" class="form-control" id="gh_user"/>
</div>
</div>
<div class="form-group">
<div class="col-xs-6">
<input type="text" placeholder="API Key" class="form-control" id="gh_apikey"/>
</div>
</div>
<div class="form-group">
<div class="col-xs-2">
<button type="submit" class="btn btn-success"> Save </button>
</div>
</div>
</form>
</div>
You should be able to target your ID within your css and set your desired width like so:
#gh_apikey{width:400px;}