When check boxes are turned into toggles in a horizontal form, the label becomes vertically misaligned.

Hello - I've been trying to get this to work with our Ember App, and I've been able to integrate other bootstrap plugins as per the usual method: include the library after including bootstrap, initialise via jquery if needed, and they work. However, both bootstrap toggle and bootstrap switch don't ever show up; they don't seem to apply themselves to the classes I need them to.

Are you aware of any issues with Ember.js? If not, then there must be something in our application that's preventing it.

I know - IE8. Unfortunately it's still used a lot.
Any chance of better support?

In IE8 the checkbox appears as a coloured rectangle with no text.

I have downloaded bootstrap-toggle from Nuget and have tried one of the simple examples, the buttons are overlapped, using MVC 5.0, anyone else have the same issue?

<input id="toggle-event" data-toggle="toggle" type="checkbox">
<div id="console-event"></div>
 <script>
     $(function () {
         $('#toggle-event').change(function () {
             $('#console-event').html('Toggle: ' + $(this).prop('checked'))
         })
    })
</script>

And then the toggle look like this:

I'm working with bootstrap-toggle to trigger a backend API call. What I'd like is to disable the toggle, make the call, and update the toggle based on the result (success/failure).

I've tried things like this:

$('#toggleElement').change(function(e) {
    e.preventDefault();
    e.stopPropagation();
    e.stopImmediatePropagation();
});

And this:

$(document).on('click.bs.toggle', 'div[data-toggle^=toggle]', function(e) {
    console.dir('click');
    e.preventDefault();
});

But nothing seems to work. Any thoughts on how I can disable the UI change until I explicitly invoke it?

Thanks!

According to this thread:

Bttstrp/bootstrap-switch#412 (comment)

He says not working on iPhone (e.g. iOS Safari).

Hi,

I'm working on template for bootstrap and i need LESS file to esasy customize the controls appearance.

Can you release that files too?

The toggle checkboxes do not work with the standard html input type="reset".

I'm trying to use bootstrap-toggle with AngularJs:

<input data-toggle="toggle" type="checkbox" ng-checked="myProperty" ng-model="myProperty" ng-change="myPropertyChange()" >

But when the toggle state changes the Angular model is not updated.

Consider the following toggle:

<input checked data-toggle="toggle" data-size="mini" data-on="Very long string here" data-off="Very long string here" type="checkbox">

This looks like:

Is this by design or a bug? If design, is it possible to override? I need the toggles to expand to fit the (longest) string.

Is there any way to make toggles comply with the Bootstrap grid system for width? I would like my toggles to dynamically get the width of their parent div (i.e. "col-sm-6").

Hi this toggle button is not working in ios when loaded with meteor run ios-device.

<template name="timePicker">
  <div class="form-group">
    <div class='input-group date' id='datetimepicker3'>
      <span class="input-group-addon">
        <span class="glyphicon glyphicon-time"></span>
      </span>
      <input type='text' class="form-control" >
    </div>
  </div>

  <input id="noti-toggle" type="checkbox" data-toggle="toggle" >
</template>

Template.timePicker.onRendered(function() {

  this.$('#datetimepicker3').datetimepicker({
    format: 'LT'
  });
  this.$('#datetimepicker3 input').val("10:00 AM");
  this.autorun(function(){
    $('#noti-toggle').bootstrapToggle();
  });

});

In this example for instance:

I want those attributes (data-on and data-off) to have a href in order to switch back and forth e.g. http://en/contact to http://es/contact. Is it possible? Thanks!

Tested in Phonegap 3.7.0 it doesn't work.
On chrome it works well.

Hi,
I am using datatables JQuery plugin and bootstrap-toggle together in an one page application.

I create the datatable (ajax loaded) and then I add the toggle functionality to the checkboxes in a column using the following javascript every time the table is loaded:

$('.checkboxes_class').bootstrapToggle({
  "size": 'mini',
  "on": "On",
  "off": "Off"
});

It works fine when I draw the datatable for the first time.
When I click on other tab I am destroying the table DOM and container and re-loading it if the user click on the tab again.

That is where the problem starts. If I click on a second tab and click again on the first apparently bootstrap/jquery is stacking events so it turn on and off. If I repeat the process it turn on, off and on again. And so on.

I tried destroying the component before creating it again, I also tried disable and enable after creating it, but nothing seems to work.

