checkbox & radios responsivity
https://preview.keenthemes.com/html/metronic/docs/base/forms/checks-radios
In this samples I want to put checkbox side by side on the UI (not vertical) But in the mobile view I see that they are not going down.
See the image below. I used the same code given in the samples.
Replies (5)
Hi,
Can you try to add "flex-wrap" class to that checkbox container so they can break properly when can not fit into the available width.
Regards.
Thanks Sean,
Can I also align the starts to make it much more proper? See ss below.
Hi,
Alignment can not be fixed during the line break but you can put proper gap and it will look nice in default and mobile views as well:
<div class="d-flex flex-wrap gap-5 rounded border p-10">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" >
<label class="form-check-label" for="flexCheckDefault">
Default state
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" checked="">
<label class="form-check-label" for="flexCheckChecked">
Checked state
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" >
<label class="form-check-label" for="kt_check_indeterminate_1">
Indeterminate state
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" >
<label class="form-check-label" for="kt_check_indeterminate_1">
Indeterminate state
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" >
<label class="form-check-label" for="kt_check_indeterminate_1">
Indeterminate state
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" >
<label class="form-check-label" for="kt_check_indeterminate_1">
Indeterminate state
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" >
<label class="form-check-label" for="kt_check_indeterminate_1">
Indeterminate state
</label>
</div>
</div>Thanks Sean,
I added col-2 to the nearby form-check. So it takes equal space for all of them and they end up aligned vertically in mobile.
Hi 
,
Great solution. All the best with your projects. If we can help with anything else please let us know.
Regards.
