gitbrent / bootstrap4-toggle Goto Github PK

When placing checkboxes inside a tab, the width and height become 0px.

I want to disable Event Propagation when setting the toggle state programmatically.
Doing so will fire an unwanted event, even when using the example on this page:
https://gitbrent.github.io/bootstrap4-toggle/

In fact the example "On by API (silent)" on this page also fires an event.

I'm a doing something wrong?

Kind regards,
Jacco

I made a toggle switch component in react with bootstrap4-toggle and it looks like this:

import React, { Component } from "react";
import "bootstrap4-toggle/css/bootstrap4-toggle.min.css";

class ToggleSwitch extends Component {
  render() {
    return (
      <div className="toggle-switch">
        <input
          type="checkbox"
          data-toggle="toggle"
          data-on="Ready"
          data-off="Not Ready"
          data-onstyle="success"
          data-offstyle="danger"
        />
      </div>
    );
  }
}

export default ToggleSwitch;

But it shows like a simple checkbox. No error in console. Any help on this?

Hi,

I want to disable the toggle and switch them to off (or the oppsosit condition). I have 10 toggle's in my page:

var ausgabe = positionenData.ausgabe; for (i = 1; i < 11; i++) { if (ausgabe == false) $('#ausgabe' + i).bootstrapToggle('disable'); if (ausgabe == true) $('#ausgabe' + i).bootstrapToggle('enable'); if (positionenData['ausgabe' + i] == true) $('#ausgabe' + i).bootstrapToggle('on'); if (positionenData['ausgabe' + i] == false) $('#ausgabe' + i).bootstrapToggle('off'); }

when i do first disable the toggle, the switch don't work,
When i switch the toggle it don't get deaktivated.

Each for it self works like expected.

I have tried to do this with the prop('disabled') but it also dont work.

Any Idea?

I'm having this trouble.

I'm traying to verify if the checkbox is checked when the element changes but the element never change it state. Here is the code:

$('#ws_swtch').change(function (e) {
  e.preventDefault();
		
  if ($(this).is(':checked')) {
    $('#col_url').removeClass('oculto');
    $('#col_catalogo').addClass('oculto');
   } else {
    $('#col_catalogo').removeClass('oculto');
    $('#col_url').addClass('oculto');
   }
});

Using the toggle like this:

<asp:checkbox id="chkShowActive" runat="server" cssclass="form-check-input" AutoPostBack="true" OnCheckedChanged="chkShowActive_changed" CausesValidation="false" />
I must add the attributes from the code behind -

chkShowActive.InputAttributes.Add("data-toggle", "toggle") chkShowActive.InputAttributes.Add("data-onstyle", "info") chkShowActive.InputAttributes.Add("data-size", "sm")

Any help would be appreciated.

I just added a toggle to my page and the vertical size is huge, I need this to align to the rest of my buttons having the normal height of any other button from bootstrap:

the code inside the delay function never get excused. if no delay, it's executed, not sure if it's a related bug. but i want to delay the toggle so that my database does not execute a save on each click if someone clicked 100s of times!

    $('#toggle-event').change(function() {
    
     setTimeout(  function()   {
       $(this).prop('disabled',false);
  }, 1000);
  
      setTimeout(  function()   {
       $(this).prop('disabled',true);
  }, 10);
})

When using inside an input-group the Off button doesn't render corretly
Example:

                  <div class="form-group">
                    <div class='input-group'>
                        <input type="hidden" name='' value="" />
                        <input type='text' class='form-control telefone' />
                        <div class='input-group-append'>
                          <div class='input-group-btn'>
                            <input type='checkbox' class="" data-toggle='toggle'
                             value="true" data-off="Não" data-on="Sim">
                            <input type='hidden'  value="false" />
                          </div>
                      </div>
                    </div>
                  </div>

Using either html intialization or js, here is the visual I get:

<input type="checkbox" id="toggle">

