I am trying to use an input text box along with a selection box of custom height and width, but I couldn't align them properly:
<form class="form-inline" role="form">
<div class="form-group">
<input class="form-control" style="width: 600px; height: 30px" />
<select class="form-control">
//options here
</select>
<button type="submit" class="btn btn-default" id="<portlet:namespace/>productSearchBtn">Search</button>
</div>
</form>
and the output looks something like this
then I set a custom width for Select button [width: 300px],
It seems like the input text box, select drop down and submit button are misaligned.
Please...how can I fix them so both are aligned properly?
You should be looking at Bootstrap 3.0 grid-column structure.
Here's what you are looking for
Markup:
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-xs-4 col-md-3">
<input class="form-control" />
</div>
<div class="col-xs-4 col-md-3">
<select class="form-control">//options here</select>
</div>
<div class="col-xs-2 col-md-1">
<button type="submit" class="btn btn-default" id="<portlet:namespace/>productSearchBtn">Search</button></div>
</div>
Use the bootstrap grid system insteed of fixing width http://getbootstrap.com/css/#grid
Try with form-inline and form-group
<form class="form-inline">
<div class="form-group">
<input class="form-control" />
</div>
<div class="form-group">
<select class="form-control">
<option>Categories</option>
</select>
</div>
<button type="submit" class="btn btn-default" id="<portlet:namespace/>productSearchBtn">Search</button>
</form>
All thing you should do is wrap the entire thing in form-inline class and form-group
Code
<form class="form-inline" role="form">
<div class="form-group">
<input class="form-control" />
</div>
<div class="form-group">
<select class="form-control">
<option>All Categories</option>
</select>
<button type="submit" class="btn btn-default" id="<portlet:namespace/>productSearchBtn">Search</button>
</div>
</form>
Related
I have the above form with a submit button on the right side. The button has stretched to match the height of the input boxes PLUS their labels. I want the button to only match the height of the input boxes and be even with them. How can I go about accomplishing that? I have tried inserting an empty div above the button to squash it down and wasn't able to get it to work. I have also tried adjusting the max height of the button but it does not seem to do anything.
Additionally, I am using bootstrap for all my styling, so I would prefer a solution using bootstrap classes, but if that is not possible, then I'll take custom css solutions as well. Thank you.
Here is the html:
<form class="mb-5" method="post">
<fieldset class="row">
<div class="form-group col">
<label class="form-label mt-4">Select Client</label>
<select class="form-select">
<option>1</option>
</select>
</div>
<div class="form-group col">
<label class="form-label mt-4">Select Table</label>
<select class="form-select">
<option>1</option>
</select>
</div>
<div class="form-group col">
<label class="form-label mt-4">Enter Date</label>
<input type="date" class="form-control">
</div>
<button type="submit" class="btn btn-primary col-1">Load Data</button>
</fieldset>
</form>
Not the cleanest solution probably but can be achieved like so:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<form class="mb-5" method="post">
<fieldset class="row">
<div class="form-group col">
<label class="form-label">Select Client</label>
<select class="form-control">
<option>1</option>
</select>
</div>
<div class="form-group col">
<label class="form-label">Select Table</label>
<select class="form-control">
<option>1</option>
</select>
</div>
<div class="form-group col">
<label class="form-label">Enter Date</label>
<input type="date" class="form-control">
</div>
<div class="form-group col">
<label class="form-label"> </label>
<button type="submit" class="btn btn-primary form-control">Load Data</button>
</div>
</fieldset>
</form>
You can remove all your mt-4 classes from your labels and add a pt-4 class to <fieldset class="row pt-4">. Basically moving your positioning class one level up.
Placing the button inside a div and giving it class col-1 worked, you might have not removed col-1 from button itself, try this html:
(do use full page to view it, as the text "load page" is wrapping up that results in increased button height)
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<form class="mb-5" method="post">
<fieldset class="row">
<div class="form-group col">
<label class="form-label mt-4">Select Client</label>
<select class="form-select">
<option>1</option>
</select>
</div>
<div class="form-group col">
<label class="form-label mt-4">Select Table</label>
<select class="form-select">
<option>1</option>
</select>
</div>
<div class="form-group col">
<label class="form-label mt-4">Enter Date</label>
<input type="date" class="form-control">
</div>
<div class="col-1 d-flex align-items-end">
<button type="submit" class="btn btn-primary">Load Data</button>
</div>
</fieldset>
</form>
I have the following form in my Angular app Using Bootstrap 4. I want my form label and input text box to be on the same line but its not working. The label and the input text box appears on separate lines. I have searched but couldn't find any better answer ::
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-md-12">
<form class="form-horizontal" [formGroup]="parentCategoryForm" autoComplete="off">
<div class="form-group">
<label class="control-label col-md-2" for="parent">Category name</label>
<div class="col-md-10">
<input type="text" formControlName="parentName" name="parentName" class="form-control" id="parentName" />
</div>
</div>
<div class="btn-toolbar pull-right">
<button type="button" (click)="cancel()" class="btn btn-outline-danger btn-sm mr-4">Cancel</button>
<button type="submit" class="btn btn-outline-primary btn-sm">Submit</button>
</div>
</form>
</div>
</div>
I am following the tutorials from this site Creating Horizontal Form Layout
What am I doing wrong?
please add class row on form-group
<div class="form-group row"> </div>
Use the input-group class. Follow This
I have a project that is based on the Gentellela template from ColorLib. The Search Bar at the top is inline and styled, however is not a form. When I add the code to submit the search to my view, the submit ("Go") button moves to the next line.
What is the best way to accomplish this while keeping the style?
Original Code from Template (sans form tags).
<div style="padding-top:7px;" class="col-md-5 col-sm-5 col-xs-12 form-group pull-right top_search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
</div>
My Latest Attempt
<div style="padding-top:7px;" class="col-md-5 col-sm-5 col-xs-12 form-group pull-right top_search">
<form action="" method="post" class="form-inline">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search for...">
</div>
<span class="input-group-btn">
<button class="btn btn-default" type="submit">Go!</button>
</span>
</form>
</div>
As Always, I appreciate all help, suggestions and comments.
A good practice would be to nest the input field and the button inside form-group with a div that has a input-group class. This is how input groups are made on Bootstrap.
It applies a display:inline-table style to hold the components inline.
<div style="padding-top:7px;" class="col-md-5 col-sm-5 col-xs-12 form-group pull-right top_search">
<form action="" method="post" class="form-inline">
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="submit">Go!</button>
</span>
</div>
</div>
</form>
</div>
I am using Bootstrap 3 and I stuck on some form formatting.
E.g. I want to have 3 inline forms (each with label, text input and button) so they elements (label, text input, button) will be all perfectly matching (in column?)
If you look at this fiddle example you can see, that I almost achieved this by setting col-xs-6 to each form-group. But this makes too big space between input and submit button and also break too soon when resizing (and also when I try to align whole form set to left, everything is broken).
So is there any way to align this form elements instead of this?
<form class="form-inline">
<div class="form-group col-xs-6 text-right">
<label for="exampleInputName2">Results per page</label>
<input type="text" class="form-control" id="exampleInputName2" >
</div>
<div class="form-group col-xs-6">
<button type="submit" class="btn btn-default">Save</button>
</div>
</form>
<form class="form-inline">
<div class="form-group col-xs-6 text-right">
<label for="exampleInputName2">Keyword weight</label>
<input type="text" class="form-control" id="exampleInputName2" >
</div>
<div class="form-group col-xs-6">
<button type="submit" class="btn btn-default">Save</button>
</div>
</form>
<form class="form-inline">
<div class="form-group col-xs-6 text-right">
<label for="exampleInputName2">Results per page</label>
<input type="text" class="form-control" id="exampleInputName2" >
</div>
<div class="form-group col-xs-6">
<button type="submit" class="btn btn-default">Save</button>
</div>
</form>
This fiddle might help you. The entire layout can be put into container and each form can be given a margin and text-align css properties.
And I dont think there is a need for text-right and col-xs-6 to be included, instead you can use container to restrict the max-width and make it more responsive as shown in the fiddle.
Why not just give a width to your label? If you put the three elements into the same column then you can just make the label inline-block and give it a width (you may need to use the full page link in the snippet below to see this working)
.form-group > label {
display: inline-block;
vertical-align: middle;
width: 9em;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2">Results per page</label>
<input type="text" class="form-control" id="exampleInputName2">
<button type="submit" class="btn btn-default">Save</button>
</div>
</form>
<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2">Keyword weight</label>
<input type="text" class="form-control" id="exampleInputName2">
<button type="submit" class="btn btn-default">Save</button>
</div>
</form>
<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2">Results per page</label>
<input type="text" class="form-control" id="exampleInputName2">
<button type="submit" class="btn btn-default">Save</button>
</div>
</form>
In Bootstrap, if I have an input box with label and button in the same row, how do I get the button to align? I don't want to append it to the input box using input-append - any ideas?
<div class="row">
<div class="form-group col-sm-3">
<label for="txtSchedFromDate">
From:</label>
<input type="text" class="form-control input-sm" id="txtSchedFromDate" />
</div>
<div class="form-group col-sm-3">
<label for="txtSchedToDate">
To:</label>
<input type="text" class="form-control input-sm" id="txtSchedToDate" />
</div>
<div class="form-group col-sm-3">
<button type="button" id="btnResetEngineers" class="btn btn-default">
Reset Engineers</button>
</div>
</div>
JSFiddle
Many thanks
These are the changes I have made
Just include form-control in the button class and an empty label for the button's div
<div class="form-group col-sm-3">
<label for="txtSchedFromDate">
</label>
<button type="button" id="btnResetEngineers" class="form-control btn btn-default">Reset Engineers</button>
</div>
Here's a corrected fiddle
https://jsfiddle.net/Indu9594/rcwyso3x/