I have made 2 questions in a form using Bootstrap. The first question has 4 options and the second question has 4 options. When I check one of the options from the first question and then if I check one of the options from the second question then the radio button checked in the first question becomes unchecked. Why are the checkboxes dependent on two different questions?
index.html:
<form>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<h3>[Test]Contact us Survey Form</h3>
</div>
</div>
<div id="agegroup">
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<h4>What is your age group?</h4>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="radio">
<label><input type="radio" name="optradio"/> >=25 yrs</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="radio">
<label><input type="radio" name="optradio"/> 26-35 yrs</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="radio">
<label><input type="radio" name="optradio"/> 36-50 yrs</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="radio">
<label><input type="radio" name="optradio"/> >50 yrs</label>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<h4>What is your gender?</h4>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="radio">
<label><input type="radio" name="optradio"/> Female</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="radio">
<label><input type="radio" name="optradio"/> Male</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="radio">
<label><input type="radio" name="optradio"/> Prefer not to say</label>
</div>
</div>
</div>
</form>
Screenshot:
You need to give each group a different name.
So, if you use name="optradio" for the first group, give the second group something like name="optradio2".
Related
I am using bootstrap 4 for styling purposes, for that reason. I am stuck in an alignment problem, that is I want my buttons to be parallel to the date and time fields above them.
The Blue cross in the image shows that my buttons are currently starting from there, which I don't want.
The Redline indicates that from here my buttons and all fields should start, I have tried out many combinations of offsets and flexbox from bootstrap griding, but I am unable to resolve this problem.
Attached is the code:
<form>
<div class="form-group row">
<label for="Number of Guests" class="col-md-2 col-form-label">Number of Guests</label>
<div class="col-md-10">
<div class="row">
<!-- Material inline 1 -->
<div class="form-check form-check-inline">
<input type="radio" class="form-check-input" id="materialInline1" name="inlineMaterialRadiosExample">
<label class="form-check-label" for="materialInline1">1</label>
</div>
<!-- Material inline 2 -->
<div class="form-check form-check-inline">
<input type="radio" class="form-check-input" id="materialInline2" name="inlineMaterialRadiosExample">
<label class="form-check-label" for="materialInline2">2</label>
</div>
<!-- Material inline 3 -->
<div class="form-check form-check-inline">
<input type="radio" class="form-check-input" id="materialInline3" name="inlineMaterialRadiosExample">
<label class="form-check-label" for="materialInline3">3</label>
</div>
<!-- Material inline 4 -->
<div class="form-check form-check-inline">
<input type="radio" class="form-check-input" id="materialInline1" name="inlineMaterialRadiosExample">
<label class="form-check-label" for="materialInline1">4</label>
</div>
<!-- Material inline 5 -->
<div class="form-check form-check-inline">
<input type="radio" class="form-check-input" id="materialInline2" name="inlineMaterialRadiosExample">
<label class="form-check-label" for="materialInline2">5</label>
</div>
<!-- Material inline 6 -->
<div class="form-check form-check-inline">
<input type="radio" class="form-check-input" id="materialInline3" name="inlineMaterialRadiosExample">
<label class="form-check-label" for="materialInline3">6</label>
</div>
</div>
</div>
</div>
<div class="row col-md-10">
<label for="section" class="col-12 col-md-2 col-form-label">Section</label>
<div class="form-group row ">
<div class="form-group row">
<div class="offset-md-2 col-md-10">
<button type="submit" class="btn btn-secondary">Cancel</button>
</div>
</div>
<div class="form-group row">
<div class="offset-md-2 col-md-10">
<button type="submit" class="btn btn-primary">Reserve</button>
</div>
</div>
</div>
</div>
<div class="row col-md-10">
<label for="dateandtime" class="col-12 col-md-2 col-form-label">Date and Time</label>
<div class="col-6 col-md-3">
<input type="date" class="form-control" id="date" placeholder="Date">
</div>
<div class="col-6 col-md-3">
<input type="time" class="form-control" id="time" placeholder="Time">
</div>
</div>
<div class="row col-md-10">
<div class="form-group row">
<div class="offset-md-1 col-md-10">
<button type="submit" class="btn btn-secondary">Cancel</button>
</div>
</div>
<div class="form-group row">
<div class="offset-md-1 col-md-12">
<button type="submit" class="btn btn-primary">Reserve</button>
</div>
</div>
</div>
</form>
I can only suggest you read this page.
https://getbootstrap.com/docs/4.0/layout/grid/
Bootstrap uses a grid system with 12 columns per row. I can see you are using different classes together which are not meant to be mixed.
For starters, your buttons are mixed with cols and rows. This is not how it is meant to be used.
<div class="row col-md-10">
<div class="form-group row">
<div class="offset-md-1 col-md-10">
<button type="submit" class="btn btn-secondary">Cancel</button>
</div>
</div>
<div class="form-group row">
<div class="offset-md-1 col-md-12">
<button type="submit" class="btn btn-primary">Reserve</button>
</div>
</div>
</div>
I suggest you start with the simpler solution as provided in the link.
A row with 2 columns. See where that gets you.
<div class="row">
<div class="col-sm">
<button type="submit" class="btn btn-secondary">Cancel</button>
</div>
<div class="col-sm">
<button type="submit" class="btn btn-primary">Reserve</button>
</div>
</div>
I believe you're looking for a result similar to this, not all the id's and classes may be the same but this snippet is more of an opportunity for you to learn rather than to copy. Please review my code and try to understand the differences between what you had and the example I've provided.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<form>
<div class="form-group">
<div class="row">
<div class="col-md-2">
<label>
Number of Guests
</label>
</div>
<div class="col-md-10">
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" id="materialInline1" />
<label class="form-check-label" for="materialInline1">1</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" id="materialInline1" />
<label class="form-check-label" for="materialInline1">2</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" id="materialInline1" />
<label class="form-check-label" for="materialInline1">3</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" id="materialInline1" />
<label class="form-check-label" for="materialInline1">4</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" id="materialInline1" />
<label class="form-check-label" for="materialInline1">5</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" id="materialInline1" />
<label class="form-check-label" for="materialInline1">6</label>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-2">
<label>
Section
</label>
</div>
<div class="col-md-10">
<button class="btn btn-secondary" type="submit">
Cancel
</button>
<button class="btn btn-primary" type="submit">
Reserve
</button>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-2">
<label>
Date & Time
</label>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-6">
<input id="date" class="form-control" type="date">
</div>
<div class="col-6">
<input id="time" class="form-control" type="time">
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<button class="btn btn-secondary" type="submit">
Cancel
</button>
<button class="btn btn-primary" type="submit">
Reserve
</button>
</div>
</div>
</form>
I hope this was helpful, best of luck!
So there's a few things as to why these elements aren't aligning properly:
You should never use .row & .col in the same class, instead you should lay them out like so:
<form>
<div class="row">
<div class="col-md-4">
I am a column on the left (4/12)
</div>
<div class="col-md-10">
I am a column on the right (10/12)
</div>
</div>
</form>
Secondly, I noticed in some places you have a row next to a column. This isn't very good practice. If you want subcolumns, this should be done like so:
<div class="row">
<div class="col-6">
<div class="row">
<div class="col-md-4">
I am inside of a larger column
</div>
<div class="col-md-10">
So am I!
</div>
</div>
</div>
</div>
It may help you to read up a bit more on the Bootstrap 4 grid documentation, which can be found here.
I hope this helps clear a few things up, let me know if you're still a bit stuck.
try this:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<form>
<div class="container-fluid">
<div class="row my-4">
<div class="col-md-2">
<label for="Number of Guests" class="col-form-label">Number of Guests</label>
</div>
<div class="col-md-10">
<div class="row">
<!-- Material inline 1 -->
<div class="form-check form-check-inline ml-3">
<div class="form-check-inline mr-4">
<label class="form-check-label" for="radio1">
<input type="radio" class="form-check-input" id="radio1" name="optradio" value="option1">1
</label>
</div>
<div class="form-check-inline mr-4">
<label class="form-check-label" for="radio2">
<input type="radio" class="form-check-input" id="radio2" name="optradio" value="option2">2
</label>
</div>
<div class="form-check-inline mr-4">
<label class="form-check-label" for="radio3">
<input type="radio" class="form-check-input" id="radio3" name="optradio" value="option2">3
</label>
</div>
<div class="form-check-inline mr-4">
<label class="form-check-label" for="radio4">
<input type="radio" class="form-check-input" id="radio4" name="optradio" value="option1" >4
</label>
</div>
<div class="form-check-inline mr-4">
<label class="form-check-label" for="radio5">
<input type="radio" class="form-check-input" id="radio5" name="optradio" value="option2">5
</label>
</div>
<div class="form-check-inline mr-4">
<label class="form-check-label" for="radio5">
<input type="radio" class="form-check-input" id="radio5" name="optradio" value="option2">6
</label>
</div>
</div>
</div>
</div>
</div>
<div class="row my-4">
<div class="col-md-2">
<label for="section" class="col-form-label">Section</label>
</div>
<div class="col-md-10">
<div class="form-group ">
<button type="submit" class="btn btn-secondary">Cancel</button>
<button type="submit" class="btn btn-primary">Reserve</button>
</div>
</div>
</div>
<div class="row my-4">
<div class="col-md-2">
<label for="dateandtime" class="col-form-label">Date and Time</label>
</div>
<div class="col-md-10">
<div class="form-group d-flex">
<input type="date" class="form-control col-md-3" id="date" placeholder="Date">
<input type="time" class="form-control col-md-2 ml-3" id="time" placeholder="Time">
</div>
</div>
</div>
<div class="row my-4">
<div class="offset-md-2 col-md-10">
<button type="submit" class="btn btn-secondary">Cancel</button>
<button type="submit" class="btn btn-primary">Reserve</button>
</div>
</div>
</div>
</form>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
I'm trying to make a checklist in a more time saving way.
I have to do this thing underneath for every page like 17 times.
So to save some time I was hoping for Emmet to be te solution.
Important to say, I want to select the three names and do everything at once. I work with Coda 2.
What's the abbreviation to produce the following code after selecting the lines below:
Video
DVD
CD
To produce:
<div class="form-group">
<div class="col-sm-12">
<div class="checkbox">
<label>
<input type="checkbox" name="item1" value="Done" /> Video
</label>
</div>
</div>
</div> <!-- form-group -->
<div class="form-group">
<div class="col-sm-12">
<div class="checkbox">
<label>
<input type="checkbox" name="item2" value="Done" /> DVD
</label>
</div>
</div>
</div> <!-- form-group -->
<div class="form-group">
<div class="col-sm-12">
<div class="checkbox">
<label>
<input type="checkbox" name="item3" value="Done" /> CD
</label>
</div>
</div>
</div> <!-- form-group -->
And why doesn't this work: (div[class=form-group]>.[class=col-sm-12]>.[class=checkbox]>label[for=list$]>input[type=checkbox name=item$ value=Gedaan id=list$])*
When I try this I get:
<div class="form-group">
<div class="col-sm-12">
<div class="checkbox"><label for=""><input type="checkbox" name="item1" value="done"></label></div>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<div class="checkbox"><label for=""><input type="checkbox" name="item2" value="done"></label></div>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<div class="checkbox"><label for=""><input type="checkbox" name="item3" value="done">Video
DVD
CD</label></div>
</div>
</div>
Okay I came A little bit further.
Now it works with multiple lines.
But de Video, CD, DVD stay with the last form-group.
I used this one again:
(div[class=form-group]>.[class=col-sm-12]>.[class=checkbox]>label[for=list$]>input[type=checkbox name=item$ value=Gedaan id=list$])*
My result:
<div class="form-group">
<div class="col-sm-12">
<div class="checkbox">
<label for="list1">
<input type="checkbox" name="item1" value="Gedaan" id="list1"/>
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<div class="checkbox">
<label for="list2">
<input type="checkbox" name="item2" value="Gedaan" id="list2"/>
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<div class="checkbox">
<label for="list3">
<input type="checkbox" name="item3" value="Gedaan" id="list3"/>Video
DVD
CD
</label>
</div>
</div>
</div>
This worked for me:
(.form-group>.col-sm-12>.checkbox>label>input[type=checkbox][name="item$"][value="done"])*
And the generated HTML:
<div class="form-group">
<div class="col-sm-12">
<div class="checkbox">
<label for="">
<input type="checkbox" name="item1" value="done">Video
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<div class="checkbox">
<label for="">
<input type="checkbox" name="item2" value="done">CD
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<div class="checkbox">
<label for="">
<input type="checkbox" name="item3" value="done">DVD
</label>
</div>
</div>
</div>
I tried yours and it works too, except for the part value=Gedaan:
Found the answer:
(div[class=form-group]>.[class=col-sm-12]>.[class=checkbox]>label[for=list$]>input[type=checkbox name=item$ value=Gedaan id=list$]){}*
{} lets the txt go on the back
I have got this page but for some reason, I see a line in my page.
Here is the code
<div class="tab-pane" id="advanced" ng-hide="sync model">
<div class="col-md-2">
<div class="form-group">
<div class="col-md-12">
<div class="" *ngFor="let options of syncOptionsList">
<div class="col-md-12">
<div class="checkbox abc-checkbox abc-checkbox-info">
<input type="checkbox" name="{{options.value}}" formControlName="{{options.value}}" [value]="options.value" (change)="options.value == 'inplace' ? inplaceCheckBoxHandler($event) : ''"
/>
<label>{{ options.title }}</label>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-5">
<p>Include/Exclude Options</p>
<div class="form-group">
<label class="col-md-4 text-right" for="datacopy_file_in">Datacopy File In</label>
<div class="col-md-6">
<input class="form-control" formControlName="datacopy_file_in" placeholder="" type="text">
</div>
</div>
<div class="form-group">
<label class="col-md-4 text-right" for="sync_exclude_file">Sync Exclude File</label>
<div class="col-md-6">
<input class="form-control" formControlName="sync_exclude_file" placeholder="" type="text">
</div>
</div>
</div>
</div>
What can I do to make the line go away? I am taking the options using ngfor I used legend and fieldset but its of no avail.
I am trying to get my check boxes and labels to align correctly when I use the Bootstrap grid. It seems to be perfectly fine until I had a label after my check boxes.
Here is what it looks like in Firefox:
This is my code:
<div id="view2">
<div class="container-fluid center">
<div class="row">
<div class="col-xs-3">
<label for="daysAvailable">Days Available</label>
</div>
<div class="col-xs-3">
<label for="employmentDesired">Employment Desired</label>
</div>
<div class="col-xs-3">
<label for="hoursWeekly">Hours Available Per Week</label>
</div>
</div>
<div class="row">
<div class="col-xs-1">
<input type="checkbox" id="allDays" />
<label for="allDays">All</label>
</div>
<div class="col-xs-1">
<input type="checkbox" id="monday" />
<label for="monday">Mon</label>
</div>
<div class="col-xs-1">
<input type="checkbox" id="tuesday" />
<label for="tuesday">Tue</label>
</div>
<div class="col-xs-3">
<input type="checkbox" id="fullTime" />
<label for="fullTime">FullTime</label>
</div>
<div class="col-xs-3">
<input type="text" id="hoursPerWeek" />
</div>
</div>
<div class="row">
<div class="col-xs-1">
<input type="checkbox" id="wednesday"/>
<label for="wednesday">Wed</label>
</div>
<div class="col-xs-1">
<input type="checkbox" id="thursday"/>
<label for="thursday">Thu</label>
</div>
<div class="col-xs-1">
<input type="checkbox" id="friday"/>
<label for="friday">Fri</label>
</div>
<div class="col-xs-3">
<input type="checkbox" id="partTime" />
<label for="partTime">PartTime</label>
</div>
</div>
<div class="row">
<div class="col-xs-1">
<input type="checkbox" id="saturday"/>
<label for="saturday">Sat</label>
</div>
<div class="col-xs-1">
<input type="checkbox" id="sunday"/>
<label for="sunday">Sun</label>
</div>
</div>
<br/>
<div class="row">
<div class="col-xs-3">
<label for="workNight">Can You Work Nights</label>
</div>
<div class="col-xs-3">
<label for="beenFired">Have You Been Fired Before</label>
</div>
<div class="col-xs-3">
<label for="dateAvailable">Date Available</label>
</div>
</div>
<div class="row">
<div class="col-xs-3">
<input type="checkbox" id="workNightYes" />
<label for="workNightYes">Yes</label>
</div>
<div class="col-xs-3">
<input type="checkbox" id="yesFired"/>
<label for="yesFired">Yes</label>
</div>
<div class="col-xs-3">
<input type="text" id="datepicker" />
</div>
</div>
<div class="row">
<div class="col-xs-3">
<input type="checkbox" id="workNightNo" />
<label for="workNightNo">No</label>
</div>
<div class="col-xs-3">
<input type="checkbox" id="noFired" />
<label for="noFired">No</label>
</div>
</div>
</div>
</div>
use the bootstrap checkbox class
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
Labels are not in aligned with the fields.I want to make sure that labels be wrapped elegantly if exceeds the column width. Here is complete jsfiddle
HTML
<div class="row row-padded">
<strong>Question: </strong><p>Are you 18 years old?</p>
<strong>Answer:</strong>
<div class="radio-inline">
<label><input type="radio" name="optionsRadios" id="optionsRadios1" value="option1">Yes</label>
</div>
<div class="radio-inline">
<label><input type="radio" name="optionsRadios1" id="optionsRadios2" value="option1">No</label>
</div>
<div class="row">
<div class="col-md-8 childFields">
<p class="">Give full details here: </p>
<div class="row">
<div class="col-md-6 colChildFields">
<label>Nature of Condition</label>
<input type="text" name="city"/>
</div>
<div class="col-md-6 colChildFields">
<label>Dates and Duration</label>
<input type="text" name="city"/>
</div>
<div class="col-md-6 colChildFields">
<label>Name Of Doctor</label>
<input type="text" name="city"/>
</div>
<div class="col-md-6 colChildFields">
<label>Name of Hospital</label>
<input type="text" name="city"/>
</div>
<div class="col-md-6 colChildFields">
<label>Address of Hospital</label>
<input type="text" name="city"/>
</div>
</div>
</div>
</div>
</div>
I'm not sure I understood you right, but if that's what you're looking for, you should just add this to the CSS:
.col-md-6 label {
width: 150px;
}
If you want to do an horizontal form, you'll have to use a container div with class form-group and add a class control-label to the label, form-control to the input, with a structure like this :
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputEmail1" class="col-lg-2 control-label">Email</label>
<div class="col-lg-10">
<input type="email" class="form-control" id="inputEmail1" placeholder="Email">
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-2 col-lg-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
Replace (in classes) -lg- by -xs- and it will be responsive and self managed if the label is longer.
See example with my jsFiddle