I tried to give the same width to these divs:enter image description here
<div class="form-group">
<span class="control-label own">Ownership?</span>
<div class="form-row">
<div class="col radio radio-inline borders-check col-md-6">
<input type="radio" id="ownyes" name="ownership" value="ownershipYes" checked>
<label class="vert checkbox-checked" for="ownyes">Yes</label>
</div>
<div class="col radio radio-inline borders-check col-md-6">
<input type="radio" id="ownno" name="ownership" value="ownershipNo">
<label class="vert checkbox-checked" for="ownno">No</label>
</div>
</div>
</div>
but I received this:
As you can see the second div goes down. What I must do?
Related
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 ?
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.
I have Bootrap 4 text input like this
<div class="col-2 form-group">
<label for="follow">Följande</label>
<input type="text" class="form-control" id="follow" name="Follow" placeholder="" value="" required>
<div class="invalid-feedback">
Vänligen fyll i Följande.
</div>
</div>
And I want the checkbox label same vertical level as the text input and the check same vertical level and size as the text input. I have tried to swap the input and label code but nothing is working.
Checkbox code with custom checkbox.
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck1">
<label class="custom-control-label" for="customCheck1">Check</label>
</div>
I have it like this
But want it like this
You should wrap your boxes properly within a container
<div class="container">
<div class="row">
<div class="col-sm-4 form-group">
<label for="follow">Följande</label>
<input type="text" class="form-control" id="follow" name="Follow" placeholder="" value="" required>
<div class="invalid-feedback">
Vänligen fyll i Följande.
</div>
</div>
<div class="col-sm-4 form-group">
<label for="follow">Check</label>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck1">
<label class="custom-control-label" for="customCheck1"></label>
</div>
</div>
</div>
</div>
After clicking on a radio button if i click on other radio button the checked value is not getting deselected , where am i going wrong ?
I have added a fiddle here http://jsfiddle.net/Lv8xzkhs/
<fieldset>
<legend>Property Info</legend>
<div class="row">
<div class="col-md-3 col-xs-12">
<label>I want To:</label>
<div class="radio">
<label><input class="radio-inline" type="radio" >Sale</label>
<label><input class="radio-inline" type="radio" >Rent Out</label>
</div>
</div>
<div class="col-md-3 col-xs-12">
<label for="sel1">Looking For:</label>
<select class="form-control" id="sel1">
<option>PentHouse</option>
<option>Villa</option>
<option>Plot</option>
<option>Studio</option>
</select>
</div>
<div class="col-md-3 col-xs-12">
<label>Location:</label>
<input type="text" class="form-control">
</div>
</div>
</fieldset>
Add name attribute to your radio btn
<label><input class="radio-inline" type="radio" name="yourgroup">Sale</label>
<label><input class="radio-inline" type="radio" name="yourgroup">Rent Out</label>
Fiddle: http://jsfiddle.net/Lv8xzkhs/1/
More info : http://www.w3.org/TR/html-markup/input.radio.html