I'm using TwitterBootstrapMVC. To generate checkbox from enum, I'm using the below code
#form.FormGroup().CustomControls(Html.Bootstrap().CheckBoxesFromEnum($"{nameof(CSViewModel.Option)}"))
.CustomLabel("Options")
It gets rendered in HTML like this
<div class=" form-group">
<label class="control-label col-sm-1 col-md-1" for="">Options<span class="required" style="visibility:hidden;" wfd-invisible="true">*</span> </label>
<div class="col-xs-11 col-sm-11 col-md-11">
<div class="input-list-container">
<div class="checkbox">
<label for="Option_0">
<input id="Option_0" name="Option" type="checkbox" value="UpdateAsOfDate">UpdateAsOfDate<span class="required" style="visibility:hidden;">*</span>
</label>
</div>
</div>
</div>
</div>
Problem is, when I click on the checkbox, it won't show the checkmark. The label for is not getting linked with the checkbox input.
I tried editing the HTML in the browser by placing the "label for" after the input checkbox, and it works.
<div class=" form-group">
<label class="control-label col-sm-1 col-md-1" for="">Options<span class="required" style="visibility:hidden;" wfd-invisible="true">*</span> </label>
<div class="col-xs-11 col-sm-11 col-md-11">
<div class="input-list-container">
<div class="checkbox">
<input id="Option_0" name="Option" type="checkbox" value="UpdateAsOfDate">
<label for="Option_0">
UpdateAsOfDate
<span class="required" style="visibility:hidden;">*</span>
</label>
</div>
</div>
</div>
</div>
How to make the bootstrap to render the HTML like above ? Or how it can be fixed in bootstrap ?
Related
It's my understanding that to make div's line up on the save row you just need to make sure the col-sm-#'s add up to 12.
This isn't working for me, and wherever I place the isCoop section in my code, it ends up beneath the row I want. I just want the isCoop section to appear on the same line as the div's above it in this class.
I've changed the col-sm-#'s with no results
<div class="form-group">
<div class="col-sm-1 required campaign-drpdwn">
<select id="campaign" class="form-control font-weight-bold" ng-options="value.key as value.label for value in vm.campaignOptions" ng-model="vm.campaignOption" ng-change="vm.selectCampaignBy()"></select>
</div>
<div class="col-sm-1 no-padding required-div">*</div>
<!--<label class="col-sm-2 control-label">Total Campaign Budget</label>-->
<div class="col-sm-1 input-group" ng-show="!vm.selectCampaign">
<span class="input-group-addon">$</span>
<input type="text" ng-model="vm.Budget" class="form-control col-sm-2" name="budget" id="txtCampaignBudget" placeholder="enter budget" ng-required="!vm.selectCampaign == true" ng-keydown="vm.KeyPressEvent($event,vm.Budget)" ng-blur="vm.formatNumberWithoutDollar(vm.Budget)">
</div>
<span id="budget-lblerror" class="col-sm-offset-1 color-red" ng-show="campaignform.budget.$invalid && (campaignform.budget.$touched || vm.submitted)">Not valid input!</span>
<-- isCoop section -->
<div class="col-sm-3">
<label for="IsCoop" class="col-sm-2 control-label">Coop</label>
<label class="radio-inline">
<input type="radio" ng-model="vm.IsCoop" ng-value="1" name="IsCoop" />Yes
</label>
<label class="radio-inline">
<input type="radio" ng-model="vm.IsCoop" ng-value="0" name="IsNotCoop" />No
</label>
</div>
</div>
I need to make my form look like "Title over the checkbox and text on the right side" and etc. It's like a list of settings
But I can't display it properly
Here is my code
<div class="modal-body">
<form>
<div class="col-md-12">
<div class="form-group col-md-6" style="display: inline-block">
<label for="defaultG">To default view </label>
<input class="form-control" type="checkbox" value="Default" id="defaultG">
</div>
<div class="form-group col-md-6" style="display: inline-block">
<p>Auto generated style due to common stylish rules.</p>
</div>
</div>
<div class="form-group">
<label for="extendedG">To extended view</label>
<input class="form-control" type="checkbox" value="Extended" id="extendedG">
</div>
<div class="form-group">
<label for="CompactG">To Compact view</label>
<input class="form-control" type="checkbox" value="Compact" id="CompactG">
</div>
<div class="form-group">
<label for="extendedBracketsG">Left stady view</label>
<input class="form-control" type="checkbox" value="ExtendedBrackets" id="extendedBracketsG">
</div>
<div class="form-group">
<label for="BeforeG">Comas before</label>
<input class="form-control" type="checkbox" value="Before" id="BeforeG">
</div>
<div class="form-group">
<label for="AfterG">Comas after</label>
<input class="form-control" type="checkbox" value="After" id="AfterG">
<div class="form-group">
<label for="setTrimsAfterDotKomaG">Set trims after ;</label>
<input class="form-control" type="checkbox" value="SetTrimsAfterDotKoma" id="setTrimsAfterDotKomaG">
</div>
<div class="form-group">
<label for="setTrimsBeforeDotKomaG">Set trims before ;</label>
<input class="form-control" type="checkbox" value="SetTrimsBeforeDotKoma" id="setTrimsBeforeDotKomaG">
</div>
<div class="form-group">
<label for="removeTrimsG">Remove trims</label>
<input class="form-control" type="checkbox" value="RemoveTrims" id="removeTrimsG">
</div>
<div class="form-group">
<label for="removeEmptyLinesG">Remove empty lines</label>
<input class="form-control" type="checkbox" value="RemoveEmptyLines" id="removeEmptyLinesG">
</div>
<div class="form-group">
<label for="allVarsUpperCaseG">All variables upper case</label>
<input class="form-control" type="checkbox" value="VarsUpper" id="allVarsUpperCaseG">
</div>
<div class="form-group">
<label for="allVarsLowerCaseG">All variables lower case</label>
<input class="form-control" type="checkbox" value="VarsLower" id="allVarsLowerCaseG">
</div>
<div class="form-group">
<label for="varsUnderscoredG">All variables underscored</label>
<input class="form-control" type="checkbox" value="VarsUnderscored" id="varsUnderscoredG">
</div>
<div class="form-group">
<label for="toExtendedViewG">All variables to extended view</label>
<input class="form-control" type="checkbox" value="ExtendedView" id="toExtendedViewG">
</div>
<div class="form-group">
<label for="removeUnusedVarsG">Remove unused vars</label>
<input class="form-control" type="checkbox" value="removeUnusedVars" id="removeUnusedVarsG">
</div>
</div>
</form>
And I get this https://ibb.co/cqTqaT
I have no idea what the hell is going on with this. Help please!
Thanks!
At first you should check your HTML Structure and used classes.
An example, your following code:
<div class="col-md-12">
<div class="form-group col-md-6" style="display: inline-block">
<label for="defaultG">To default view </label>
<input class="form-control" type="checkbox" value="Default" id="defaultG">
</div>
<div class="form-group col-md-6" style="display: inline-block">
<p>Auto generated style due to common stylish rules.</p>
</div>
</div>
creates a div with two divs inside, which take both 50% width. In the first div with there is the label and also the checkbox. In the second div, there is the text you would like to have beside the checkbox. But this isn't working with your markup.
Better would be the following markup:
<div class="col-md-12">
<div class="form-group">
<label for="defaultG">To default view </label>
<input class="form-control" type="checkbox" value="Default" id="defaultG">
<p>Auto generated style due to common stylish rules.</p>
</div>
</div>
As you can see, I removed the two div's and used only one form-group. With the following simple CSS:
label{
display: block;
}
p {
display: inline-block;
}
You should get the wanted result.
How do I got about moving the checkbox label above the checkbox?
At the moment the labels are appearing on the left hand side of checkbox and I would like them above the checkboxes.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-2">
<div class="form-group">
<label for="viewstats">
View Statistics
</label>
<input type="checkbox" value="">
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label for="viewgraphs">
View Graphs
</label>
<input type="checkbox" value="">
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label for="viewnotifications">
View Notifcations
</label>
<input type="checkbox" value="">
</div>
</div>
</div>
the answer to your issue is simple. All you have to do is use a "br" tag after each ending "label" tag. In other words, by using the "br" or break tag, you're telling the checkbox to "break" down to the next line that is available.
Your code would look like this...
HTML
<div class="row">
<div class="col-md-2">
<div class="form-group">
<label for="viewstats">
View Statistics
</label>
<br>
<input type="checkbox" value="">
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label for="viewgraphs">
View Graphs
</label>
<br>
<input type="checkbox" value="">
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label for="viewnotifications">
View Notifcations
</label>
<br>
<input type="checkbox" value="">
</div>
</div>
</div>
Hope that helps!
You can change to structure as below because....
It gives flexibility to place the label and checkbox as per your need.
Not only that but also the Important Reason that why you should wrap <input> inside <label> tag is that the checkbox will function even when you click on label itself rather than only on checkbox as it was earlier.
In this example, with the structure you had, so when you click on "View Statistics" the checkbox will not be checked/unchecked. But, if you wrap <input> inside <label>, then even when you click on label itself, the checkbox functionality is achieved.
You can also refer to JSfiddle if you need https://jsfiddle.net/Dhruvil21_04/2m3asp3k/
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-2">
<div class="form-group">
<label for="viewstats">
View Statistics<br>
<input id="viewstats" type="checkbox" value="">
</label>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label for="viewgraphs">
View Graphs<br>
<input id="viewgraphs" type="checkbox" value="">
</label>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label for="viewnotifications">
View Notifcations<br>
<input id="viewnotifications" type="checkbox" value="">
</label>
</div>
</div>
</div>
I am trying to create a data entry form using bootstrap and forms input.
It seems to work well until on some lines it puts one entry on the line instead of 3.
I have tried various routes and always see this behavior.
Any help at understanding why it is doing this wound be greatly appreciated.
I have a plunker example here
<fieldset class="scheduler-border well">
<legend class="scheduler-border">Customer</legend>
<form class="form-group" role="form">
<div class="form-group left">
<label for="input16" class="col-md-2 control-label">Label A</label>
<div class="col-md-2">
<input type="number" class="form-control" id="Label A" placeholder="Label A">
</div>
<label for="input17" class="col-md-2 control-label">Customer Label ALpha Beta</label>
<div class="col-md-2">
<input type="number" class="form-control" id="Customer Label ALpha Beta" placeholder="Customer Label ALpha Beta">
</div>
<label for="input18" class="col-md-2 control-label">Label C</label>
<div class="col-md-2">
<input type="number" class="form-control" id="Label C" placeholder="Label C">
</div>
<label for="input15" class="col-md-2 control-label">Label D</label>
<div class="col-md-2">
<input type="number" class="form-control" id="Label AD" placeholder="Label D">
</div>
</div>
</form>
</fieldset>
If you the launch the preview window and increase the width you should be able to see the behavior.
Not entirely sure if this is what you want, but I guess what you mean is that for some screen sizes Label D ends up on the fourth column while it should be on the first. The problem here is that your label Customer Label Alpha Beta takes up too much height and since bootstrap's column are just a clever usage of float:left, Label D will be to the right of it.
The easiest way to adjust your code is to wrap groups of 3 labels/inputs in a .row to clear the floats once a row is full.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<fieldset class="scheduler-border well">
<legend class="scheduler-border">Customer</legend>
<form class="form-group" role="form">
<div class="form-group left container">
<div class="row">
<label for="input16" class="col-md-2 control-label">Label A</label>
<div class="col-md-2">
<input type="number" class="form-control" id="Label A" placeholder="Label A">
</div>
<label for="input17" class="col-md-2 control-label">Customer Label ALpha Beta</label>
<div class="col-md-2">
<input type="number" class="form-control" id="Customer Label ALpha Beta" placeholder="Customer Label ALpha Beta">
</div>
<label for="input18" class="col-md-2 control-label">Label C</label>
<div class="col-md-2">
<input type="number" class="form-control" id="Label C" placeholder="Label C">
</div>
</div>
<div class="row">
<label for="input15" class="col-md-2 control-label">Label D</label>
<div class="col-md-2">
<input type="number" class="form-control" id="Label AD" placeholder="Label D">
</div>
</div>
</div>
</form>
</fieldset>
Of course this solution isn't prefect, for example your rows might end up with different vertical distances. Maybe getting rid of the -col-* and using the classes .form-inline or `.form-horizontal will work better for you.
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.