Wide space between label for vertical radio button and first choice - html

Wide space between label for vertical radio button and first choice. In an ideal world, I would love it to be the same amount of space as between the field labels and the top line on the fields. Any thoughts or ideas? Thanks in advance.
http://jsfiddle.net/steveadams617/MgcDU/8543/
<div class="container">
<form>
<div class="row">
<div class="col-sm-6">
<div class='form-group'>
<label for="provider_id">Provider</label>
<div>
<input class="form-control" type="text" maxlength="255" value="" name="provider_id_auto" id="provider_id_auto"/>
</div>
</div>
</div>
<div class="col-sm-3">
<div class='form-group'>
<label for='phone_us'>Phone</label>
<input class='form-control phone_us' type='text' maxlength='14' value='' name='phone_us' id='phone_us'/>
</div>
</div>
</div><!-- .row -->
<div class='row'>
<div class="col-sm-6">
<label for="med_coverage_id">Insurance Coverage</label>
<div class="radio">
<label>
<input type="radio" name="med_coverage_id" value="1" checked />
Pending
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="med_coverage_id" value="2" />
Covered
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="med_coverage_id" value="3" />
Needs Prior Approval
</label>
</div>
</div>
</div><!-- .row -->
</form>
</div><!-- .container -->

Your div .radio has a margin-top of 10px. You can manually adjust this like so
<div class="radio" style="margin-top: 0px;">
<label>
<input type="radio" name="med_coverage_id" value="1" checked="">Pending </label>
</div>
or of course edit the stylesheet or add your own style to the .radio-class (eg if you are using a CDN).

Related

How to keep checkbox from collapsing

I'm using bootstrap to create the following form. It works fine in a browser, but when I shrink it down, the boxes and labels stack on top of each other. Is there an easy fix for this in bootstrap so the labels and checkboxes stay in line even on mobile screens?
https://www.bootply.com/quVvJ0pLNo
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group">
<label for="test" class="col-sm-5 control-label">mytest</label>
<div class="col-sm-7 text-center">
<div class="row">
<div class="col-sm-1">Mon</div>
<div class="col-sm-1">Tue</div>
<div class="col-sm-1">Wed</div>
<div class="col-sm-1">Thu</div>
<div class="col-sm-1">Fri</div>
<div class="col-sm-1">Sat</div>
<div class="col-sm-1">Sun</div>
</div>
<div class="row checkbox text-center">
<div class="col-sm-1 ">
<label>
<input type="checkbox" name="test" id="test2" value="1" aria-label="1">
</label>
</div>
<div class="col-sm-1">
<label>
<input type="checkbox" name="test" id="test2" value="2" aria-label="2">
</label>
</div>
<div class="col-sm-1">
<label>
<input type="checkbox" name="test" id="test2" value="3" aria-label="3">
</label>
</div>
<div class="col-sm-1">
<label>
<input type="checkbox" name="test" id="test2" value="4" aria-label="4">
</label>
</div>
<div class="col-sm-1">
<label>
<input type="checkbox" name="test" id="test2" value="5" aria-label="5">
</label>
</div>
<div class="col-sm-1">
<label>
<input type="checkbox" name="test" id="test2" value="6" aria-label="6">
</label>
</div>
<div class="col-sm-1">
<label>
<input type="checkbox" name="test" id="test2" value="7" aria-label="7">
</label>
</div>
</div>
</div>
</div>
Try using checkbox with label text and used col-xs-1 instead of col-sm-1 for same output in mobile screen.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group">
<label for="test" class="col-sm-5 control-label">mytest</label>
<div class="col-sm-7 text-center">
<div class="row">
<div class="col-xs-1">
<label>
Mon<br/>
<input type="checkbox" name="test" id="test1" value="1" aria-label="1">
</label>
</div>
<div class="col-xs-1">
<label>
Tue <br/>
<input type="checkbox" name="test" id="test2" value="2" aria-label="2">
</label>
</div>
<div class="col-xs-1">
<label>
Wed <br/>
<input type="checkbox" name="test" id="test3" value="3" aria-label="3">
</label>
</div>
<div class="col-xs-1">
<label>
Thu <br/>
<input type="checkbox" name="test" id="test2" value="4" aria-label="4">
</label>
</div>
<div class="col-xs-1">
<label>
Fri <br/>
<input type="checkbox" name="test" id="test5" value="5" aria-label="5">
</label>
</div>
<div class="col-xs-1">
<label>
Sat <br/>
<input type="checkbox" name="test" id="test6" value="6" aria-label="6">
</label>
</div>
<div class="col-xs-1">
<label>
Sun <br/>
<input type="checkbox" name="test" id="test7" value="7" aria-label="7">
</label>
</div>
</div>
</div>
</div>
You can overwrite the default bootstrap css:
.form-group .row [class*="col-"] {
float: left;
width: 8.33333333%;
}

