What I want,
- When I have a drop down box on a screen it should be size=1.
- When I click on the drop down box, ALL values should be displayed
- When I click on a value in the drop down box, the value should be selected and the drop down box should close (to size=1)
The above works great if there are 11 or less items in your drop down box. If there are more then a scrollbar will be shown on the right side. I do not wish the scrollbar to appear, I want to show all values without the need to scroll.
I managed a sorta workaround but I lose the functionality of the drop down box, that the values of the drop down box appear above the screen without altering the layout of the screen.
So I want best of both worlds: all values should appear in the dropped down box when I click on it without altering the layout of the page it is on
I can best explain it with my examples:
Expand|Select|Wrap|Line Numbers
- <html>
- <body>
- <form action="">
- TEST1
- <select name="cars" >
- <option value=" "> </option>
- <option value="volvo">Volvo</option>
- <option value="saab">Saab</option>
- <option value="fiat">Fiat</option>
- <option value="audi">Audi</option>
- <option value="audi">Audi2</option>
- <option value="audi">Audi3</option>
- <option value="audi">Audi4</option>
- <option value="audi">Audi5</option>
- <option value="audi">Audi6</option>
- <option value="audi">Audi7</option>
- <option value="audi">Audi8</option>
- <option value="audi">Audi9</option>
- <option value="audi">Audi10</option>
- <option value="audi">Audi11</option>
- <option value="audi">Audi12</option>
- </select></p>
- TEST2
- <select name="cars" onClick="size=1" onMouseOver="size=16" onMouseOut="size=1"
- >
- <option value=" "> </option>
- <option value="volvo">Volvo</option>
- <option value="saab">Saab</option>
- <option value="fiat">Fiat</option>
- <option value="audi">Audi</option>
- <option value="audi">Audi2</option>
- <option value="audi">Audi3</option>
- <option value="audi">Audi4</option>
- <option value="audi">Audi5</option>
- <option value="audi">Audi6</option>
- <option value="audi">Audi7</option>
- <option value="audi">Audi8</option>
- <option value="audi">Audi9</option>
- <option value="audi">Audi10</option>
- <option value="audi">Audi11</option>
- <option value="audi">Audi12</option>
- </select></p>
- </form>