I know this should be simple, but the solution eludes me. My test-site illustrates my frustration.
<div class="form-group row">
<label for="choose-type" class="col-sm-2 form-control-label label-inline">Account Type</label>
<div id="choose-type" class="col-sm-10 div-inline">
<label class="radio-inline">
<input type="radio" class="radio-inline" name="user-type" id="writer" value="1" required > Writer
</label>
<label class="radio-inline">
<input type="radio" class="radio-inline" name="user-type" id="enabler" value="2" required> Enabler
</label>
</div>
</div>
Please try this. You have padding in the divs which is throwing your bootstrap layout off (col-sm-10 and col-sm-2 don't have enough space). I have changed col-sm-10 to col-sm-8 to accommodate.
<div class="form-group row">
<label for="choose-type" class="col-sm-2 form-control-label label-inline">Account Type</label>
<div id="choose-type" class="col-sm-8 div-inline">
<label class="radio-inline">
<input type="radio" class="radio-inline" name="user-type" id="writer" value="1" required=""> Writer
</label>
<label class="radio-inline">
<input type="radio" class="radio-inline" name="user-type" id="enabler" value="2" required=""> Enabler
</label>
</div>
</div>
I'm guessing you're talking about the height difference between the text and the radio-button.
Remove the second radio-inline from the <input> elements, the radio-inline from the <label> is sufficient.
<div class="form-group row">
<label for="choose-type" class="col-sm-2 form-control-label label-inline">Account Type</label>
<div id="choose-type" class="col-sm-10 div-inline">
<label class="radio-inline">
<input type="radio" class="" name="user-type" id="writer" value="1" required > Writer
</label>
<label class="radio-inline">
<input type="radio" class="" name="user-type" id="enabler" value="2" required> Enabler
</label>
</div>
</div>
Related
I have long web form to collect data, I am sharing example but actual form may be even long.
I need to know how can i print the form data in the similar format as user sees it, Simply as if user filled the PDF form and Printed it same so that printed version look as he sees it.
Code pen link https://codepen.io/anon/pen/ewYrwv
I am not sure how to make it work with A4 Page as if data was being printed from PDF form. It doesnt need to be responsive as form will be printed from desktop only..
I put container with at 800 pixel and it still prints out side of page margin.
I tried to play around with CSS http://www.tutorialspoint.com/css/css_paged_media.htm
but this doesnt make help much
.container{max-width:800px;}
#page {
size: 8.5in 11in; /* width height */
margin: 2cm; /* All margins set to 2cm */
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<form>
<div class="form-row">
<h1 class="text-center">Form</h1>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputEmail4">First Name</label>
<input type="email" class="form-control" id="inputEmail4" placeholder="First Name">
</div>
<div class="form-group col-md-6">
<label for="inputPassword4">Last Name</label>
<input type="password" class="form-control" id="inputPassword4" placeholder="Last Name">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputEmail4">Email</label>
<input type="email" class="form-control" id="inputEmail4" placeholder="Email">
</div>
<div class="form-group col-md-6">
<label for="inputPassword4">Password</label>
<input type="password" class="form-control" id="inputPassword4" placeholder="Password">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputEmail4">Mobile</label>
<input type="email" class="form-control" id="inputEmail4" placeholder="Mobile">
</div>
<div class="form-group col-md-6">
<label for="inputPassword4">Landline</label>
<input type="password" class="form-control" id="inputPassword4" placeholder="Landline">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputEmail4">Start Date</label>
<input type="email" class="form-control" id="inputEmail4" placeholder="Start Date">
</div>
<div class="form-group col-md-6">
<label for="inputPassword4">End Date</label>
<input type="password" class="form-control" id="inputPassword4" placeholder="End Date">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputPassword4">Time</label>
<input type="password" class="form-control" id="inputPassword4" placeholder="Time">
</div>
<div class="form-group col-md-6">
<label for="inputPassword4">Venue</label>
<select id="inputState" class="form-control">
<option selected>Choose...</option>
<option>...</option>
</select>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputPassword4">Trainer</label>
<select id="inputState" class="form-control">
<option selected>Choose...</option>
<option>...</option>
</select>
</div>
<div class="form-group col-md-6">
<label for="inputPassword4">Court</label>
<select id="inputState" class="form-control">
<option selected>Choose...</option>
<option>...</option>
</select>
</div>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="gridCheck">
<label class="form-check-label" for="gridCheck">
Recurring
</label>
</div>
</div>
<div class="form-group">
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="1" disabled>
<label class="form-check-label" for="inlineCheckbox1">Sun</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="2" disabled>
<label class="form-check-label" for="inlineCheckbox2">Mon</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="3" disabled>
<label class="form-check-label" for="inlineCheckbox3">Tue</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="4" disabled>
<label class="form-check-label" for="inlineCheckbox3">Wed</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="5" disabled>
<label class="form-check-label" for="inlineCheckbox3">Thu</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="6" disabled>
<label class="form-check-label" for="inlineCheckbox3">Fri</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="7" disabled>
<label class="form-check-label" for="inlineCheckbox3">Sat</label>
</div>
</div>
<div class="form-group">
<label for="inputAddress">Address</label>
<input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
</div>
<div class="form-group">
<label for="inputAddress2">Address 2</label>
<input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputCity">City</label>
<input type="text" class="form-control" id="inputCity">
</div>
<div class="form-group col-md-4">
<label for="inputState">State</label>
<select id="inputState" class="form-control">
<option selected>Choose...</option>
<option>...</option>
</select>
</div>
<div class="form-group col-md-2">
<label for="inputZip">Zip</label>
<input type="text" class="form-control" id="inputZip">
</div>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="gridCheck">
<label class="form-check-label" for="gridCheck">
Check me out
</label>
</div>
</div>
<button type="submit" class="btn btn-primary">Save</button> <button type="submit" class="btn btn-primary">PRINT</button>
</form>
</div>
I'm trying to make a bootstrap form page but I suck at frontend.
My question is really simple: how can I space those checkboxes?
<div class="form-group">
<label for="">Repetir?</label>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="segunda">
<label class="form-check-label">Segunda</label>
<input type="checkbox" class="form-check-input" id="segunda">
<label class="form-check-label">Terça</label>
<input type="checkbox" class="form-check-input" id="segunda">
<label class="form-check-label">Quarta</label>
<input type="checkbox" class="form-check-input" id="segunda">
<label class="form-check-label">Quinta</label>
<input type="checkbox" class="form-check-input" id="segunda">
<label class="form-check-label">Sexta</label>
<input type="checkbox" class="form-check-input" id="segunda">
<label class="form-check-label">Sábado</label>
<input type="checkbox" class="form-check-input" id="segunda">
<label class="form-check-label">Domingo</label>
</div>
</div>
Here is an image of the result:
They are very close together. thank you
You can use margin left (ml-x), margin right (mr-x) or padding left (pl-x), padding right (pr-x) classes of bootstrap-4 or alpha. Where x is any number (1, 2, 3 etc).
e.g. pl-1, or pr-2
Refer here
With bootstrap-3, you can write your own simple class:
.ml-1 {
margin-left: 4px !important;
}
In case you'd like a custom layout, using grid system should be an option.
Just use .form-row as a replacement of .form-check and wrap your checkboxes into the .
<div class="form-group container">
<div class="form-row">
<div class="col-3">
<input type="checkbox" class="form-check-input" id="segunda1">
<label class="form-check-label">Segunda</label>
</div>
<div class="col-3">
<input type="checkbox" class="form-check-input" id="segunda2">
<label class="form-check-label">Terça</label>
</div>
<div class="col-3">
<input type="checkbox" class="form-check-input" id="segunda3">
<label class="form-check-label">Quarta</label>
</div>
<div class="col-3">
<input type="checkbox" class="form-check-input" id="segunda4">
<label class="-form-check-label">Quinta</label>
</div>
<div class="col-3">
<input type="checkbox" class="form-check-input" id="segunda5">
<label class="form-check-label" style="border:1px">Sexta</label>
</div>
<div class="col-3">
<input type="checkbox" class="form-check-input" id="segunda6">
<label class="form-check-label">Sábado</label>
</div>
<div class="col-3">
<input type="checkbox" class="form-check-input" id="segunda7">
<label class="form-check-label">Domingo</label>
</div>
</div>
</div>
Here's a fiddle: https://jsfiddle.net/5wgyjd9n/
you can simply add a m tag and add it in your code after every input type checkbox tag
.css:
m { margin:20px }
and your rest of the code goes like this:
.html:
<div class="form-group container">
<label for="">Repetir?</label>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="segunda">
<label class="form-check-label">Segunda</label>
<m></m>
<input type="checkbox" class="form-check-input" id="segunda">
<label class="form-check-label">Terça</label>
<m></m>
<input type="checkbox" class="form-check-input" id="segunda">
<label class="form-check-label">Quarta</label>
<m></m>
<input type="checkbox" class="form-check-input" id="segunda">
<label class="form-check-label">Quinta</label>
<m></m>
<input type="checkbox" class="form-check-input" id="segunda">
<label class="form-check-label">Sexta</label>
<m></m>
<input type="checkbox" class="form-check-input" id="segunda">
<label class="form-check-label">Sábado</label>
<m></m>
<input type="checkbox" class="form-check-input" id="segunda">
<label class="form-check-label">Domingo</label>
<m></m>
</div>
</div>
hope this answers your question.
It seems you are trying to keep them horizontally. You can simply add a right margin to .form-check-label like bellow:
.form-group .form-check .form-check-label{
margin-right: 25px;
}
.form-group .form-check .form-check-label:last-child{
margin-right: 0;
}
Here is the codepen
currently i have 3 radio buttons that i am trying to place next to my 2 input fields using bootstrap. i want to place them in the same row as my input fields, however it keeps getting aligned with the labels of those input fields.
Anyone have an idea on how i can bump down the alignment?
my html:
<div class="container">
<div class="row">
<div class="form-group col-xs-5">
<label for="costDescription">Description</label>
<input class="form-control input-group-lg" type="text" name="costDescription" ng-model="attendees.formData.scenarios[0].scenarioItems[0].costDescription"/>
</div>
<div class="form-group col-xs-2">
<label for="cost">Amount</label>
<input class="form-control input-group-lg" type="number" name="cost" ng-model="attendees.formData.scenarios[0].scenarioItems[0].cost"/>
</div>
<label class="radio-inline"><input type="radio" name="optradio">Option 1 </label>
<label class="radio-inline"><input type="radio" name="optradio">Option 2 </label>
<label class="radio-inline"><input type="radio" name="optradio">Option 3 </label>
</div>
here is my plunkr:
https://embed.plnkr.co/YIFin0fUchhSyZHiWUO6/
Why not change the code where the radio buttons are as follows:
<div class="form-group col-xs-5" style="margin-top:40px">
<label class="radio-inline"><input type="radio" name="optradio">Option 1 </label>
<label class="radio-inline"><input type="radio" name="optradio">Option 2 </label>
<label class="radio-inline"><input type="radio" name="optradio">Option 3 </label>
</div>
Add it to a column and then add a margin-top css style to it
No extra classes. Just some HTML change. Use another column for the radio buttons:
<div class="container">
<div class="row">
<div class="col-sm-5">
<label for="costDescription">Description</label>
<input class="form-control input-group-lg" type="text" name="costDescription" ng-model="attendees.formData.scenarios[0].scenarioItems[0].costDescription"/>
Hello
</div>
<div class="col-sm-2">
<label for="cost">Amount</label>
<input class="form-control input-group-lg" type="number" name="cost" ng-model="attendees.formData.scenarios[0].scenarioItems[0].cost"/>
</div>
<div class="col-sm-5">
<label class="radio-inline"><input type="radio" name="optradio"> Option 1 </label><br />
<label class="radio-inline"><input type="radio" name="optradio"> Option 2 </label><br />
<label class="radio-inline"><input type="radio" name="optradio"> Option 3 </label>
</div>
</div>
</div>
Preview
Removing the <br /> will give you this:
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
When you read this... I probably still haven't solved my issue,
I'm trying to align the label and radiobutton, I have tried alot of "Solutions", but nothing works. I have no css on the radio buttons that i created myself.
Output: http://prntscr.com/5am898
My Code:
<div class="row">
<div class="col-md-12">
<div class="btnRadio">
<label class="radio-inline" for="gal2015lbl">
<input name="galTab" id="gal2015" value="2015" type="radio">2015
</label>
<label class="radio-inline" for="gal2014lbl">
<input name="galTab" id="gal2014" value="2014" type="radio">2014
</label>
<label class="radio-inline" for="gal2013lbl">
<input name="galTab" id="gal2013" value="2013" type="radio">2013
</label>
<label class="radio-inline" for="gal2012lbl">
<input name="galTab" id="gal2012" value="2012" type="radio">2012
</label>
<label class="radio-inline" for="galOtherlbl">
<input name="galTab" id="galOther" value="Anders" type="radio">And
</label>
</div>
</div>
</div>
Try placing the input outside the label.
<label class="radio-inline" for="galOtherlbl">
And
</label>
<input name="galTab" id="galOther" value="Anders" type="radio">
put the label in label tag like
<label class="radio inline control-label">Some label</label>
try
FIDDLE DEMO
<div class="row">
<div class="col-md-12">
<div class="btnRadio">
<input name="galTab" id="gal2015" value="2015" type="radio">
<label class="radio-inline" for="gal2015lbl">2015</label>
<input name="galTab" id="gal2014" value="2014" type="radio">
<label class="radio-inline" for="gal2014lbl">2014</label>
<input name="galTab" id="gal2013" value="2013" type="radio">
<label class="radio-inline" for="gal2013lbl">2013</label>
<input name="galTab" id="gal2012" value="2012" type="radio" />
<label class="radio-inline" for="gal2012lbl">2012</label>
<input name="galTab" id="galOther" value="Anders" type="radio"/>
<label class="radio-inline" for="galOtherlbl">And</label>
</div>
</div>
</div>