[HELP] Toggle Not Rendering, Shows Checkbox

[Major-Mike]

I am not sure if this is a bug or not, so I am asking for help to confirm.

I am on ASP.net Core 6 Razor Pages, Bootstrap v5.3.2, latest release of BS5-Toggle. Following the exact instructions provided on https://palcarazm.github.io/bootstrap5-toggle/#usage-1 resulting in this basic markup:

<div class="col-6">
    <input type="checkbox" id="isLockedOut" data-toggle="toggle" data-size="lg" data-onstyle="danger" data-onlabel="Locked Out" data-offlabel="Unlocked" data-style="quick" data-onvalue="true" data-offvalue="false" aria-required="true" @(Model.IsLockedOut ? "checked" : "") />
</div>

and the result is this:

can anyone see a problem or suggest a solution? thank you.

[github-actions[bot]]

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

[SnakeME]

Same issue here, not found a solution yet...

[palcarazm]

Hi,

I'm not in asp.net, I can't help you.

The issue is the js is been executed when the checkbox haven't been already render by asp.net.

I don't know if we can schedule de js to be launch when asp.net had finished.

[Major-Mike]

@palcarazm ASP.net is nothing special in that regard, CSS and scripts are loaded client side and is simple HTML, only the event management server side is what can be "in limbo". Unfortunately I had to meet a deadline and decided to just use the default toggle that is in Bootstrap 5. But I'd like to use this in the future so a solution would be appreciated.

Also, to add, I did a very very stripped down code for the toggle and it worked, but in the full context of Bootstrap added, it fails. I didn't think they would be relevant to each other, perhaps a CSS is overriding it? Missing an !important somewhere maybe? Not sure, just thinking out loud.

[palcarazm]

Hi @Major-Mike ans @SnakeME ,

It seems that asp.net throws the "loaded" event before all the components or sections have actually been loaded.

This assumes that the autorender included in the library is triggered prematurely (when your checkboxes are not yet in the DOM).

The solutions I can think of involve rendering by hand.

Here a simulation : https://codepen.io/palcarazm/pen/poBqzwj

Either by giving your checkbox the attributes in the HTML and launching the manual rendering from the same file where your checkbox is generated:

<div class="col-6">
    <input type="checkbox" id="my-unique-id" data-toggle="toggle" data-size="lg" data-onstyle="danger" data-onlabel="Locked Out" data-offlabel="Unlocked" data-style="quick" data-onvalue="true" data-offvalue="false" aria-required="true" @(Model.IsLockedOut ? "checked" : "") />
</div>
<script>
     document.getElementById("my-unique-id").bootstrapToggle();.
</script>

Either by directly generating the element from JS in the file where the toggle should be:

<div class="col-6">
    <input type="checkbox" id="my-unique-id" aria-required="true" @(Model.IsLockedOut ? "checked" : "") />
</div>
<script>
      document.getElementById("my-unique-id").bootstrapToggle({
              onlabel: "Locked Out",
          offlabel: "Unlocked",
          onstyle: "danger",
          onvalue: "true",
          offvalue: "false",
          size: "lg",
          style: "quick"
        });
</script>

Sorry for the late solution. I had to attend to other projects.