Improper cloned Bootstrap5-toggle element has wrong size

[SoftCircuits]

Some time ago, I reported this issue where the control didn't size correctly. You were kind enough to do update v5.0.6, which fixed that issue. However, that change may have broken some other code we had.

Our other code clones a bootstrap5-toggle element. This was working fine. But now, the cloned element does not have the correct height.

I have created a CodePen that specifically demonstrates the issue.

If you could assist with a fix or workaround, I would greatly appreciate it.

[github-actions[bot]]

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

[palcarazm]

Hi, I will take a look ASAP.

[SoftCircuits]

@palcarazm Hello, just a friendly follow up. Have you had any chance to take a look at this issue yet? Thanks.

[palcarazm]

Hi @SoftCircuits

I didn't find the root cause. I will keep debugging this weekend

[palcarazm]

Hi @SoftCircuits,

I found the issue.

If the clone is not added to the html the min height is set to 0px. Just inverse tne append of the clone and render of the toggle.

Here a fork of your codepen with the fix

And a minimal reproduction code (in case someone else need it)

<main class="container bg-white px-3 py-3 rounded">
    <p>
        Click the button to clone the toggle control container.
    </p>

    <div id="source" class="row">
        <div class="col-md-3">
            <div class="mb-3 source-type">
                <input id="toggle-control" type="checkbox" class="form-control" data-toggle="toggle"
                    data-offlabel="Railcar" data-onlabel="Storage" data-offstyle="success" data-onstyle="danger"
                    data-width="100%" checked="@(isStorage ? " checked" : null)">
            </div>
        </div>
    </div>

    <div id="target"></div>

    <button class="btn btn-outline-secondary" id="clone">Clone</button>
</main>

$("#clone").on("click", function () {
  var $source = $("#source");
  // Clear bootstrap toggle before cloning
  var $ctl = $source.find("input");
  $ctl.bootstrapToggle("destroy");
  // Clone source
  var $clone = $source.clone(true, true);
  // Restore original control
  $ctl.bootstrapToggle();
  // Append clone
  $("#target").append($clone);
  // Enable bootstrap toggle for clone
  $ctl = $("#target").find("input");
  $ctl.bootstrapToggle();
});

[SoftCircuits]

@palcarazm Thanks, that seems to work now.

Sorry for you having to look into this if it wasn't a bug. It's just that this code was working before the other change.

Glad to have a fix on my end. Thanks again.

[palcarazm]

@SoftCircuits, don't worry. Just a refacto had changed the way of rendering the toggle and your code was broken.