Combobox width attribute

[galcott]

On the combobox, the width property doesn't seem to work. If I use this code:

Code:

<SELECT class='easyui-combobox' panelHeight='auto' label='Category' editable=false labelWidth=90 width=320>

the combo looks like this:

http://galcott.com/combo1.jpg

I have to use a style tag to get the width to work.

Code:

<SELECT class='easyui-combobox' panelHeight='auto' label='Category' editable=false labelWidth=90 style='width: 320px'>

Then it works properly like this:

http://galcott.com/combo2.jpg


That doesn't seem like the way it's supposed to work. Is there an issue with the width property?

[jarry]

Put these properties to the 'data-options' attribute.

Code:

<SELECT class='easyui-combobox' panelHeight='auto' label='Category' editable=false data-options="width:320,labelWidth:90">
</SELECT>

Or

Code:

<SELECT class='easyui-combobox' data-options="width:320,labelWidth:90,label:'Category',editable:false,panelHeight:'auto'">
</SELECT>

If you really want to use the 'width' attribute on the element, please override the $.fn.combobox.parseOptions function to support it.

Code:

<script type="text/javascript">
	(function($){
		var oldParser = $.fn.combobox.parseOptions;
		$.fn.combobox.parseOptions = function(target){
			return $.extend({}, 
				$.parser.parseOptions(target, [{width:'number'},{height:'number'}]), 
				oldParser.call(this,target)
			);
		}
	})(jQuery);
</script>

Now the code below works well.

Code:

<SELECT class='easyui-combobox' panelHeight='auto' label='Category' editable=false labelWidth=90 width=320>
</SELECT>