After looking around the internet for a while I finally came across these 3 solutions. Since Blackberry doesn’t have jQuery (we currently use an older version of mootools) and I needed a quick fix I ended up going with the behavior option. However, users need to have their internet security settings on “medium-low” for IE 6 to render it properly. It’s not the perfect solution but then I suppose there really isn’t one for IE 6. I tried writing a solution within mootools for the problem but in the 5 minutes I spent on it, I noticed it would have overlapped other form elements and I wasn’t going to spend extra time messing with z-index.
- jQuery Select Dropdown Cut Off Solution
- Behavior based Select Dropdown Cut Off Solution
- Doug Boude inline javascript solution
Here’s my quick mock up code for mootools if anyone is curious:
for(var i=0;i< $$('select').length;i++) {
$$('select')[i].addEvent('mouseenter', function () {
this.setProperty('rel',this.getStyle('width'));
this.setStyle('width','auto');
});
$$('select')[i].addEvent('mouseleave', function () {
this.setStyle('width',this.getProperty('rel'));
});
}
And here was the behavior solution:
<!--[if IE]>
<mce :style type="text/css">< !
select {
behavior:expression(window.dropdown_menu_hack!=null?window.dropdown_menu_hack(this):0);
}
-->
<script src="dropdown_menu_hack.js" type="text/javascript"><!--mce:0--></script>
< ![endif]-->
</mce>
