Disappearing ExtJS buttons in IE 6

I officially hate IE6 and know the reason why now, ExtJS. Working with this library has opened my eyes to the deficiencies in the browser. Enough has been said on the topic so let me get to the meat of the matter.I spent a crazy amount of time figuring out why one button i was trying to set up would not display in IE6. It would some some kind of image, but would only show the entire button when the button was hovered on with the mouse. I tried setting the width, the height, the line height with no results. Here is how i was trying to set up my button:


var lookupButton = new Ext.Button({
text:'Lookup',
style:'float:right'
})

Doing so, i got an error in IE6 that stated:

el.owner.createDocument.createRange Object doesn’t support this property or method.

It turns out this is a bug in IE where trying to insert a block level element after a plain text creates this error. The solution for me was to add a span around the text i was creating like:


{
width: this.displayWidth,
html: '<span>' +  String(this.value) + '</span>'

}

Hope it helps!

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s