Toggle smaller when loaded in hidden div

[Voorsie]

When using toggles that shown after showing a div (that was hidden initially), the toggle is smaller than normal.

When removing the initial 'hidden state', the toggles are the same size as expected.

Check this JSFiddle for a 'working' example

[nietha]

I have fixed this issue by using the outerwidth trick by cloning the hidden element

var width = this.options.width || Math.max($toggleOn.outerWidth(), $toggleOff.outerWidth()) + ($toggleHandle.outerWidth() / 2)

    // outerwidth fix for hidden elements
    if (width == 0) {
        width = this.options.width || Math.max(getOuterWidth($toggleOn), getOuterWidth($toggleOff)) + (getOuterWidth($toggleHandle) / 2)            
    }

function getOuterWidth(obj) {
if ($(obj).length == 0) {
return false;
}

    var clone = obj.clone();
    clone.css({
        visibility: 'hidden',
        width: '',
        height: '',
        maxWidth: '',
        maxHeight: ''
    });
    $('body').append(clone);
    var width = clone.outerWidth();
    clone.remove();
    return width;
}

[GarethBlain]

I have used a modified version of this to create a pull request...
#114