[BUG] Issue inside a collapse don't render well

[x9prototype]

Describe the bug A toggle inside of a collapsed element does not work properly.

To Reproduce Steps to reproduce the behavior and minimal code:

I used haml but essentially just place a toggle inside a bootstrap collapsible panel

.mb-3
  %label.form-check-label{for: 'toggle1'} Toggle shows properly here
  %input.survey_toggle{type: 'checkbox', name: 'toggle1', 'data-bs-toggle': 'toggle'}
.mb-3
  %a.btn.btn-primary{'data-bs-toggle': 'collapse', href: '#collapseElement', role: 'button', 'aria-expanded': false, 'aria-controls': 'collapseElement'} Toggle Collapse
  #collapseElement.collapse.in
    %label.form-check-label{for: 'toggle2'} Toggle doesn't show properly here
    %input.survey_toggle{type: 'checkbox', name: 'toggle2', 'data-bs-toggle': 'toggle'}

This generates the following HTML after the page loads

<div class="mb-3">
  <label class="form-check-label" for="toggle1">Toggle shows properly here</label>
  <div class="toggle btn btn-secondary off" data-toggle="toggle" role="button" tabindex="0" style="min-width: 62.9167px; min-height: 38px;"><input class="survey_toggle" data-bs-toggle="toggle" name="toggle1" type="checkbox"><div class="toggle-group"><span class="btn btn-primary toggle-on">On</span><span class="btn btn-secondary toggle-off">Off</span><span class="toggle-handle btn"></span></div></div>
</div>
<div class="mb-3">
  <a aria-controls="collapseElement" class="btn btn-primary" data-bs-toggle="collapse" href="#collapseElement" role="button" aria-expanded="true">Toggle Collapse</a>
  <div class="in collapse show" id="collapseElement" style="">
    <label class="form-check-label" for="toggle2">Toggle doesn't show properly here</label>
    <div class="toggle btn btn-secondary off" data-toggle="toggle" role="button" tabindex="0" style="min-width: 0px; min-height: 0px;"><input class="survey_toggle" data-bs-toggle="toggle" name="toggle2" type="checkbox"><div class="toggle-group"><span class="btn btn-primary toggle-on">On</span><span class="btn btn-secondary toggle-off">Off</span><span class="toggle-handle btn"></span></div></div>
    </div>
  </div>
</div>

// Using jquery, but basically just on page load trigger the toggles
$(function() {
  $('.survey_toggle').bootstrapToggle();
});

Expected behavior In bootstrap4-toggle, all the toggles would show properly, in this version toggles that are inside a collapse element have incorrect height and width applied and so they show really tiny.

Screenshots

Package: (please complete the following information)

• Bootstrap 5 Toggle version: 5.0.6
• Bootstrap version: 5.0

Desktop: (please complete the following information)

• OS: MacOS
• Browser: Firefox 102, Chrome 114
• Version: [e.g. 22]

Additional context Add any other context about the problem here.

[github-actions[bot]]

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

[palcarazm]

Hi,

The issue has not a simple solution. The size of the toggle is calculated when is render. I will try to expose render method, so you can update the render when the parent collapse state change.

[RubbelDeCatc]

The issue occurs also if you are using the script in a modal box. $toggleOn.outerWidth() and .outerHeight() is still 0

[palcarazm]

Hi @RubbelDeCatc and @x9prototype,

A new API method will be added to the next version that will allow re-rendering the toggle in order it has the appropriated size.

So when the parent element change drastically the appearance (collapse, modals...) you can dispatch the new method from JS.

I know it's a bit late.