toggleDevice doesn't scale with length of text

[neandr]

bootstrap-toggle "toggleDevice" generates width:0px only. It's not scaling correctly for the text length of data-on/data-off. The code used:

<div class="muteOp">
    <span > <span id="deviceLabel1">##title##</span>
        [<span id="mutedIp">XX</span>.<span id="mutedCh">YY</span>]
        'Mute' schalten
    </span>
    <input class="toggleDevice" id="toggleMute" checked
        data-toggle="toggle"
        data-size="small"
        data-on="Muted" data-off="Normal"
        data-onstyle="default" data-offstyle="default"
        type="checkbox" />
</div>

This generates:

<div class="muteOp">
   <span> <span id="deviceLabel1">FlurDecke</span>
     [<span id="mutedIp">XX</span>.<span id="mutedCh">YY</span>]
      'Mute' schalten
   </span>
   <div class="toggle btn btn-sm btn-default off" 
    data-toggle="toggle" style="width: 0px; height: 0px;">
    <input class="toggleDevice" id="toggleMute" 
        checked="" data-toggle="toggle" 
        data-size="small" data-on="Muted" data-off="Normal" 
        data-onstyle="default" data-offstyle="default" 
        type="checkbox">
    <div class="toggle-group">
        <label class="btn btn-default btn-sm toggle-on">Muted</label>
        <label class="btn btn-default btn-sm active toggle-off">Normal</label>
        <span class="toggle-handle btn btn-default btn-sm"></span>
    </div>
  </div>
 </div>

To get it better using ... this hack could do it

$(document).ready(function() { 
     $('#muteOp')[0].children[1].setAttribute('style',"width:80px")
}

... but should be better?!

Version used: Toggle.VERSION = '2.2.0'

[StevenMapes]

I have a similar issue where I have bootstrap tabs (11 of them) with a various amount of toggles on each tab. When the page loads the first tab appears fine and the style of the div that is generate sets the correct width. However if you change tabs, or inspect in the code, all the toggles on the other tabs have are rendered as <div class="toggle btn btn-success" data-toggle="toggle" role="button" style="width: 0px; height: 0px;">

[neandr]

@Steven Did you tried to use the $(document).ready(function() { } mentioned with my post? Just looked into my code again, there I added

  // The text length of data-on/data-off on the 'modal' cannot be
  // calculated as long as it is not open, so it is set to 'width:0px';
  // When the modal is opened, the 'style' is calculated:
  $('#mutedOp')[0].children[1].setAttribute('style',"width:80px")

(also to remind myself about the issue ;) )

.. but still waiting for another, better solution ...

[StevenMapes]

Yeah I ended up fixing it by simply adding these CSS classes to set the height and width that I need

    .tab-pane .toggle, .modal .toggle{
        min-width: 75.1791px !important; height: 35.597px !important;
    }