Skip to content

Commit 46ca860

Browse files
committed
Toggle smaller when loaded in hidden div
See: minhur#114 minhur#106
1 parent 63b042c commit 46ca860

File tree

3 files changed

+32
-2
lines changed

3 files changed

+32
-2
lines changed

js/bootstrap-toggle.js

+30
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,16 @@
7676

7777
var width = this.options.width || Math.max($toggleOn.outerWidth(), $toggleOff.outerWidth())+($toggleHandle.outerWidth()/2)
7878
var height = this.options.height || Math.max($toggleOn.outerHeight(), $toggleOff.outerHeight())
79+
80+
// Outerwidth/height fix for hidden elements
81+
if (width == 0 || height == 0) {
82+
var toggleOnSize = getOuterSize($toggleOn);
83+
var toggleOffSize = getOuterSize($toggleOff);
84+
var toggleHandleSize = getOuterSize($toggleHandle);
85+
width = this.options.width || Math.max(toggleOnSize.width, toggleOffSize.width) + (toggleHandleSize.width / 2);
86+
height = this.options.height || Math.max(toggleOnSize.height, toggleOffSize.height) + (toggleHandleSize.height / 2);
87+
}
88+
7989
$toggleOn.addClass('toggle-on')
8090
$toggleOff.addClass('toggle-off')
8191
this.$toggle.css({ width: width, height: height })
@@ -86,6 +96,26 @@
8696
this.update(true)
8797
this.trigger(true)
8898
}
99+
100+
function getOuterSize(obj) {
101+
if ($(obj).length == 0) {
102+
return false;
103+
}
104+
105+
var clone = obj.clone();
106+
clone.css({
107+
visibility: 'hidden',
108+
width: '',
109+
height: '',
110+
maxWidth: '',
111+
maxHeight: ''
112+
});
113+
$('body').append(clone);
114+
var width = clone.outerWidth();
115+
var height = clone.outerHeight();
116+
clone.remove();
117+
return {width: width, height: height};
118+
}
89119

90120
Toggle.prototype.toggle = function () {
91121
if (this.$element.prop('checked')) this.off()

js/bootstrap-toggle.min.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

js/bootstrap-toggle.min.js.map

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)