I have this horizontal form (from the docs example).
I'd like to add radiobutton before the labels, and also a dropbox to the right. So I need a four (aligned) column horizontal form. Whats the best way to do this?
<form class="form-horizontal" role="form">
<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>
</form>
radio and drop-down next to label
change form type to form-inline
before any label, just do this :
<input type="radio" class="" placeholder="" name="radio_btn" />
<label for="inputEmail3" class="col-sm-2 control-label inline-show ">Email</label>
<select>
<option>1</option>
<option>1</option>
<option>1</option>
</select>
Related
I was looking up this style on bootswatch: https://bootswatch.com/simplex/
And especially looked for styling forms, like here:
But when I add the code that you get when clicking on the little red icon in the top right of the form example on bootswatch to my website, it looks like this:
So the text labels and input fields have a line break inbetween them, the a little darker shaded background box isnt shown and other things are misaligned, too. How does that come?
This is the entire code of my Page:
#model WebProto.ViewModels.NewChartConfigViewModel
#using MaschinenModell;
#{
ViewBag.Title = "Neues Diagramm";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<form class="form-horizontal">
<fieldset>
<legend>Legend</legend>
<div class="form-group">
<label for="inputEmail" class="col-lg-2 control-label">Email</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="inputEmail" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-lg-2 control-label">Password</label>
<div class="col-lg-10">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
<div class="checkbox">
<label>
<input type="checkbox"> Checkbox
</label>
</div>
</div>
</div>
<div class="form-group">
<label for="textArea" class="col-lg-2 control-label">Textarea</label>
<div class="col-lg-10">
<textarea class="form-control" rows="3" id="textArea"></textarea>
<span class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span>
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label">Radios</label>
<div class="col-lg-10">
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked="">
Option one is this
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
Option two can be something else
</label>
</div>
</div>
</div>
<div class="form-group">
<label for="select" class="col-lg-2 control-label">Selects</label>
<div class="col-lg-10">
<select class="form-control" id="select">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<br>
<select multiple="" class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-lg-10 col-lg-offset-2">
<button type="reset" class="btn btn-default">Cancel</button>
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</fieldset>
</form>
Okay im so flipping stupid. Its because I displayed the webpage I created in internet explorer. My fault! :D
Firefox, Opera and Chrome show it correctly.
https://jsfiddle.net/w0bekp8q/
<form class="form" role="form" method="post" action="">
<div class="form-group">
<div class="col-md-4">
<label for="reportee_first_name" class="control-label">First Name</label>
<input type="text" class="form-control" id="reportee_first_name" name="reportee_first_name" placeholder="First Name" value="">
</div>
<div class="col-md-4">
<label for="reportee_middle_name" class="control-label">Middle Name</label>
<input type="text" class="form-control" id="reportee_middle_name" name="reportee_middle_name" placeholder="Middle Name" value="">
</div>
<div class="col-md-4">
<label for="reportee_last_name" class="control-label">Last Name</label>
<input type="text" class="form-control" id="reportee_last_name" name="reportee_last_name" placeholder="Last Name" value="">
</div>
</div>
<div class="form-group">
<div class="col-md-6">
<label for="reportee_address_1" class="control-label">Address</label>
<input type="text" class="form-control" id="reportee_address_1" name="reportee_address_1" placeholder="Address" value="">
</div>
<div class="col-md-6">
<label for="reportee_address_2" class="control-label">Address 2</label>
<input type="text" class="form-control" id="reportee_address_2" name="reportee_address_2" placeholder="Address 2" value="">
</div>
</div>
<div class="form-group">
<div class="col-md-6">
<label for="reportee_city" class="control-label">City</label>
<input type="text" class="form-control" id="reportee_city" name="reportee_city" placeholder="City" value="">
</div>
<div class="col-md-6">
<label for="reportee_zip" class="control-label">Zip</label>
<input type="text" class="form-control" id="reportee_zip" name="reportee_zip" placeholder="Zip" value="">
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<label for="reportee_phone" class="control-label">Phone</label>
<input type="text" class="form-control" id="reportee_phone" name="reportee_phone" placeholder="Phone" value="">
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<label for="reportee_email" class="control-label">Email Address</label>
<input type="email" class="form-control" id="reportee_email" name="reportee_email" placeholder="Email Address" value="">
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<button id="submit" name="submit" type="submit" class="btn btn-primary btn-sm">Send</button>
</div>
</div>
</form>
In my above JSFIDDLE, if you drag it out, you can see that my submit button butts up against the Email Address Input Box.
This is how it looks on my dev site -
What am I missing here that causes my submit button to not have space between it and the input?
just change the form class to form-horizontal:
<form class="form" role="form" method="post" action="">
to
<form class="form-horizontal" role="form" method="post" action="">
EDIT:
when you use form class all col-md-* classes you used inside form-group will get a float: left; in large screens which causes the form-group doesn't take it's children height. so it goes to top of the root element, so the margin-bottom of the form-group will not apply exactly on above of your button and instead on top of the root element. using form-horizontal prevents that behaviour.
I don't know why but your .form-group is losing it's height from bootstraps md view port width and large. There is a few things you can do. You can apply you margin-bottom to the inner div, with the col-md-12, instead of .form-group.
.col-md-12 {
margin-bottom: 15px;
}
You can also try using col-xs-12, instead of md. Then you have consistent styles and can add the needed margins without any #media.
<div class="form-group">
<div class="col-xs-12">
.....
</div>
</div>
Edit: Adam pointed out the redundant bootstrap classes.
I'm new to Bootstrap, I'm creating a registration form with two input fields:
<div class="input-group">
<div class="form-group">
<label class="control-label" for="user_password">Password</label>
<div class="controls">
<input type="{{passwordType}}" data-ng-change="passwordChanged();" data-ng-model="user.password"
class="form-control" id="user_password" name="user_password"
placeholder="Password" required>
</div>
</div>
<div class="form-group">
<label class="control-label">Show Password</label>
<div class="controls">
<input type="checkbox" data-ng-model="showPassword" data-ng-checked="showPassword"
data-ng-click="switchPasswordType()">
</div>
</div>
However I don't know what css style I'm missing but the label and the input field appeas one below the other at the left of the grid-container, so no like usual form. I have tried to put both inside a "" with the style="display:inline-block" and still same problem.
Any ideas how to sove that?
Thank you for your time.
Found the solution, I just created a row with two columns inside one for the label and other for the input and it made the job.
<div class="row">
<div class="col-sm-6">
<label class="control-label" class="" for="user_email">Email</label>
</div>
<div class="col-sm-6">
<div class="controls">
<input type="email" auto-focus autofocus="true" data-ng-model="user.email"
id="user_email" name="user_email"
placeholder="Insert your email" required>
</div>
</div>
</div>
I have this piece of code in my meteor application.
Meteor version is : Meteor 1.0.3.1
The code well formatted as required by blaze template. But I don't understand this problem.
I was able to use quickForm of autoform package but not able to use autoform.
<template name="register">
{{> autoForm collection="Users" id="addUserForm" type="insert"}}
<fieldset>
<legend>Register</legend>
<div class="form-group">
<label for="inputFirstName" class="col-lg-2 control-label">First Name</label>
<div class="col-lg-10">
{{> afFieldInput name="firstName" class="form-control" id="inputFirstName"}}
</div>
</div>
<div class="form-group">
<label for="inputLastName" class="col-lg-2 control-label">Last Name</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="inputLastName" placeholder="Last Name" />
</div>
</div>
<div class="form-group">
<label for="inputEmail" class="col-lg-2 control-label">Email</label>
<div class="col-lg-10">
<input type="email" class="form-control" id="inputEmail" placeholder="Email" />
</div>
</div>
<div class="form-group">
<label for="inputPass" class="col-lg-2 control-label">Password</label>
<div class="col-lg-10">
<input type="password" class="form-control" id="inputPass" placeholder="Password" />
</div>
</div>
<div class="form-group">
<label for="inputMobileNum" class="col-lg-2 control-label">Mobile Number</label>
<div class="col-lg-10">
<input type="tel" class="form-control" id="inputMobileNum" placeholder="Mobile Number" />
</div>
</div>
<div class="form-group">
<label for="inputDOB" class="col-lg-2 control-label">Date of Birth</label>
<div class="col-lg-10">
<input type="date" class="form-control" id="inputDOB" placeholder="Date of Birth" />
</div>
</div>
<div class="form-group">
<label for="bgroup" class="col-lg-2 control-label">Blood Group</label>
<div class="col-lg-10">
<select class="form-control" id="bgroup">
<option>A+</option>
<option>A-</option>
<option>B+</option>
<option>B-</option>
<option>AB+</option>
<option>AB-</option>
<option>O+</option>
<option>O-</option>
</select>
</div>
</div>
<div class="form-group">
<label for="country" class="col-lg-2 control-label">Country</label>
<div class="col-lg-10">
<select class="form-control" id="country">
<option>India</option>
</select>
</div>
</div>
<div class="form-group">
<label for="state" class="col-lg-2 control-label">State</label>
<div class="col-lg-10">
<select class="form-control" id="state">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</div>
<div class="form-group">
<label for="city" class="col-lg-2 control-label">City</label>
<div class="col-lg-10">
<select class="form-control" id="city">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</div>
</fieldset>
<div class="form-group">
<div class="col-lg-10 col-lg-offset-2">
<button type="submit" class="btn btn-primary">Register</button>
</div>
</div>
{{/autoForm}}
</template>
I am getting following error:
While building the application:
register.html:96: Unexpected closing template tag
... </div> {{/autoForm}}
Have a look at the Spacebars syntax.
{{> template ... }} means, put the contents of "template" there. There's no closing tag; it's just a one-line inclusion.
{{# block ... }} on the other hand, is a block helper, which has content and a matching closing tag {{/block}}. The most popular block helper is each:
{{#each players}}
{{> player}}
{{/each}}
So you don't need {{/autoform}}.
How to vertically align label and input in Bootstrap 3? I would like both the label and input on same line. I have played around with different classes and custom CSS but nothing seems to work.
The JSfiddle
<div class="form-group">
<div class="row">
<div class="col-xs-3">
<label for="class_type"><h2><span class=" label label-primary">Class Type</span></h2></label>
</div>
<div class="col-xs-2">
<select name="class_type" id="class_type" class=" form-control input-lg" style="width:200px" autocomplete="off">
<option >Economy</option>
<option >Premium Economy</option>
<option >Club World</option>
<option >First Class</option>
</select>
</div>
</div>
</div>
The bootstrap 3 docs for horizontal forms let you use the .form-horizontal class to make your form labels and inputs vertically aligned. The structure for these forms is:
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="input1" class="col-lg-2 control-label">Label1</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="input1" placeholder="Input1">
</div>
</div>
<div class="form-group">
<label for="input2" class="col-lg-2 control-label">Label2</label>
<div class="col-lg-10">
<input type="password" class="form-control" id="input2" placeholder="Input2">
</div>
</div>
</form>
Therefore, your form should look like this:
<form class="form-horizontal" role="form">
<div class="form-group">
<div class="col-xs-3">
<label for="class_type"><h2><span class=" label label-primary">Class Type</span></h2></label>
</div>
<div class="col-xs-2">
<select id="class_type" class="form-control input-lg" autocomplete="off">
<option>Economy</option>
<option>Premium Economy</option>
<option>Club World</option>
<option>First Class</option>
</select>
</div>
</div>
</form>
When input-lg is used, margins mismatch unless you use form-group-lg in addition to form-group class.
Its example is in docs:
<form class="form-horizontal">
<div class="form-group form-group-lg">
<label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
<div class="col-sm-10">
<input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
</div>
</div>
<div class="form-group form-group-sm">
<label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
<div class="col-sm-10">
<input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
</div>
</div>
</form>
None of these solutions worked for me. But I was able to get vertical centering by using <div class="form-row align-items-center"> for each form row, per the Bootstrap examples.
The problem is that your <label> is inside of an <h2> tag, and header tags have a margin set by the default stylesheet.
This works perfectly for me in Bootstrap 4.
<div class="form-row align-items-center">
<div class="col-md-2">
<label for="FirstName" style="margin-bottom:0rem !important;">First Name</label>
</div>
<div class="col-md-10">
<input type="text" id="FirstName" name="FirstName" class="form-control" val=""/>
/div>
</div>