Size error on render hidden checkbox

[edika99]

I'm trying to render the toggle on an hidden checkbox and the result is that the tooggle is of the wrong size and no text inside is shown.
I've found the the applied style on the div is

style="width: 0px; height: 0px;"

Is there a way to render an hidden checkbox in the proper size?

Thanks

[github-actions[bot]]

Hi! 👋
Thanks for your issue. You are helping to improve Bootstrap 5 toggle.

[palcarazm]

Hi @edika99

Can you provide me a minimal html code for reproduce de issue?

Thanks

[edika99]

Take a look at this codepen

https://codepen.io/edika99/pen/rNeraJE

Look at the different rendeirng size of the hidden checkbox and the normal one. Click on the second toggle to show the hidden checkbox and compare the two size.

[palcarazm]

I see the issue. I think forcing render again will works. I'll send you a solution as soon as possible. 😊

[g-pane]

Hi,
First, many thanks for this library, is very useful.

I have the same problem with a very similar scenario, i'm using the ecmas version

I have my main div hidden by default:
<main class="page-content d-none">

In this div there are also the bootstrap 5 toggles

After some operation, i'll remove the d-none:
document.querySelector('main').classList.remove('d-none')

And, after showing the main, i'll inizialize the library like documented:
document.querySelectorAll('input[type=checkbox][data-toggle="toggle"]').forEach(function (ele) { ele.bootstrapToggle(); })

So, in theory, i'll inizialize the library AFTER removing the d-none from the div but the result is the same of the OP. The toggles div have style="width: 0px; height: 0px;"

With programmaticaly d-none added and removed:

<div class="toggle btn btn-sm btn-success" tabindex="0" style="width: 0px; height: 0px;">

Without d-none applied at all on the main:

<div class="toggle btn btn-sm btn-success" tabindex="0" style="width: 80.25px; height: 31px;">

I have try to put the .bootstrapToggle() in different place, before, after, with setTimeout, and so on... Nothing have worked except remove the d-none from the main div

If i need to open another issue, tell me.
I'll wait for a solution, thanks!

[palcarazm]

Hi @g-pane,

Is the same problem so a new issue is not needed 😊.

In fact, the toggle height and width is calculated considering the max calculated render size of each toggle element (on or off elements).

When the original checkbox is hidden, the calculated render size is 0px.

I'll give you a workaround as soon as possible, and look for a fix for the next version.

[g-pane]

Ok thanks! But i don't understand (the technical reason) why if i'll inizialize the library after i'll remove the d-none the result is the same as the OP. In his case was hidden, in mine was hidden but showed before the inzialization

[palcarazm]

Ok thanks! But i don't understand (the technical reason) why if i'll inizialize the library after i'll remove the d-none the result is the same as the OP. In his case was hidden, in mine was hidden but showed before the inzialization

Hi @g-pane, the lib script render all the toggle on document ready, so I imagine the d-none is set before the toggle render.

[palcarazm]

Hi @edika99 and @g-pane,

I let you a code pen with 2 workarounds for this issue.

Work around 1: render on show

Skip render on load with data attribute data-toggle="skip-toggle" and render the toggle on show with:

$('#my-selector').onclick((e)=>{
  // Add display to element
  $('#my-toggle').bootstrapToggle();
});

Work around 2: destroy and render on show

Destroy and render the toggle on show with:

$('#my-selector').onclick((e)=>{
  // Add display to element
  $('#my-toggle').bootstrapToggle('destroy');
  $('#my-toggle').bootstrapToggle();
});

I'll look for a better fix for the issue, but for the moment I think it can be a good solution.

[g-pane]

I have used the first "workaround" version. For ECMAS version, this is the correct code for all the toggles.

document
  .querySelectorAll('input[type=checkbox][data-toggle="skip-toggle"]')
  .forEach(function (ele) {
    ele.bootstrapToggle();
  });

I think you can make a sort of "refresh" function, for example made in this way:

1. Change the data-toggle from "toggle" to "skip-toggle" (using .toggle or .remove + .add in javascript)
2. Use the function above
3. Restore the original data-toggle