I am looking for a way to append a text field inline with a radio button, I am currently using Boostrap. If someone know a specific class for this purpose, that will be appreciated.
My current approach is always mis-aligned, the textbox goes right under the radio button which is something i dont want.
JSFiddle here. http://jsfiddle.net/fs85eedu/
<div class="radio">
<label class="control-label">
<input type="radio" name="radioname" id="radioid" class="radio_class">
<label>text here</label>
<div class='row'>
<div class="col-md-5">
<input type="text" id="q4_c_1_2" name="q4_c_text" placeholder="Enter role/titile" class="form-control">
</div>
</div>
</label>
</div>
Maybe something like this. Just put both controls in same row.
<div class="radio">
<div class='row'>
<div class="col-md-2">
<label class="control-label"></label>
<input type="radio" name="radioname" id="radioid" class="radio_class">
<label>text here</label>
</div>
<div class="col-md-3">
<input type="text" id="q4_c_1_2" name="q4_c_text" placeholder="Enter role/titile" class="form-control">
</div>
</div>
</div>
Related
My radio buttons are too close together and I would like them to evenly be displayed across the row using the bootstrap grid system. Any idea's on how I can accomplish this?
<div class="radio">
<div class="row">
<div class="col-md-12">
<label>
<input id="visitors_radio" name="user[role]" type="radio">
Visitors
</label>
<label>
<input id="staff_radio" name="user[role]" type="radio">
Staff
</label>
<label>
<input id="volunteer_radio" name="user[role]" type="radio">
Volunteer
</label>
</div>
</div>
</div>
<div class="radio">
<div class="row">
<div class="col-md-4">
<label>
<input id="visitors_radio" name="user[role]" type="radio">
Visitors
</label>
</div>
<div class="col-md-4">
<label>
<input id="staff_radio" name="user[role]" type="radio">
Staff
</label>
</div>
<div class="col-md-4">
<label>
<input id="volunteer_radio" name="user[role]" type="radio">
Volunteer
</label>
</div>
</div>
</div>
Make use of the bootstrap grid to help you to achieve that.
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>
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>
<div class="control-group">
<label for="name" class="control-label"><p class="text-info">Name <i class="icon-star"></i></p></label>
<div class="controls">
<input type="text" id="name" placeholder="Enter your name" class="span3">
</div>
this is not working for me, I dont wanna use 'form-horizontal' class or a table for this. I have tried with row and row-fluid class but its not working.
You can wrap your code with <div class="form-horizontal">. You don't need to have a form to use form-horizontal.
Example:
<div class="form-horizontal">
<div class="control-group row-fluid form-inline">
<label for="name" class="control-label"><p class="text-info">Name <i class="icon-star"></i></p></label>
<div class="controls">
<input type="text" id="name" placeholder="Enter your name" class="span3">
</div>
</div>
</div>
You want horizontal form layout. This can be achieved by wrappping your code between a div having class as form-horizontal.
<div class="form-horizontal">
<div class="control-group">
<label for="name" class="control-label"><p class="text-info">Name <i class="icon-star"></i></p></label>
<div class="controls">
<input type="text" id="name" placeholder="Enter your name" class="span3">
</div>
</div>
To learn more click here
What is the proper way to mark up help-inline or help-block for a radio or chechbox field?
This is not displaying as I would expect it to:
<div class="control-group">
<div class="controls">
<label class="radio" for="foo">
<input type="radio" name="foobar" value="foo" id="foo">
Foo label
</label>
<span class="help-inline">Foo inline help</span>
</div>
</div>
EDIT 1:
Follow up question: how do I mark up the second radio option? Wrapped in another div.controls?
See Simbirsk's answer - helped me:
<form class="form-horizontal">
<div class="control-group">
<label class="control-label" for="inputType">Type</label>
<div class="controls">
<input type="text" id="inputType" placeholder="Type">
</div>
</div>
<div class="control-group">
<span class="control-label">Metadata</span>
<div class="controls form-inline">
<label for="inputKey">Key</label>
<input type="text" class="input-small" placeholder="Key" id="inputKey">
<label for="inputValue">Value</label>
<input type="password" class="input-small" placeholder="Value" id="inputValue">
</div>
</div>
</form>
Note that I'm using .form-inline to get the propper styling inside a .controls.
You can test it on this jsfiddle
It would be nice to also write what do you actually expect. I'll have to guess on your expectations here and propose the following solution:
<div class="control-group">
<div class="controls">
<label class="radio" for="foo">
<input id="IsActivated" name="IsActivated" type="radio" value="true">
Is Activated
<span class="help-inline">Foo inline help</span>
</label>
</div>
</div>
We implemented it as follows:
<div class="control-group">
<label class="control-label" for="foo">Foo label</label>
<div class="controls">
<label class="checkbox">
<input id="foo" name="foo" type="radio">
Foo message
</label>
</div>
</div>