Rendering checkboxes - html

Question

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!

Answer 1

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.