From 17ffe5772e17eb615d4eae8e6a159a20f2ab3332 Mon Sep 17 00:00:00 2001 From: Kevin Miller Date: Wed, 18 Jul 2012 10:25:32 -0500 Subject: [PATCH] container receives width style when hidden input has one or via opt Signed-off-by: Igor Vaynberg --- select2.js | 50 +++++++++++++++++++++++++++++++++++--------------- 1 file changed, 35 insertions(+), 15 deletions(-) diff --git a/select2.js b/select2.js index 294d779c..2be3e50a 100755 --- a/select2.js +++ b/select2.js @@ -1114,7 +1114,7 @@ var style, attrs, matches, i, l; // see if there is width specified in opts - if (this.opts.width !== undefined) + if (this.opts.width !== undefined && this.opts.width !== 'copy') return this.opts.width; // next check if there is inline style on the element that contains width @@ -1129,23 +1129,38 @@ } } - // next check if css('width') can resolve a width that is percent based, this is sometimes possible - // when attached to input type=hidden or elements hidden via css - style = this.opts.element.css('width'); - if (style.indexOf("%") > 0) return style; + if (this.opts.width !== 'copy') { + // next check if css('width') can resolve a width that is percent based, this is sometimes possible + // when attached to input type=hidden or elements hidden via css + style = this.opts.element.css('width'); + if (style.indexOf("%") > 0) return style; - // finally, fallback on the calculated width of the element - return (this.opts.element.width() === 0 ? 'auto' : this.opts.element.outerWidth() + 'px'); - } + // finally, fallback on the calculated width of the element + return (this.opts.element.width() === 0 ? 'auto' : this.opts.element.outerWidth() + 'px'); + } + + return null; + }, + + /** + * Set the width for the container element. + **/ + setContainerWidth : function(container) { + var width = this.getContainerWidth(); + + if (!width) return; + + container.attr('style', "width: " + width); + } }); SingleSelect2 = clazz(AbstractSelect2, { // single - createContainer: function () { - return $("
", { - "class": "select2-container", - "style": "width: " + this.getContainerWidth() + + createContainer: function () { + var container = $("
", { + "class": "select2-container" }).html([ " ", " ", @@ -1158,6 +1173,8 @@ "
    " , "
" , ""].join("")); + + this.setContainerWidth(container); }, // single @@ -1456,9 +1473,8 @@ // multi createContainer: function () { - return $("
", { - "class": "select2-container select2-container-multi", - "style": "width: " + this.getContainerWidth() + var container = $("
", { + "class": "select2-container select2-container-multi" }).html([ "