$(function(){ $('#toggle').bootstrapToggle() });

I am using bootstrap 4.1.3

Hi,
I have gone through the code and in order to not trigger change event and set silent this is what we have done.

 var bs = $(company).bootstrapToggle().data('bs.toggle');
 bs.on(true);

is this correct?
Is there a better way to do it?
something like

$('#toggle-demo').bootstrapToggle('on,silent')

The use case is I ask the user a question in an alert to answer yes or no in JS change event when the toggle the checkbox. If the user answers no I should go back to the original state and not trigger the change.

Appreciate if this can be added to your API document

Thanks
Aswin

Hi,

I found that the 'change' event of toggle will be triggered every time the page gets loaded.
Is there a way to stop that?

Thanks!

On some reloads the style for the toggles changes back to a normal checkbox anyone else experienced this and have a fix?

Only the Change event is firing correctly, but the on click event never fires.

 <input title="Activation status" type="checkbox" class="de-activate" checked
                               data-toggle="toggle" data-size="small" data-onstyle="success"
                               data-on="Activated" data-off="Deactivated">

 $('.de-activate').click( (e)=>{
            let el = $(e.target);
            console.log(el);
        });

I need the click event, since I want to show a warning before changing the state of the toggle

edited: opened erronously, this is not an issue, since we can specify width and height by an expression like 'calc(xem + ypx + zrm)'

i want to get by jquery its .prop('checked') but it always the same and will not change

these are my checkbox attrs

class="form-control" id="vZVLwwfS1wg1≪0≫" name="temp_legal_person_type_id-10[0]" type="checkbox" value="legal" data-toggle="toggle" data-width="280" data-height="40" data-on="حقوقی" data-off="حقیقی"

So I just install the latest version of BootStrap 4 Toggle (3.6.1) and I am using BootStrap 4.2.1, while everything appears to work, I am getting a warning in the console each time I hover over a toggle switch (Empty string passed to getElementByID()) which adds up to about 4 events each time you enter or leave a toggle button. From what I can tell it appears to be somehow connected to the bootstrap4-toogle.js script, but yet I don't see that function in the script.

Hi everyone,

