Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now
Light
Dark
System
Ask  Question

Inline checkboxes/radios - Responsive behavior - NO WRAP when the width is not enough big


Hi,
You do not mention inline checkboxes/radios in the documentation
https://preview.keenthemes.com/html/metronic/docs/base/forms/checks-radios

Actually, you do it in your demo in which you use d-flex class for the container and you handle margin by manual with me-* class.
https://preview.keenthemes.com/metronic8/demo1/apps/projects/settings.html

Well, I follow that way. However, I realize that it is NOT RESPONSIVE when the screen changes to mobile view. Here is my code

<div class="d-flex">

    <div class="form-check form-check-custom form-check-solid me-5">

        <input type="checkbox" class="form-check-input" name="ByWeekDay" value="0">

        <label class="form-check-label">Mon</label>

    </div>

    <div class="form-check form-check-custom form-check-solid me-5">

        <input type="checkbox" class="form-check-input" name="ByWeekDay" value="1">

        <label class="form-check-label">Tue</label>

    </div>

    <div class="form-check form-check-custom form-check-solid me-5">

        <input type="checkbox" class="form-check-input" name="ByWeekDay" value="2">

        <label class="form-check-label">Wed</label>

    </div>

    <div class="form-check form-check-custom form-check-solid me-5">

        <input type="checkbox" class="form-check-input" name="ByWeekDay" value="3">

        <label class="form-check-label">Thu</label>

    </div>

    <div class="form-check form-check-custom form-check-solid me-5">

        <input type="checkbox" class="form-check-input" name="ByWeekDay" value="4">

        <label class="form-check-label">Fri</label>

    </div>

    <div class="form-check form-check-custom form-check-solid me-5">

        <input type="checkbox" class="form-check-input" name="ByWeekDay" value="5">

        <label class="form-check-label">Sat</label>

    </div>

    <div class="form-check form-check-custom form-check-solid">

        <input type="checkbox" class="form-check-input" name="ByWeekDay" value="6">

        <label class="form-check-label">Sun</label>

    </div>

</div>


In fact, I tried to fix by flex-wrap class in the container, but it means I have to handle the margin (top/bottom) in mobile view by manual.

Did I apply correctly? Why do not we use form-check-inline supported by Bootstrap? Could you recommend me the right way to fix?

Thanks.


W
WilinkNet 2 years ago
Bootstrap Metronic HTML
1 Answers
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (1)

user
Sean Author 2 years ago

Hi,

Please try to use gap-* with flex-wrap to make it fully responsive:


<div class="d-flex flex-wrap gap-5">

...

</div>


Regards.


Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(