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.
https://ibb.co/wQyHt4n
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.
https://ibb.co/d42Tzcp
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.
