Hello all, I found a slight problem that is puzzling me
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:
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:
Code:
<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>
Comment