$('.checkboxes_class').bootstrapToggle('destroy');
$('.checkboxes_class').bootstrapToggle('disable');

Any light?

Thanks in advance,

Vitor Munhoz

It would be nice to have this feature on Touch/Mobile device that user can actually drag switch from on to off or from off to on.
Although, bootstrap-switch is capable to do it. But I still like the simplicity of bootstrap-toogle better.

Could you please add some examples of using within a navbar - especially with the different size modes...

After a toggle, for example from on to off, if we reload the page, the toggle is not reset to its previous state.
Removing the class ".off" at the ready bugs.

It looks like the initial render of the toggle is firing a change event.

This can be prevented by adding a silent parameter to update(), on() and off() (in a similar way to the trigger() method) which prevents the change being triggered when called from the render method.

hi!

the width of the control is not set when we create the component on the show.bs.modal event of the modal component as shown here: http://jsfiddle.net/r2ub9kjt/1/

i can solve the problem by moving my code to the "shown.bs.modal" event but if it's possible, i really prefer to set it in the "show.bs.modal" event to prevent the user to see the checkbox converted to the toggle style.

I am trying to use bootstraptoggle withing ng-grid (newer version is called ui-grid)- http://angular-ui.github.io/ng-grid/ .
I can not see toggle button. I can see checkbox instead of toggle. Not sure is it still in developement or what.

Hi,

I recently had the requirement to add a simple tooltip to the toggles, so i tried to add a title.
But the toggle doesn't take the title, so I created this little script, that takes the title from the checkbox and pushes it onto the div.

$.each($('input[type="checkbox"][title]'), function (sender) {
        $('#' + $(this).attr("id") + ' + .toggle-group').attr("title", $(this).attr("title"));
    });

Is there a better way?

regards,
CarnVanBeck

It would make sense to change the state when clicking on the label of the checkbox

I'm using Bootstrap v2.3.2,bootstrap2-toggle.min.js and bootstrap2-toggle.min.css but in jsp pages it's working in gwt pages not working. It is showing only checkbox.
Please help me!

I have a requirement when the user checks the checkbox that the page autopostbacks and my .net function handler runs...this works for my normal checkbox but as soon as i add the toggle the autopost back stops...is this by design?

Dynamically added contents are not getting initialised automatically

