I am trying to layout a form in a panel and have a lot of trouble with the formatting.
I don't seem to be able to put a line break between the Save button and the E-mail label. I have tried moving it down using <p> tags. I have tried using form-inline and form-horizontal but only makes things worse.
Alternatively I would like to place the Save button directly next to the textbox but again can't seem to achieve this.
A jsfiddle for an example https://jsfiddle.net/omyuzuu3/.
<div class="col-sm-4" id="leftCol">
<div class="panel panel-default">
<div class="panel-body">
<strong>Account Details</strong><p>
<hr>
<form class="form" method="post" >
<div class="form-group">
<label for="exampleInputName2">Username</label><p>
<input name="txtUsername" type="text" class="form-control" placeholder="<?php echo $user->loadUser()->username; ?>">
</div>
<div class="form-group">
<button type="submit" name="btnSaveUsername" class="btn btn-primary btn-sm pull-right">Save</button>
<p>
</div>
<div class="form-group">
<p>
<label for="exampleInputName2">E-mail</label><p>
<input name="txtEmail" type="text" class="form-control" placeholder="<?php echo $user->loadUser()->email; ?>">
</div>
<div class="form-group">
<button type="submit" name="btnSaveEmail" class="btn btn-primary btn-sm pull-right">Save</button>
</div>
</form>
</div>
</div>
</div>
you use float:right on the save button.
Float element is out of the normal flow, so its container's height does not account for the floating element
screenshot: https://i.imgur.com/xdvP23p.png
Add the clearfix property to floating element's container would fix the issue
screenshot: https://i.imgur.com/HiNC61Q.png
Bootstrap already contains .clearfix class for adding clearfix css properties
What is clearfix ?
Related
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 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>
I use twitter bootstrap and its cover example as the base. I added a few input fields there and would like to have second (email) to be located in the middle (i.e. horizontally aligned). I've tried to add .center-block and .text-center to different div elements, but it didn't help. What should be the solution?
Here is the code:
<p class="lead">Some other text to demonstrate something else</p>
<div class="lead">
<div class="form-group">
<div class="text-center center-text">
<div class="input-group input-group-lg">
<input type="email" class="form-control" id="email">
</div>
</div>
</div>
<button type="button" class="btn btn-lg btn-secondary" id="analyze" data-loading-text="Wait...">Analyze</button>
</div>
and here is the jsfiddle.
remove class input-group like below:
<div class="input-group-lg">
<input type="email" class="form-control" id="email">
http://jsfiddle.net/fwz0w44n/
I'm trying to create a simple modal form that would allow a user to enter a recipe and corresponding ingredients. I'm doing it as an express app (so using Jade) but I have converted the Jade to HTML and made a fiddle.
Strangely enough when running the app locally (accompanying screenshot)the alignment errors are different to the ones produced by the fiddle.
Excuse the HTML mess, I'm new enough to it and guilty of throwing whatever looked reasonable in the docs together.
The modal body HTML (what I imagine to be the offending piece of code) is shown below
<div class="modal-body">
<form id="submitRecipe" role="form" method="post" class="form-horizontal">
<div class="row">
<div class="form-group">
<input type="text" name="recipeName" placeholder="recipe name" autocomplete="off" class="form-control"/>
</div>
</div>
<div class="row">
<div class="form-group">
<div class="form-inline recipeRow">
<div class="form-group">
<input type="text" name="ingredient" placeholder="ingredient" class="form-control"/>
</div>
<div class="form-group">
<input type="text" name="quantity" placeholder="quantity" class="form-control"/>
</div>
<div class="form-group">
<select class="form-control">
<option>g</option>
<option>tsp</option>
</select>
</div>
</div>
</div>
</div>
<div class="form-group">
<input id="add-row" type="button" name="add-row" value="Add row" class="btn btn-default"/>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
Here is the updated fiddle applying James King's suggestion
Take out all the <div class="row"> and remove class="form-horizontal" from your form.
All the .row are giving you negative margins left and right, causing you to overflow the modal
I have this html:
<button type="submit" class="btn btn-default pull-right" id="loginBtn" >Login</button>
The addition of pull-right makes button cut off from bottom:
How can I fix this?
Make sure it's inside a Bootstrap form-group..
<form class="form col-md-12 center-block">
<div class="form-group">
<input type="text" class="form-control input-lg" placeholder="Email">
</div>
<div class="form-group">
<input type="password" class="form-control input-lg" placeholder="Password">
</div>
<div class="form-group">
<button class="btn btn-primary btn-lg pull-right">Login</button>
</div>
</form>
Demo: http://bootply.com/106344
Bootstrap 3 button class "btn" adds display: inline-block, which "Displays an element as an inline-level block container. The inside of this block is formatted as block-level box, and the element itself is formatted as an inline-level box" (http://www.w3schools.com/cssref/pr_class_display.asp). A way around this would be to try the class "clearfix" around the parent (as was explained above). You could also try wrapping the button in a div:
<div class="pull-right"><button></button></div>