In a bootstrap project (i'm dev newbie), i would like to replace a yes/no dropdown list by a checkbox toggle button.
with the following code :

'...
label for="dc" class="col-sm-12 control-label">DC</label
...
label for="imc" class="col-sm-12 control-label">IMC</label
...
div class="col-sm-12" name="test_1Div"
...
input type="checkbox" name="d_c" id="test_1" style="" required
...
div class="col-sm-12" name="test_2Div"
...
input type="checkbox" name="i_m_c" id="test_2" style="" required
...
'

and following javascript :

`<script>
$(document).ready(function(){

$('#test_1').bootstrapToggle({
on: 'Yes',
off: 'No',
onstyle: 'success',
offstyle: 'danger'
});
$('#test_2').bootstrapToggle({
on: 'Yes',
off: 'No',
onstyle: 'success',
offstyle: 'danger'
});
});
</script>`

when test_1 button is checked, i've got "on" writed in database, and "NULL" when button is left "off".
But when i try to modify a record, i'm unable to get the button checked when value is "on".
Is there anybody to help me about that ?

Second point : is there any opportunity to get the test_2 button visibility property to NO when test_1 is unchecked, and YES when test_1 is checked ?
... and force test_2 value to "NULL" when test_1 is unchecked ?

Thanks for any help or suggestion.

Best regards

The toggle is not initialized properly when parent is first collapsed :
See sample :

<div class="card">
  <div
    class="card-header"
    id="headingRTT"
    data-toggle="collapse"
    data-target="#collapseRTT"
    aria-expanded="true"
    aria-controls="collapseRTT"
  >
    <label>RTT</label>
  </div>
  <div id="collapseRTT" class="collapse" aria-labelledby="headingRTT">
    <div class="card-body">
      <div class="form-group">
        <input
          type="checkbox"
          class="form-check-input d-inline-block"
          data-toggle="toggle"
          data-onstyle="success"
          data-offstyle="danger"
          data-on="Oui"
          data-off="Non"
        />
      </div>
    </div>
  </div>
</div>

Hi,

kindly please see here.
https://jsfiddle.net/kj3zg2x6/3/
Click Tab A
Notice the width of the toggle button inside the tab.

in a check box there is an indeterminate state that can be shown using
$('#selector').prop("indeterminate", true);
How to have the same effect on bootstrab4-toggle ?

Hello how can i do right alignment of this component internally in an item list

Little issue in the code

Toggle.prototype.toggle = function () {
    if (this.$element.prop('checked')) this.off()
    else this.on()
}

must be

Toggle.prototype.toggle = function (silent) {
    if (this.$element.prop('checked')) this.off(silent)
    else this.on(silent)
}

Hi,

first of all, i love this library! is there anyway to manipulate the on and off toggle in javascript and it won't fire a class to on or off the toggle?

Sorry if I'm missing something, but why is such a generic css selector as .btn-group-xs > .btn, .btn-xs used? This is changing some of our other UI elements which we don't want changed. Could this be changed to use a different selector which only picks up the correct elements for this plugin?

We love this plugin otherwise, so thanks for making it open source 👍

Thanks.

I try this code with mdbootstrap
<input type="checkbox" checked data-toggle="toggle" data-on="Ready" data-off="Not Ready" data-onstyle="success" data-offstyle="danger">

I'm using bootstrap-table. If I include toggles inside the table, the toggle appears on load, but looses all styling if I apply actions to the table: Pagination or toggle columns on/off for example.

When on mobile devices the toggle does not toggle.

Hello,

I am trying to generate maximum number of 5 toggle buttons dynamically form jquery script when user clicks on add button. Instead of toggle buttons plain checkboxes were displayed. Can anyone help me to solve this issue and I would like to know how to give unique id for each of this toggle button.

Thanks in advance :)

Note: .insurance-check-form is the div tag where dynamic buttons are added

` <script>
$(document).ready(function(){

     var max_fields = 5;
     var field_wrapper = $(".insurance-check-form");       
     var add_button = $("#add-more");
     var ins_company_count = 1;

     $(document).on("click","#add-more",(function(e){
         e.preventDefault();
         if(ins_company_count < max_fields){
             $(field_wrapper).append('<div class="row mt-5"> <div class="col-md-2"> <select name="insurance" class="custom-select"> <option selected>Custom Select Menu</option> <option value="volvo">ICCI Prudential</option> <option value="fiat">Blue Star</option> <option value="audi">Edelwiss Tokyo</option> </select> </div><div class="col-md-3"> <input type="checkbox" data-toggle="toggle" data-style="slow" data-width="250" data-height="35" data-on="Click to Unsubmit" data-off="Click to Submit" data-onstyle="primary" data-offstyle="secondary" id="clearance-check"><br><span class="head3" data-toggle="popover" data-trigger="hover" data-content="Click here to add a notes"> <button class="btn btn-link" data-toggle="modal" data-target="#igl-sub-modal" data-backdrop="static" data-keyboard="false"> <i class="far fa-file-alt head3 text-gray"></i></button> </div><div class="col-md-3"> <input type="checkbox" data-toggle="toggle" data-style="slow" data-width="250" data-height="35" data-on="Click to Unsubmit" data-off="Click to Submit" data-onstyle="primary" data-offstyle="secondary" id="clearance-check"><br><span class="head3" data-toggle="popover" data-trigger="hover" data-content="Click here to add a notes"> <button class="btn btn-link" data-toggle="modal" data-target="#igl-sub-modal" data-backdrop="static" data-keyboard="false"> <i class="far fa-file-alt head3 text-gray"></i></button> </div><div class="col-md-3"> <input type="checkbox" data-toggle="toggle" data-style="slow" data-width="250" data-height="35" data-on="Click to Unsubmit" data-off="Click to Submit" data-onstyle="primary" data-offstyle="secondary" id="clearance-check"><br><span class="head3" data-toggle="popover" data-trigger="hover" data-content="Click here to add a notes"> <button class="btn btn-link" data-toggle="modal" data-target="#igl-sub-modal" data-backdrop="static" data-keyboard="false"> <i class="far fa-file-alt head3 text-gray"></i></button> </div><a href="#" class="remove_field"><i class="fas fa-times-circle brand-color head2"></i></a></div>');
              ins_company_count++;
              $('head').append(' <link href="../assets/libs/css/bootstrap4-toggle.min.css" rel="stylesheet">');
             
         }
     }))

{)`

