Get 2024 Templates Mega Bundle!$1000 worth of 19 Bootstrap HTML, Vue & React Templates + 3 Vector Sets for just $99
Get for 99$

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


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

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 happy,

Great solution. All the best with your projects. If we can help with anything else please let us know.

Regards.


Your Support Matters!

We will highly appreciate your Metronic Review on Themeforest.
Please go to Themeforest Downloads page, select Metronic & leave your feedback.
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(