IE7 Option Tag width

Ever notice in ie7 the option tag width will not match the size of the select element? There really is no good way around this other than fooling the element to spread eagle and back. The script below will do all that for you… Unobtrusively condensed in a singleton pattern.

Another goody I added was measuring the length of the text with in the option tag. The script works a pretty good match in setting a corresponding width for the selected element. The script relies on prototype and lowpro to do the event binding and other DOM joys... like resetting to default size.


measureSelect=Behavior.create({
	initialize: function(obj) {
		// Adjusts the lentgh of the select element  
		// in ie7 to allow for all text to be displayed
 		isIE = (navigator.appVersion.search(/MSIE\s7.0/) != -1) ? true : false
	},
	onmousedown: function(){
		el =this.element.id+'_sel';
		el_width = this.element.getWidth();
		if(!$(el)){this.storeEl(el_width)}
		this.clickEvent(this.setWidth())
	},
	onblur: function(){
		this.clickEvent($(el).readAttribute('curwidth'));
	},
	onchange: function(){
		this.clickEvent($(el).readAttribute('curwidth'));
	},
	clickEvent: function(optWidth){
		if(isIE && this.optLen()){$(this.element.id).setStyle({width: optWidth })}
	},
	optTextLen: function(){
		opts = this.element.childElements();
		strLen = opts.collect(function(s){ return s.text.length })
		return strLen.max();
	},
	setWidth: function(){
		selWidth = this.optTextLen();
		return (selWidth * 7);
	},
	optLen: function(e){
		if(this.optTextLen() > 25){ return true } else {return false}
	},
	storeEl: function(ew){
		if(!this.element.getWidth()==0){
			$('contents').insert({after: new Element("span",{'curwidth':ew,'id':this.element.id + '_sel'})  })
		}
	}
	
});


Event.addBehavior({
  'select': measureSelect()
});