https://gyazo.com/35df140430eed1cb65cadadf1f61673d
alawys fire the onChange event.

Hi, I installed the library through Yarn to be used with a Rails app, but when I open the Chrome devtools, it doesnt find the bootstrap4-toggle.min.js.map.

If I see inside the folder on wich bootstrap4-toggle was installed, there is no file .map

Im doing something wrong?, or the map file isnt being shipped with the instalation through Yarn, how can I solve this?

Hello, thanks for the plugin.

The input's checked attribute not being updated makes it unable to get the actual state through Javascript.
Could you please fix it?

Thanks again.

Delete

All the JS adn CSS files have https://gitbrent.github.io/bootstrap-toggle/ instead of https://gitbrent.github.io/bootstrap4-toggle/

Hi,
i am Using Jquery 3.4.1
and Bootsrap 4.3.1
and Bootsrap-Toggle 3.5.0

The Toggle button code is
<input id="chkToggle1" type="checkbox" data-toggle="toggle" checked>

In Dev-Mode in Crome it is shown as

`

<div class="toggle btn btn-primary" data-toggle="toggle" role="button" style="width: 61.0781px; height: 38px;">
	<input id="chkToggle1" type="checkbox" data-toggle="toggle" checked="">
    <div class="toggle-group">
        <label class="btn btn-primary toggle-on">On</label>
        <label class="btn btn-light toggle-off">Off</label>
        <span class="toggle-handle btn btn-light"></span>
    </div>
</div>

<div class="toggle-group">
    <label class="btn btn-primary toggle-on">On</label>
    <label class="btn btn-light toggle-off">Off</label>
    <span class="toggle-handle btn btn-light"></span>
</div>

The first div statement is shown 2 times:

Toogle Render not correct. I have copied an example for the Bootstrap4-Toggle Page. Also I have include the repro-links
I am on Bootstrap 4.4.0

<div class="form-group"> <input type="checkbox" checked data-toggle="toggle" data-on="Ready" data-off="Not Ready" data-onstyle="success" data-offstyle="danger"> </div>

Any Idea

I am interested in using this library on a page with a list of 200 countries that I want to toggle on and off.
The list is long and when the page loads the list appears to have regular check boxes for about 1 second and then your styled toggles appear. Is that expected? Are there any tweaks you would suggest to speed up the load time?

I am trying to figure out how to use this with stimulus.
I have tried

 <input type='checkbox' 
name='disable_box' data-action="change->my-controller#enableDisable click->my-controller-index#enableDisable" data-toggle='toggle' <%=model.active ? 'checked' : ''%>>

But the action is never getting fired.

Is this not using native events?

Well, this is embarrassing... apparently I didn't build gulp.

Hi,

I use Accessibility checkers in order to make accessibility tools work and i get an error because "label" needs "for" attributes.

As multiples "for" can't point to the same input, can you change the "label" for "span" or at least create an option for it ?

Hello!

It looks the calling disable does not have any visual effect, so it seems the something is wrong with the styling. Not working also on the demo - https://gitbrent.github.io/bootstrap4-toggle

Any clue how to fix it?

I use Elm and letter jquery play around with the dom can lead to problems. I like the styling but could not figure out how much of the javascript was doing essential thigns above and beyond adding/removing styles

when i hide toggle in a modal. and then make it visible again, the toggle will lose the css styles.

in code is:

<div class="custom-control custom-switch col-12 col-lg-4 pb-3 pb-lg-0">
  <input id="newsletter" type="checkbox" data-toggle="toggle" data-width="200" :data-on="$t('modal.newsletter_on')" :data-off="$t('modal.newsletter_off')" data-onstyle="success" data-offstyle="danger" v-model="newsletter">
</div>

befor DOM is:

<div class="custom-control custom-switch col-12 col-lg-4 pb-3 pb-lg-0">
  <div class="toggle btn btn-danger off" data-toggle="toggle" role="button" style="width: 200px; height: 0px;">
  <input id="newsletter" type="checkbox" data-toggle="toggle" data-width="200" data-on="Uudiskiri tellitud" data-off="Telli uudiskiri" data-onstyle="success" data-offstyle="danger">
  <div class="toggle-group">
    <label class="btn btn-success toggle-on">Uudiskiri tellitud</label>
    <label class="btn btn-danger toggle-off">Telli uudiskiri</label>
    <span class="toggle-handle btn btn-light"></span>
  </div>
</div>
</div>

after DOM is:

<div class="custom-control custom-switch col-12 col-lg-4 pb-3 pb-lg-0">
  <input id="newsletter" type="checkbox" data-toggle="toggle" data-width="200" data-on="Uudiskiri tellitud" data-off="Telli uudiskiri" data-onstyle="success" data-offstyle="danger">
</div>

I'm pretty new to javascript. so I need a little help with this.

I try to use this:

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

I will make a section of plans on my website, yearly and monthly.

You can see the example on this website: https://cangurohosting.com/hosting/

I need to start 1 div with a content and then when they click on the toggle then hide the first one and start the second one.

I hope you can understand me.

I installed the package through npm, but in the 3.6.1 version the bootstrap4-toggle.css is missing
From the package-lock.json:

wget https://registry.npmjs.org/bootstrap4-toggle/-/bootstrap4-toggle-3.6.1.tgz

x package/package.json
x package/CHANGELOG.md
x package/LICENSE
x package/README.md
x package/css/bootstrap4-toggle.min.css
x package/js/bootstrap4-toggle.min.js

any idea why? on github this file exists:
https://github.com/gitbrent/bootstrap4-toggle/blob/master/css/bootstrap4-toggle.css

thanks

EDIT: I install this on Mac, my coworkers use linux, after they install the package they have the unminified css file in the node_modules folder..

I'm applying the Toggle4Bootstrap UI to a checkbox control and the :checked event is not firing when I click the toggle button. The animation of the toggle works but the input checkbox is not being checked or unchecked.

Windows 10 - Chrome 76

Hi,
how can I change the cursor to default when the toggle is disabled?

style="cursor: default" don't do anything.

Arga

Should I add something to a modal php page when I add a toggle into the page? It didn't show the toggle properly until I added the CSS and script CDN. However, The toggle doesn't slide left or right.

Dear All,
The checkbox value received when we use this toggle checkbox into the form for on/off type selection, we get only value which is set when active/on and no value is received when deactive/off.

Example code:

when I submit this form and use "echo $_POST['check'] ;"
I get the "hello" only when i submit with "Online". If I submit with "Offline", no value is received.

Waiting for the reply.

It's the first time I use this library, and I noticed something a bit annoying: when a toggle is initialized, even if the corresponding checkbox is not checked, the toggle appears in the "on" position for a brief (but noticeable) moment, before "animating" to the off position.

I've capture a gif of this happening to show what I mean:

Is there a way to avoid this? It's confusing and unnecessary....

Anyway, thanks for any help and congrats on the library, apart from this small issue it's really great.