Why the click function don't works with this toggle? I need to use a function like this :
$('checkbox').click(function(){

Hi.
It seems like there is old version of plugin(without change event) in CDN.
Can you update it?

Thx.

How do I set custom Widths on the toggle?

I have a couple with long titles and they are being cut off. I also noticed that I must put a space after (On state) and before (Off state) to ensure proper spacing.

Thanks

The bootswrap themes seem to alter the placing of the text and the size of the button.

Just dropped the css and js files in my Bootstrap 3 projects, two things are weird:

1. The switch works, but doesn't animate, just switches.
2. The 'switch' is stretching to the height of it's container. When I inspect the div your js creates, it's got inline width and height so I can't target it with css. I've got the mini directive on my checkbox but it's being totally ignored.

Any ideas?

It seems that your component doesn't work with knockout properly. If I have wrapper like this:

It doens't work. It shows styled buttons, but 'toggle' part doesn't work.
More over this div is part of bootstrap tabs and first this tab is hidden, data into MyModel are loadd only when user is navigating to the tab. So it happens dynamically after document is ready. I guess this causes some problems. I am not sure.

Any way to use the toggles with bootstrap popover?

Any toggles not on the first tab of a tab set are somehow getting set with 0px height. A toggle on the first tab looks like this:

<div class="toggle btn off btn-sm btn-default" data-toggle="toggle" style="width: 100%; height: 19px;">

A toggle on subsequent tabs looks like this:

<div class="toggle btn btn-sm btn-default off" data-toggle="toggle" style="width: 100%; height: 0px;">

Both results come from identical "data-" markup.

If you have to use your beautiful toggle button with a custom width set using CSS like this:

.toggle {
    width: 400px;
 }

The toggle button will not calculate its width from the right outerWidth value.

Here is the part of the code which causes the problem:

var width = Math.max($toggleOn.outerWidth(), $toggleOff.outerWidth())+($toggleHandle.outerWidth()/2)
var height = Math.max($toggleOn.outerHeight(), $toggleOff.outerHeight())        
$toggleOn.addClass('toggle-on') // HERE WIDTH IS ACTUALLY UPDATED BUT ITS TOO LATE
$toggleOff.addClass('toggle-off')       
this.$toggle.css({ width: width, height: height })

So the fix is very simple, juste move addClasses calls before width/height calculation:

$toggleOn.addClass('toggle-on')
$toggleOff.addClass('toggle-off')

before the width/height calculation, like that:

$toggleOn.addClass('toggle-on')
$toggleOff.addClass('toggle-off')   
var width = Math.max($toggleOn.outerWidth(), $toggleOff.outerWidth())+($toggleHandle.outerWidth()/2)
var height = Math.max($toggleOn.outerHeight(), $toggleOff.outerHeight())    
this.$toggle.css({ width: width, height: height })

Then everything will work fine :)

Hi,
I have grid view control and there are 10 rows in it...last column in grid have toggle check box control to active/inactive..when i toggle first toggle button in first row toggle change event is firing but when i click on other 9 rows toggle button ,it doesnt call toggle change event.
code:

grid view:

<asp:templatefield headertext="Toggle" >

                                <input id="toggle-event" type="checkbox" data-toggle="toggle" data-on="Active" data-off="InActive" data-size="small" >
                                   </itemtemplate>
                            </asp:templatefield>

$(function () {
$('#toggle-event').change(function () {
alert('toggle clicked');
})
});
Can you please help me out .

I'm to install this on my site, but I noticed I need to grab all css information out of the almost unreadable: https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css
That doesn't seem right?

How come this CSS is not in the local code? Or atleast an example.css or something?

Perhaps I don't understand something, that could always be the case.
I could ofcourse import the whole https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css but that breaks my site totally, with all kind of other css not related to the toggle button.

Such as jump to page 1 when i change it from on to off and jump to page 2 when i change it form off to on?

When trying to use in a Meteor template, it's not the actual <input>, but a surrounding <div> that changes classes.
I.e. from

<div class="toggle btn ios btn-primary" data-toggle="toggle" style="width: 58px; height: 34px;"><input id="activation" type="checkbox" checked="" data-toggle="toggle" data-style="ios"><div class="toggle-group"><label class="btn btn-primary toggle-on">On</label><label class="btn btn-default active toggle-off">Off</label><span class="toggle-handle btn btn-default"></span></div></div>

to the same, except

<div class="toggle btn ios btn-default off" ...

So the checked boolean attribute isn't add-/removed, etc. How would you make the event listeners work in this case?

If you look at the same example, it won't initialize a normal checkbox programatically either.

First of all - great component!!!

Is there a way to change the on-text and off-text on the fly?

Like ...

$('#toggle-demo').bootstrapToggle('on-text', 'bla bla');

:)

If any method is used like bootstrapToggle("off") or bootstrapToggle("toggle"), it removes the parameters on the input tag like data-style, data-on, data-off, data-onstyle...

Bootstrap toogle, doesn't work with bootstrap 3, can you make it compatible? thx

Is there anyway to programmatically update the toggle using bootstrapToggle("on")/bootstrapToggle("off") and not have it trigger the 'change' event on the checkbox?

I see in-code there is a 'silent' that determines if 'trigger()' should be called, but I'm not sure how to utilise it.

Basically I display a bootstrap modal window, the window has a series of toggles on it, on the 'show.bs.modal' event I make an AJAX request to find out what states they should be set to and then utilise one of the 2 above bootstrapToggle functions, however I don't want it to trigger the change event in that instance, only if a person physically changes the toggle.

Anyone else have this issue? Other bootstrap items show correctly.

I'm missing the white/grey bar on either side to make it look like a slider, and the text of the off state. I'm using the JS to init() and html5 data vars for options.

I've tried a few BS classes and they all fail the same way so it's not just danger.

When i use on jsp page.It shows button the way it should be shown.But when i add it through javascript he it shows only a checkbox not the toggle button.What is the issue?

I'd like to make a 3-way toggle: green | yellow | red
Can this plugin support 3 options?

I want to use data-toggle in conjunction with other java script implementation e.g. when state is "On" I want to do some other stuff like show / hide / collapse pane below check toggle checkbox.
`

Hi

If I serialize a form with a bootstrap-toggle, then the serialized value is "on" - how can I change this to "true"?

Thanks

This is the repository that has the code where I am trying to add the toggle.

Note, as of the time of this writing, I did not commit any changes with the toggle as it did not work as expected.