1
$('fltr1').onfocus = function() {
                    $('fltr1').setStyle({width: "auto"});
                }

Using Prototype.js, I'm trying to make an IE7 compatible dropdown menu box change width to auto when the user clicks it. As it is now, when the user clicks this box, it successfully expands it's width, but the box doesn't open until you click again, requiring 2 clicks. The first click expands, the second click opens the box allowing you to select an item. It's like the first click triggers the set width event, then stops everything else and forces the dropdown shut. I've tried onclick and it does the same thing, adjusts the width but closes the dropdown until you second click.

How can I stop this from requiring two clicks? What is causing the dropdown to close when setting the width?

VDH
  • 149
  • 11

1 Answers1

0

I don't think you can make this work with your current approach in IE7. When the browser repaints the select box it closes the dropdown. You'd think it would be possible to manually re-open it with the click event but that isn't possible with the native select box, see this discussion: How can you programmatically tell an HTML SELECT to drop down (for example, due to mouseover)?

As a workaround, you could move the resize to the mouseover event? Maybe for IE7 only if you want to preserve the behaviour in other browsers?

$('fltr1').onmouseover = function() {
    this.setStyle({width: "auto"});
}
Community
  • 1
  • 1
robC
  • 2,592
  • 1
  • 23
  • 28
  • This code is specifically for IE 7 and 8, it's placed within an "if IE<8" block. The issue is that in modern IE/chrome/FF/etc the box resizes as intended on its own, but IE7/8 it needs to be told to switch to auto when clicked to fit long text within it. – VDH Nov 01 '12 at 01:51
  • Probably a typo but I think you mean IE<=8? Using mouseover/out will work, not sure if that's what you wanted though :) – robC Nov 01 '12 at 09:55