Toggle lost css

[Tiitus007]

when i hide toggle in a modal. and then make it visible again, the toggle will lose the css styles.

in code is:

<div class="custom-control custom-switch col-12 col-lg-4 pb-3 pb-lg-0">
  <input id="newsletter" type="checkbox" data-toggle="toggle" data-width="200" :data-on="$t('modal.newsletter_on')" :data-off="$t('modal.newsletter_off')" data-onstyle="success" data-offstyle="danger" v-model="newsletter">
</div>

befor DOM is:

<div class="custom-control custom-switch col-12 col-lg-4 pb-3 pb-lg-0">
  <div class="toggle btn btn-danger off" data-toggle="toggle" role="button" style="width: 200px; height: 0px;">
  <input id="newsletter" type="checkbox" data-toggle="toggle" data-width="200" data-on="Uudiskiri tellitud" data-off="Telli uudiskiri" data-onstyle="success" data-offstyle="danger">
  <div class="toggle-group">
    <label class="btn btn-success toggle-on">Uudiskiri tellitud</label>
    <label class="btn btn-danger toggle-off">Telli uudiskiri</label>
    <span class="toggle-handle btn btn-light"></span>
  </div>
</div>
</div>

after DOM is:

<div class="custom-control custom-switch col-12 col-lg-4 pb-3 pb-lg-0">
  <input id="newsletter" type="checkbox" data-toggle="toggle" data-width="200" data-on="Uudiskiri tellitud" data-off="Telli uudiskiri" data-onstyle="success" data-offstyle="danger">
</div>

[gitbrent]

Hi @Tiitus007

There must be some other factors at work here as merely hiding and showing the toggle doesn't cause any loss.

Hide:

Show: