[SOLVED] Sliding effect of Toggle

1

Hi!
In some parts of the application, the sliding effect of the Toggle switch does not work.

in this code is sliding effect:

<li>
  <div class="item-content">
    <div class="item-inner">
      <div class="item-title">Title</div>
      <div class="item-after">
        <label class="toggle toggle-init">
          <input type="checkbox" id="alone">
          <span class="toggle-icon"></span>
        </label>
      </div>
    </div>
  </div>
</li>

in this code sliding effect is out:

<li class="vb" data-key="1" data-ves="1">
  <div class="item-content">
    
    <div class="item-media">
      <div class="photo"></div>
    </div>   
    
    <div class="item-inner">
      <div class="item-title-row">
        
        <div class="item-title">
          <div class="strlong">text</div>
          <div class="strlong2">text2</div>
        </div>
        <div class="item-after" style="display:block; margin-left:1em">
          <div class="strlong2">text3</div>
          <label class="toggle toggle-init">
            <input type="checkbox" class="menu" id="1" value="0">
            <span class="toggle-icon"></span>
          </label>
        </div>
      
      </div>
    </div>
  
  </div>
</li>

What could be the problem?

(I use v4.5.0)

2

Do you have a live example or JS Fiddle? I guess the problem not in layout but in usage

3

yes, that link https://calcmenu.ru/myrestoran/

4

Because you just added that content manually with $$('#menu_list').html(html); In this case you need to init toggles after you added them to DOM with app.toggle.create https://framework7.io/docs/toggle.html#toggle-app-methods

Or use VDOM and this will be done automatically https://framework7.io/docs/router-component.html#virtual-dom

5

Thank you very much!