Label for Inline Radio buttons bootstrap

I was gold-plating the signup page by adding labels above each field when suddenly:
It worked fine but not with radio buttons. I'm relying on Bootstrap 3 and I think this can be solved without extra CSS but just with right nesting of Bootstrap classes. Right?
<form class="form-horizontal">
<div class="form-group">
<div class="col-sm-3">
<label for="input-password">Password:</label>
<input name="password" type="password" class="form-control" id="input-password" placeholder="Password" required="required" />
</div>
<div class="col-sm-3">
<label for="input-confirm-password">Confirm Password:</label>
<input name="confirm_password" id="input-confirm-password" type="password" class="form-control" placeholder="Confirm Password" required="required" />
</div>
</div>
<div class="form-group">
<div class="col-sm-6">
<label for="input-address">Address:</label>
<input name="address" id="input-address" type="text" class="form-control" placeholder="Address" />
</div>
</div>
<label class="row">Gender:</label>
<div class="form-group">
<div class="col-sm-3">
<label class="radio-inline">
<input name="gender" id="input-gender-male" value="Male" type="radio" />Male
</label>
</div>
<div class="col-sm-3">
<label class="radio-inline">
<input name="gender" id="input-gender-female" value="Female" type="radio" />Female
</label>
</div>
</div>
<div class="form-group">
<label>Account Type:</label>
<div class="col-sm-3">
<label class="radio-inline">
<input name="account_type" id="input-type-student" value="Student" type="radio" />Student
</label>
</div>
<div class="col-sm-3">
<label class="radio-inline">
<input name="account_type" id="input-type-tutor" value="Tutor" type="radio" />Tutor
</label>
</div>
</div>
</form>
I tried 2 different placement of the elements to resolve this issue as you can see but it didn't work.
I even tried putting a div around each set of the radio buttons and then gave a label for it but that didn't work either.
You can do it this way:
<div class="form-group">
<div class="col-sm-6">
<label for="input-type">Account Type *:</label>
<div id="input-type" class="row">
<div class="col-sm-6">
<label class="radio-inline">
<input name="account_type" id="input-type-student" value="Student" type="radio" />Student
</label>
</div>
<div class="col-sm-6">
<label class="radio-inline">
<input name="account_type" id="input-type-tutor" value="Tutor" type="radio" />Tutor
</label>
</div>
</div
</div>
</div>
Do the same for the other radio buttons group.
Explanation: The col-sm-6 of the outer div is now 100% and can be divided 50:50 by col-sm-6 and col-sm-6

Checkbox and radiobutton in same row with Twitter Bootstrap

