Bootstrap Dynamic drop down on checkbox formatting - html

Question

Still learning Bootstrap and I am trying to create an input form with check boxes where on selection of any of the check boxes a drop down appears (for that particular checkbox). The issue that I am running into is that whenever a drop down appears it shifts the other check boxes around. I would like to prevent it so that the check boxes and are fixed in place and do not shift around when the drop down appears.
Here is the HTML snippet:
<div class="container-fixed">
<div class="row">
<div class="form-check col-xs-6" >
<label class="form-check-label">
<input type="checkbox" value="cheese" >cheese
<div class="form-group"id="cheese">
<label for="Quantity">How Much?</label>
<select class="form-control" >
<option>regular</option>
<option>Extra</option>
</select>
</div>
</label>
</div>
<div class="form-check col-xs-6" >
<label class="form-check-label">
<input type="checkbox" value="Broccoli" >Broccoli
<div class="form-group"id="Broccoli">
<label for="Quantity">How Much?</label>
<select class="form-control" >
<option>regular</option>
<option>Extra</option>
</select>
</div>
</label>
</div>
<div class="form-check col-xs-6" >
<label class="form-check-label">
<input type="checkbox" value="Peppers" >Peppers
<div class="form-group"id="Peppers">
<label for="Quantity">How Much?</label>
<select class="form-control" >
<option>regular</option>
<option>Extra</option>
</select>
</div>
</label>
</div>
Here is the jQuery:
$(document).ready(function() {
$( "input" ).click( function() {
var show = "#" + this.value
$( show ).show();
})
})

Answer 1

You have to use the visibility:hidden css property to hide the select boxes. This property will hide the element but it will have its space on the page.
for more description : http://www.w3schools.com/cssref/pr_class_visibility.asp
So for the above code you can do changes like this :
HTML :
<div class = "container-fixed">
<div class = "row">
<div class = "form-check col-xs-6" >
<label class = "form-check-label">
<input type = "checkbox" value = "cheese" >cheese
<div class = "form-group select-box" id = "cheese">
<label for = "Quantity">How Much?</label>
<select class = "form-control" >
<option>regular</option>
<option>Extra</option>
</select>
</div>
</label>
</div>
<div class = "form-check col-xs-6" >
<label class = "form-check-label">
<input type = "checkbox" value = "Broccoli" >Broccoli
<div class = "form-group select-box" id = "Broccoli">
<label for = "Quantity">How Much?</label>
<select class = "form-control" >
<option>regular</option>
<option>Extra</option>
</select>
</div>
</label>
</div>
<div class = "form-check col-xs-6" >
<label class = "form-check-label">
<input type = "checkbox" value = "Peppers" >Peppers
<div class = "form-group select-box" id = "Peppers">
<label for = "Quantity">How Much?</label>
<select class = "form-control" >
<option>regular</option>
<option>Extra</option>
</select>
</div>
</label>
</div>
CSS :
.select-box{
visibility: hidden;
}
jQuery :
$(document).ready(function() {
$( "input[type='checkbox']" ).click( function() {
var show = this.value
if ($(this).prop('checked')){
$( "#"+show ).css('visibility', 'visible');
}else{
$( "#"+show ).css('visibility', 'hidden');
}
})
})
JSFIDDLE : https://jsfiddle.net/8d1fnb5z/

Answer 2

I would look to add a new .row below the current row of checkboxes. This works as long as you can fit your checkboxes and dropdowns on one row each. Then make sure that your col classes match. So in this example i'm using .col-xs-4
http://codepen.io/partypete25/pen/VmgPVp
HTML:
<div class="container-fixed">
<div class="row">
<div class="form-check col-xs-4">
<label class="form-check-label">
<input type="checkbox" value="cheese" >cheese
</label>
</div>
<div class="form-check col-xs-4">
<label class="form-check-label">
<input type="checkbox" value="Broccoli" >Broccoli
</label>
</div>
<div class="form-check col-xs-4">
<label class="form-check-label">
<input type="checkbox" value="Peppers" >Peppers
</label>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<div class="form-group hide" id="cheese">
<label for="Quantity">How Much?</label>
<select class="form-control">
<option>regular</option>
<option>Extra</option>
</select>
</div>
</div>
<div class="col-xs-4">
<div class="form-group hide" id="Broccoli">
<label for="Quantity">How Much?</label>
<select class="form-control">
<option>regular</option>
<option>Extra</option>
</select>
</div>
</div>
<div class="col-xs-4">
<div class="form-group hide" id="Peppers">
<label for="Quantity">How Much?</label>
<select class="form-control">
<option>regular</option>
<option>Extra</option>
</select>
</div>
</div>
</div>
JAVASCRIPT:
$("input").change(function() {
var chk = "#" + this.value;
if ($(this).is(':checked')) {
$(chk).removeClass('hide');
} else {
$(chk).addClass('hide');
}
});