2

I'd like to make all my bootstrap toggles of mini size if the page size < 768px and back to normal again once it is more than that. For all other controls I'm using @media (max-width: 768px) { css, but I could not figure out what styles to add to make bootstrap toggle mini size.

One of other approaches I tried is:

window.addEventListener('resize', function() {
        if ($(window).width() < 768) {
            $("[data-toggle='toggle']").bootstrapToggle({size: "mini"});
        }

    }, true);

But that reinitializes all bootstrap toggles, removing all the setup made with data- attributes. I would also prefer css approach.

Archeg
  • 8,364
  • 7
  • 43
  • 90

1 Answers1

1

Firstly, Bootstrap provides a lot of useful utilities for you to use in response to screen sizes, check this answer for more info. Using this approach will probably be way better in the long run.

Secondly, you will want to give a specific CSS class or ID to any toggles that you want to target with your resize. $("[data-toggle='toggle']") Will select any element that matches the form: <tag data-toggle='toggle'> and that probably means all toggles on your page.

So setting the toggle to like <input data-toggle="toggle" class="resize"> and using $('.resize').bootstrapToggle() should help

S.V.
  • 1,181
  • 6
  • 23
  • 1
    Specific CSS class was one of the problems. The other one - I need to clear bootstrapToggle with `$(".mytoggle").bootstrapToggle('destroy');` before setting `$(".mytoggle").bootstrapToggle({size: "mini"})` But I can count this as an answer as this partially answers the question – Archeg Sep 14 '17 at 11:30