[Bug 12245] New: @size on <select> drop-downs is not enough to specify the drop-down maxlength on long options lists with scrollbars

http://www.w3.org/Bugs/Public/show_bug.cgi?id=12245

           Summary: @size on <select> drop-downs is not enough to specify
                    the drop-down maxlength on long options lists with
                    scrollbars
           Product: HTML WG
           Version: unspecified
          Platform: PC
        OS/Version: All
            Status: NEW
          Severity: normal
          Priority: P2
         Component: HTML5 spec (editor: Ian Hickson)
        AssignedTo: ian@hixie.ch
        ReportedBy: silviapfeiffer1@gmail.com
         QAContact: public-html-bugzilla@w3.org
                CC: mike@w3.org, public-html-wg-issue-tracking@w3.org,
                    public-html@w3.org


This is trying to solve the problem discussed here:
http://stackoverflow.com/questions/570642/height-of-an-html-select-box-dropdown


I am trying to implement a drop-down box that behaves the same across all
browsers. We have the <select> tag for this purpose. I add the lines for the
drop-down into the <options>. I have a large number of options - say 50 (e.g. a
list of languages).

My screen space is not big, because the drop-down is e.g. at the bottom of a
page, an overlay on a video, or in an iframe. So, I would like limit the number
of visible options in the drop-down to e.g. 10 elements, while at the same time
continuing to keep this a drop-down list. However, every browser chooses by
default a different drop-down list length after which the drop-down starts to
have a scrollbar: Firefox has 20 items, Opera & Webkit as many as fit on the
visible page etc (the stackoverflow link above lists more).

So, you would think that the @size attribute on <select> solves this problem.
For example:

<html>
<body>

<select size=10>
  <option>Volvo</option>
  <option>Saab</option>
  <option>Mercedes</option>
  <option>Audi</option>
  <option>Volvo</option>
  <option>Saab</option>
  <option>Mercedes</option>
  <option>Audi</option>
  <option>Volvo</option>
  <option>Saab</option>
  <option>Mercedes</option>
  <option>Audi</option>
  <option>Volvo</option>
  <option>Saab</option>
  <option>Mercedes</option>
  <option>Audi</option>
  <option>Volvo</option>
  <option>Saab</option>
  <option>Mercedes</option>
  <option>Audi</option>
  <option>Volvo</option>
  <option>Saab</option>
  <option>Mercedes</option>
  <option>Audi</option>
  <option>Volvo</option>
  <option>Saab</option>
  <option>Mercedes</option>
  <option>Audi</option>
  <option>Volvo</option>
  <option>Saab</option>
  <option>Mercedes</option>
  <option>Audi</option>
  <option>Volvo</option>
  <option>Saab</option>
  <option>Mercedes</option>
  <option>Audi</option>
</select>

</body>
</html>

You can try the example e.g. by entering it here:

http://www.w3schools.com/TAGS/tryit.asp?filename=tryhtml_option


As you can see, the @size attribute does not do what I need. Instead, it turns
the drop-down into a list and removes the drop-down functionality. The only
solution to this problem is to create your own drop-down in JavaScript.

I don't think it should be this hard!

There is a lack of specification in the <select> element.

One way to solve this is to introduce a attribute that specifies the display
style of the element to be either "list" or "drop-down". Then, for drop-down,
the @size attribute is interpreted to mean the number of displayed options and
the overflow CSS style could define what to do in cases of overflow (or we just
leave it at scroll).

-- 
Configure bugmail: http://www.w3.org/Bugs/Public/userprefs.cgi?tab=email
------- You are receiving this mail because: -------
You are the QA contact for the bug.

Received on Saturday, 5 March 2011 04:32:49 UTC