Its my beginning with Twitter Bootstrap so that question might be quite silly, but I've no idea how to solve that issue. I want to put checkbox and radiobutton in same row (should be displayed vertically aligned) but checkboxes and radiobuttons should be grouped in two separated fieldsets. I've got something like that: html snippet
but checkboxes are displayed higher than radiobuttons and putting them in the same div doesn't change anything.
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-2">
<fieldset>
<legend>
<h6>RB:</h6>
</legend>
<div class="row">
<div class="radio">
<label>
<input type="radio" name="optradio">Option 1</label>
</div>
</div>
<div class="row">
<div class="radio">
<label>
<input type="radio" name="optradio">Option 1</label>
</div>
</div>
</fieldset>
</div>
<div class="col-md-1">
<fieldset>
<legend>
<h6>CB:</h6>
</legend>
<div class="row">
<input type="checkbox" value="">
</div>
<div class="row">
<input type="checkbox" value="">
</div>
</fieldset>
</div>
</div>
</div>
This is how I did it:
<div class="container">
<div class="row">
<div class="col-xs-6">
<fieldset>
<legend>
<h3>RB:</h3>
</legend>
<div class="radio">
<label>
<input type="radio" name="optradio">Option 1</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optradio">Option 2</label>
</div>
</fieldset>
</div>
<div class="col-xs-6">
<fieldset>
<legend>
<h3>CB:</h3>
</legend>
<div class="checkbox">
<label>
<input type="checkbox" value="">Option 1</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="">Option 2</label>
</div>
</fieldset>
</div>
</div>
</div>
Have a look at the JSFiddle demo
You could use the inline form class here
or you could wrap your checkbox inputs with the checkbox class like this:
<div class="checkbox">
<input type="checkbox">
</div>

Radio Button checks all buttons issue angularjs

I have this plunk file. In my code, I want to create 4 radio buttons but i dont know why all the radio buttons are checked when it is meant to be only one radio button checked.
http://plnkr.co/edit/IbtUGzuATbcSCmoDMH73
<div class="row">
<label class="col-sm-3">Choose Service Category:</label>
<div class="col-sm-9">
<div class="col-sm-3">
<input type="radio" ng-model="">
<label>Adhoc</label>
<br/>
<span>(One Time Service)</span>
</div>
<div class="col-sm-3">
<input type="radio" ng-model="">
<label>Semi-monthly</label>
<br/>
<span>(Every 2 Weeks)</span>
</div>
<div class="col-sm-3">
<input type="radio" ng-model="">
<label>Monthly</label>
<br/>
<span>(Once a Month)</span>
</div>
<div class="col-sm-3">
<input type="radio" ng-model="">
<label>Weekly</label>
<br/>
<span>(Once a Week)</span>
</div>
</div>
</div>
They lack a "name" attribute. To make radio buttons work together, they need to have the same "name" HTML attribute:
<div class="row">
<label class="col-sm-3">Choose Service Category:</label>
<div class="col-sm-9">
<div class="col-sm-3">
<input type="radio" name="radio-group" ng-model="">
<label>Adhoc</label>
<br/>
<span>(One Time Service)</span>
</div>
<div class="col-sm-3">
<input type="radio" name="radio-group" ng-model="">
<label>Semi-monthly</label>
<br/>
<span>(Every 2 Weeks)</span>
</div>
<div class="col-sm-3">
<input type="radio" name="radio-group" ng-model="">
<label>Monthly</label>
<br/>
<span>(Once a Month)</span>
</div>
<div class="col-sm-3">
<input type="radio" name="radio-group" ng-model="">
<label>Weekly</label>
<br/>
<span>(Once a Week)</span>
</div>
</div>
</div>

arrange fields of the form using bootstrap 3?

