Controlling HTML SELECT vertical scroll bars

[Matthew Cox]

Hi,

I've been searching the net all day today trying to figure out how one
would accomplish what I originally thought would be a fairly straight
forward and simple thing. The problem I'm trying to solve is that the
designer would like to limit the total number of entires shown when
you click on the drop-down arrow of a select box. I'm starting to
think that this isn't possible.

I've tried the following with no luck:

- Setting the height attribute on the select element
- Setting a style height for the select attribute
- Modifying the same through Javascript
- Setting the style overflow-y to scroll
- Setting the size of the select element

At some point in my browsing someone claimed that the vertical scroll
bars are controlled by the OS/Browser and there are no ways to change
this using JS or CSS. That the magic number of IE is 30 entries before
the vertical scroll bar shows up.

That's where I'm at right now. Can anyone help shed some light on this?

 

[Thomas 'PointedEars' Lahn]

The problem I'm trying to solve is that the designer would like
to limit the total number of entires shown when you click on
the drop-down arrow of a select box. I'm starting to think that
this isn't possible.

You're right.


PointedEars

 

[Jeremy]

Hi,

I've been searching the net all day today trying to figure out how one
would accomplish what I originally thought would be a fairly straight
forward and simple thing. The problem I'm trying to solve is that the
designer would like to limit the total number of entires shown when
you click on the drop-down arrow of a select box. I'm starting to
think that this isn't possible.

I've tried the following with no luck:

- Setting the height attribute on the select element
- Setting a style height for the select attribute
- Modifying the same through Javascript
- Setting the style overflow-y to scroll
- Setting the size of the select element

At some point in my browsing someone claimed that the vertical scroll
bars are controlled by the OS/Browser and there are no ways to change
this using JS or CSS. That the magic number of IE is 30 entries before
the vertical scroll bar shows up.

That's where I'm at right now. Can anyone help shed some light on this?

You could change the dropdown to a non-dropdown select list of the size
you want by adding a size="X" attribute to the select element (where X
is the number of entries you want to show). Then you could show and
hide that list using javascript on a button, and load the currently
selected item into another element. Basically faking the whole
interaction of the dropdown list.

But you shouldn't. You have already put far too much work into this,
and really it should be the designer's job to design around this
limitation (rather than risking the breakage of functionality for some
people just so your designer can have his way).

Jeremy

 

[Matthew Cox]

Thanks all for confirming.

 

[Richard Maher]

Hi Mathew,

I've been searching the net all day today trying to figure out how one
would accomplish what I originally thought would be a fairly straight
forward and simple thing.

I agree that it should be straight-forward but, as you've discovered, sadly
it isn't.

FWIW, Here are a couple of examples of LOV size control that may or may not
help with what you're trying to do: -

http://manson.vistech.net/t3$examples/demo_client_web.html

To see the example you will need:-

1) Javascript enabled
2) Java Applets enabled
3) Can't be behind a Firewall that forbids all unknown outgoing connections
(otherwise open-up 5255)
4) Must be running SUN's JRE 1.4.2_13 or later (1.6 is advised)
5) Must be running Internet Explorer (6 or later) or Firefox (Haven't tested
other browsers)

All things being equal you should then be prompted (via Java modal dialogue
box) for:-

Username: TIER3_DEMO
Password: QUEUE

Now enter an asterix "*" for the Queue Name and you will see the
List-of-values appear with all the available queues on the Deathrow cluster.
(This is one of those predictive text thingies that RobG says are humbug.
"There should be a SUBMIT button in there God damn it!" I have had to
set the minimum size of the Select List to two (even if there is only one
entry) this is because IE (at least) is crap and uses a seperate window for
<select> lists. (Does it still do this with IE7?)

Now click on the "Get Job Info" button and the list of available Jobs is
returned. (Again, I grow the list to four entries then the scroll-bar
diminishes and the "Jobs Found" field clicks over in real-time.)
Unfortunately, setting "selectedIndex" disabled/enable and the timing of
such is *critically* important for a pleasant sscreen appearance :-(

Anyway, here is just one way of doing it. (Try clicking on the header row to
see RobG's great idea for improving performance when tearing down select
lists!) Drill down into detail by clicking on an option in the select list?)

Cheers Richard Maher