Bootstrap switch entire width property

[angel1st]

Hi There,
I see there is two width properties - data-handle-width and data-label-width. The issue I have is when I need to have entire switch adjusted with _width = 100%_ within the following code snippet:

<div class="row">
    <div class="col-lg-6 col-md-6 col-sm-6">
        <input class="btn btn-lg btn-block" type="checkbox" data-label-text="Login" name="guest">
    </div>
    <div class="col-lg-6 col-md-6 col-sm-6">
        <input type="checkbox" data-label-text="Set&nbsp;Name" name="name">
    </div>
</div>

If I put style="width: 100% to checkbox element it is overridden by bootstrap switch initialization code.
So how to solve it?

[LostCrew]

@angel1st at the moment, the width of the switch is the sum of the sides and label widths. there isn't any way to define it.
i made an attempt to bake a custom solution for your case, but it was becoming too cumbersome too quickly.
i can add this to v4. if anyone else needs it sooner, i will plan to release it in v3.*. how does that sound?

[angel1st]

Hi Emanuele,
Thanks for answering me. I think the best solution is to make Bootstrap switch responsive, e.i. it should fit with regards to Bootstrap grid classes e.g. col-lg-x, col-md-xx when they are added to input box class attribute. The other option is to fit to width 100% of the outlined div element, where this one would be made responsive.
I would like to point out one more feature - it would be nice if label and side text length is manageable when the width becomes too small for showing the whole text.
Do you have any indicative time frame for v.4.0.0?

[LostCrew]

@angel1st unfortunately, i am always very busy with work and everything thus i cannot indicate you any timeframe for the next major release.
i will try to keep you updated.

[Ragdata]

Have bumped my head on the same problem. I ALMOST got a solution by setting widths of individual elements using an "onInit" function ... but was defeated by the offset once you started toggling the switch. Agreed - the solution which will stop those of us with mild OCD going bonkers would be to have the switches respond to grid class sizes.

[Godrules500]

I agree with angel1st. Will you be making it so that it is responsive and conforms to the classes you add? So if I add col-md-3, the size fits the full width. And if I add col-md-6, it increases to that size.
Is this something you are planning on adding soon?

Also, instead of mini, small, etc, it would be nice if it could make use of bootstrapp and take in size classes like btn-sm or something along those lines?

[justintoth]

I'm also interested in this.

[Cediddi]

I'm interested, did anyone forked and added such feature?

[KingGeneral]

I am using base class for bootstrap-switch

$.fn.bootstrapSwitch.defaults.baseClass = "bootstrap-switch",

and to resize for now i am using this one, this work for me but still with static size

$(window).resize(function(){
    if($(window).width() < 640 ){
         $('.bootstrap-switch').css({ "width": "100px", "height": "100%" });
         $('.bootstrap-switch-handle-on, .bootstrap-switch-handle-off, .bootstrap-switch-label').css({ "font-size": "8px"});
         $('.bootstrap-switch-label').css("height", "100%").css({ "height": "100%", "width": "40px" });
     }else{
         $('.bootstrap-switch').css({ "width": "100px", "height": "28px" });
         $('.bootstrap-switch-handle-on, .bootstrap-switch-handle-off, .bootstrap-switch-label').css({ "font-size": "12px"});
         $('.bootstrap-switch-label').css("height", "100%").css({ "height": "100%", "width": "49px" });
     }
});

PS : i am using jquery-1.10.2.min.js and bootstrap 3.3.4
This is not a perfect code, but I am looking forward for better code. thanks

[toobulkeh]

👍 for interest.