I have the select shown in the graphic for a Join Day. It shows 20 visible days and has 21 to 31 not visible but you can scroll down to them. Because of the layout of the page the select goes up instead of down - looks strange.
With this in mind can I limit the number of visible select options to say 10? Eg: show 01 to 10 and have 11 to 31 hidden but available for selection.
can this be done?
thx
Actually there is a little hack that can achieve this weird lack of possibility to choose the number of items displayed at the SELECT TAG.
1 -
Let’s say we want a SELECT displaying a maximum number of 10 items. Adding the following js events to your SELECT TAG will achieve this goal:
onfocus='this.size=10;'
onblur='this.size=1;'
onchange='this.size=1; this.blur();'
This will trick your SELECT giving it the desired effect turn it to a sized SELECT.
2 –
Let’s say that at certain point there are less than the maximum 10 items we want to display.
Assuming you are getting your SELECT from a SQL query you can do something like the following: Once you know how many rows your query has you can include the next sentence to the loop
if($nRow<10){
$nRowSelect=$nRow+1;
}
else{
$nRowSelect=10;
}
So if there are less than 10 rows at every loop it allocates the desired number of rows it is going to display.
onfocus='this.size=$nRowSelect;'
onblur='this.size=1;'
onchange='this.size=1; this.blur();'
3 –
Buggy behavior displacing elements. Since this hack replaces a common SELECT with a ‘sized’ one it takes the space it needs displacing content, not like a common SELECT which overlaps the content below it. To prevent this from happening if the SELECT is going to be placed let’s say into a TD TAG you can first place it in a DIV with the following style:
position:absolute;
z-index:1;
This will let the sized SELECT overlap the content below it as if it were a common SELECT.
Add attribute size to <select>:
<select style=" width:100px;" size="2">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
The behavior depends on the browser and cannot he controlled by the author. You can use the size=10 attribute in the element, but it also changes the menu to a listbox so that 10 options will be visible even when the menu is not focused on. To achieve the behavior you describe, you would need to build your own controls using JavaScript and CSS.
From the usability point of view, a text input box is usually preferable to a menu when a day of a month is to be chosen. It is more convenient to type one or two digits than to select from a list of 30 or so items.
