[BUG] Issue inside a collapse don't render well
Closed this issue · 4 comments
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.
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.
Hi! 👋
Thanks for your issue. You are helping to improve Bootstrap 5 toggle.
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.
The issue occurs also if you are using the script in a modal box.
$toggleOn.outerWidth() and .outerHeight() is still 0
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.