I am using Bootstrap3 in my project. I have enclosed my form in a jumbotron.
Here is how my form looks (not good looking as of now):
I tried to make it better. but it is getting worse. I want all the fields to be in one-line and
the submit button centered below them. I have no idea how to do it. I am very new using Bootstrap3.
Here is my html code:
<form action="" id="id-exampleForm" class="form-inline" method="post" >
<input type='hidden' name='csrfmiddlewaretoken' value='1bfhNFINdeJVpSNBBQd0X7zLWLVwm1bB' />
<div id="div_id_price_order" class="form-group">
<label for="id_price_order_0" class="control-label col-lg-2 requiredField">
price order
<span class="asteriskField">*</span>
</label>
<div class="controls col-lg-12">
<label class="radio">
<input type="radio" checked="checked" name="price_order" id="id_price_order_1" value="lowest_price" >lowest</label>
<label class="radio">
<input type="radio" name="price_order" id="id_price_order_2" value="highest_price" >highest</label>
</div>
</div>
<div class="form-group">
<div id="div_id_newest_entry" class="checkbox">
<div class="controls col-lg-offset-2 col-lg-12">
<label for="id_newest_entry" class=" requiredField">
<input class="checkboxinput checkbox" id="id_newest_entry" name="newest_entry" type="checkbox" />
latest date
</label>
</div>
</div>
</div>
<div class="form-group">
<div id="div_id_latest_year" class="checkbox">
<div class="controls col-lg-offset-2 col-lg-12">
<label for="id_latest_year" class=" requiredField">
<input class="checkboxinput checkbox" id="id_latest_year" name="latest_year" type="checkbox" />
latest year
</label>
</div>
</div>
</div>
<input type="submit" name="submit" value="Submit" class="btn btn-primary button white" id="submit-id-submit" />
</form>
EDIT:
I want something like this: I have edited this on powerpoint. so it does not look very good.
EDIT AFTER COMMENT
Please see the fiddle for an inline form in a Jumbotron with the button in-line (not below centered), and fieldset.
Note : that I changed the vertical alignment of the checkbox and radio + add some right margin, and an extra small button. The form will go as block if the screen is extra-small as a bootstrap behavior.
JsFiddle
<div class="jumbotron">
<form class="form-inline">
<fieldset class="radiogroup">
<legend>Sorting Criteria</legend>
<label for="id_price_order_0">
price order
<span class="asteriskField">*</span>
</label>
<label class="radio" for="id_price_order_1">
lowest
<input type="radio" checked="checked" id="id_price_order_1" />
</label>
<label class="radio" for="id_price_order_2">
highest
<input type="radio" id="id_price_order_2" />
</label>
<label for="id_newest_entry" class="requiredField checkbox">
latest date
<input id="id_newest_entry" type="checkbox" />
</label>
<label for="id_latest_year" class="requiredField checkbox">
latest year
<input id="id_latest_year" type="checkbox" />
</label>
<input type="submit" name="submit" value="Submit" class="btn btn-primary btn-xs" />
</fieldset>
</form>
Add the class form-control to ALL of your input elements for a start:
<input type="radio" class='form-control' checked="checked" name="price_order" id="id_price_order_1" value="lowest_price" >
Also, what I do to make my life easier is to pre-wrap the elements in the correct sized divs instead of doing it in the labels and inputs like so:
<div class='row'>
<form ... >
<div class='col-lg-2>
<label ... ></label>
<input ... >
</div>
<div class='col-lg-2'>
...
</div>
...
</form>
</div>
Its a tiny bit slower to load but it makes the code so much more readable I think it is worth it. Also I feel that there is a lot of extra in your code that shouldn't be there and is confusing check out the code here: http://getbootstrap.com/css/#forms. They show you exactly how to format an in-line form.
Could being inside a .jumbotron be causing the issues? Why don't you try a panel or a well This should work for you:
<div class='panel panel-default'>
<div class="panel-heading">In-line Form</div>
<div class="panel-body">
<form action='anotherScript.php' method='post' class='form-inline'>
<div class='row'>
<div class='col-md-4'>
<strong>Price:</strong>
<div class="radio-inline">
<label>
<input type="radio" name="rad1" value="low" checked>
Lowest
</label>
</div>
<div class="radio-inline">
<label>
<input type="radio" name="rad1" value="high">
Highest
</label>
</div>
</div>
<div class='col-md-4'>
<div class="checkbox-inline">
<label>
<input type="checkbox" name='date' value='date'>
Latest Date
</label>
</div>
</div>
<div class='col-md-4'>
<div class="checkbox-inline">
<label>
<input type="checkbox" name='year' value='year'>
Latest Year
</label>
</div>
</div>
</div>
<div class='row'>
<div class='col-md-12'>
<center><button type='submit' class='btn btn-primary'>Submit</button></center></form>
</div>
</div>
</div>
Fiddle: http://jsfiddle.net/52VtD/5046/
Make sure you stretch the results panel to full width to see the form in-line.