WinJS.UI.ToggleSwitch doesn't render properly without inline-block display style

[mseminatore]

I've noticed that placing a toggleSwitch inside a div that has custom-styling (e.g. w3-center) causes the toggle switch title to render incorrectly. I found the title text only renders correctly if display: inline-block is set. So it seems like win-toggleswitch wants display: inline-block!important set by default.

You can see this in Try WinJS by changing the HTML to the following:

<div style="text-align:center!important">
            Turn on/off
            <div class="detail">
                checked: true
            </div>
            <div id="wifiToggle" data-win-control="WinJS.UI.ToggleSwitch" data-win-options="{title: 'WiFi', checked: true, onchange: toggleWifi}">
            </div>
            <div class="detail">
                title: 'GPS'
            </div>
            <div data-win-control="WinJS.UI.ToggleSwitch" data-win-options="{title: 'GPS'}">
            </div>
            Customize on/off label
            <div class="detail">
                in Chinese<br />
                labelOn: '&#24320', labelOff: '&#20851'
            </div>
            <div data-win-control="WinJS.UI.ToggleSwitch" data-win-options="{title: 'Bluetooth', labelOn: '&#24320', labelOff: '&#20851'}">
            </div>
            Disable
            <div class="detail">
                disabled: true
            </div>
            <div data-win-control="WinJS.UI.ToggleSwitch" data-win-options="{title: 'BitLocker', checked: true, disabled: true}">
            </div>
</div>