0

I have a really simple question.

I have a dropdown. It contains text that is wider than its basic size. In IE it won't be wide enough to see the whole text. The solution is, when I click on the dropdown, I increase the size to what I need.

 onfocus="this.style.width='320px';"

and will go back to its original size after it has lost focus:

onblur="this.style.width='150px';"

And now the problem: If I click on the input, the size will be increased, but it will not open down the list immediately. It needs an other click to do that.

How can I increase the size, and open the list at the same time?

EDITED

So guys, the problem is, when you clicked on the dropdown, the size changed, and under IE8 the options won't shown. There wasn't dropped down. This is what I need. I don't want to do it on hover.

jQuery and other libraries are not option. I have to do with native JS.

gitarvandor
  • 101
  • 2
  • 9

3 Answers3

0

try something like :

onclick="this.style.width='320px';"

I hope that this will help you.

Francois Borgies
  • 2,378
  • 31
  • 38
  • This is basically the same as the onfocus-event of the OP and does not solve his issue. – acme Mar 11 '13 at 09:05
0

I guess your overriding the standard onfocus functionality, try hover events instead maybe?

Tom Riley
  • 1,701
  • 2
  • 21
  • 43
0

Do you really need js to achieve this? I assume each element of your dropdown is a link. From css1 on, links have had pseudo-class selectors matching your needs (a:link, a:visited, a:hover, a:active, a:focus). Hope this helps.

c4lm0s
  • 1