This is an archived snapshot of W3C's public bugzilla bug tracker, decommissioned in April 2019. Please see the home page for more details.

Bug 12531 - Make it possible for <select multiple> to shrink wrap, within a min/max height range set as multiples of row height
Summary: Make it possible for <select multiple> to shrink wrap, within a min/max heigh...
Status: NEW
Alias: None
Product: CSS
Classification: Unclassified
Component: Basic User Interface (show other bugs)
Version: unspecified
Hardware: All All
: P2 normal
Target Milestone: ---
Assignee: Tantek
QA Contact: public-css-bugzilla
URL: https://www.w3.org/Bugs/Public/show_b...
Whiteboard:
Keywords:
Depends on:
Blocks:
 
Reported: 2011-04-20 09:17 UTC by brunoais
Modified: 2015-10-05 00:56 UTC (History)
8 users (show)

See Also:

Attachments

Description brunoais 2011-04-20 09:17:15 UTC 
About the:
4.10.9 The select element

The specification states:
"The size attribute gives the number of options to show to the user. The size attribute, if specified, must have a value that is a valid non-negative integer greater than zero. <b>If the multiple attribute is present, then the size attribute's default value is 4. If the multiple attribute is absent, then the size attribute's default value is 1.</b>"

I'd like to change the part:
"If the multiple attribute is present, then the size attribute's default value is 4. If the multiple attribute is absent, then the size attribute's default value is 1."
to:
"If the multiple attribute is present, and there is no CSS indicating its height, then the size attribute's default value is 4  If the multiple attribute is absent and there is no CSS indicating its height, then the size attribute's default value is 1. else size is undefined and its height will be the one indicated with the CSS.
When min-height and/or max-height and/or height is defined using CSS, the select must have its height defined using the following priorities:
1º Its height must be exactly the amount in height.
2º Its height must not be bigger than max-height.
3º All text must be visible without vertical scrolling.
4º Its height must not be smaller than min-height.
5º The height applied to the select box must be the smallest possible height so that all the options are completely visible(Example: If max-height: 200px and min-height: 50px and all options can be viewed with height 100px, then the height applied must not be bigger than 100px)
" (Don't forget that by indicating a valid size number any height CSS used in the select box is ignored)

I have some reasons for this and I believe that by allowing this to work as I stated would allow site makers to make sites more easily and allow the server side and client side languages to process less information.
The advantages I can see by applying this are:

- if making a dynamic select box without a fixed number of visible options, Webmasters don't need to make code to count the number of options they are placing inside the select box, make limiters and then calculate the number of entries that the select has to have.
-- With this Webmasters may have cleaner code.
-- With this Webmasters may create the CSS and sent it to another file
-- Webmasters don't need to care about the server processing as the browser will do that for them. That also means less time spend trying to create a code to process that information and, as there is no code, there are no bugs for that which also means faster programming for the websites.

- if making a dynamic page using, for instance, javascript which adds and removed options from the select box as needed there's no need to make a function or a block of code to process and recalculate the new size for the select box (remember that the site owner may want to have top and bottom limits that needs calculation)
-- With this javascript (interpretable language) does not need to process this. So this means faster scripts.
-- No need to make code to execute this means it's less likely to make code with bugs also means javascript code is created faster.

- There are websites with user system that allow users to create their own CSS overrides to the main site CSS.
-- With this people could create their own CSS specifying how many options they want to be available for them to see when they are using the selectboxes. The other way this kind of personalization would be impossible with this simplicity. If the site owner wants them personalizable, there would need to have options for each one of the select boxes.

- There is one effect that some webmasters (like myself) like to apply to selectboxes which is to make its height slightly bigger than the fixed size so that when the last option visible in the selectbox is selected the select box changes its scroll in a way that the option immediately after becomes visible. With this standard for HTML5 this effect is impossible to accomplish without some fair amount of javascript.


... And there are the usual negative sides:

- Browser makers will have to create the code to test and operate these changes.
-- Not exactly a problem, though. This is one thing easy to apply and, as browsers use compiled programs they should be able to process this information without the user noticing the difference.


As you may notice, all I'm writing has work around (with exceptions) using more user side scripting or server side scripting but by applying then it would make the job really easier for users and webmasters.

This could easily be combined with the new attribute (type) proposed here: http://www.w3.org/Bugs/Public/show_bug.cgi?id=12245
Comment 1 brunoais 2011-04-20 10:44:15 UTC 
After confronting to other bugs/improvement requests in this tracker and some thinking I suppose that what I wrote is incomplete. There must be a way to undoubtedly specify if we want the list select or the drop box select. One way to do that is to have the type attribute discussed here:
http://www.w3.org/Bugs/Public/show_bug.cgi?id=12245

If there are other ways it would be a good idea to suggest it here.
Comment 2 brunoais 2011-04-23 09:29:52 UTC 
One way to work around this if the type attribute does not get accepted is to create special meanings in the size attribute (not my favorite but it's an option, though).
For instance, we create the 0 for the selectbox and -1 for the listbox and then, for the size, use the CSS. If no CSS is specified, then use the default size (the one with -1 will have size 4 and the one with size 0 will have size 1).
I emphasis! This is a less preferable solution than the type attribute!

Also: Why are there no other comments? Are there simply no ideas or you gys from the board just don't know what to answer?
Comment 3 Aryeh Gregor 2011-04-24 18:56:03 UTC 
The editor, Ian Hickson, will eventually respond to all bugs filed, but he can often take a few months because of the number of things he tends to do at once.  But some quick feedback from me: your proposal is phrased in terms of the type of feature you want, not the reasons you want it.  You'd be better off emphasizing in what situations the status quo is inadequate.  I don't understand what the problem is with how things work now, or how your proposal differs from the status quo.  What are specific examples of times when you've used a <select> and run into trouble with the way things work now, what problems did you find, and how did you work around them?
Comment 4 brunoais 2011-04-25 12:48:04 UTC 
(In reply to comment #3)
> The editor, Ian Hickson, will eventually respond to all bugs filed, but he can
> often take a few months because of the number of things he tends to do at once.
Ok, np. I just thought he wasn't paying much attention to this one as he seems like to be paying attention to the ones that are supposed to be deleted (or something like that).

>  But some quick feedback from me: your proposal is phrased in terms of the type
> of feature you want, not the reasons you want it.

I didn't think that was the image I gave when I typed the problems I encounter but I'll answer all the questions you give me as well as I can.

>  You'd be better off emphasizing in what situations the status quo is
> inadequate.  I don't
> understand what the problem is with how things work now, or how your proposal
> differs from the status quo.  What are specific examples of times when you've
> used a <select> and run into trouble with the way things work now, what
> problems did you find, and how did you work around them?

Just one apart to make it clear: I marked this as minor just because there's work around by making more code in the relevant language to solve the issue except for one case. (I hope I can explain this and not repeat myself a lot).

Real life drawbacks I encounter:
I tried to make a multiple select with a variable number of options. The options are supposed to be added and removed by javascript.
In the interface, the user has buttons and ways of selection to add options to that multiple option box. Now's the tricky part:
The multiple selectbox must be in a size from the equivalent of 3 to the equivalent of as size of 10.
With what I wanted it's easy. Just make a min-height and max-height with simple testing (in 5 min the test is done) and make the js to add and remove options. Clean and easy.
With HTML5:
1º Create the code like the other way.
Add these steps in its way:

2º After each option is added, verify how many options it contains.
2.1º If it contains less than 3 then its size will be 3.
2.2º If it contains more than 10, then its size will be 10.
2.3º else then its size = number of options it contains.

For that it's okay, there's reasonably easy a work around login. It needs more code and it needs testing but one can make it.
Now a trickier one I just remembered (A college asked me earlier this month and I wasn't able to answer him properly).


I just remembered a real life case, something I had to do with a friend of mine in order to help him doing a self proclaimed job. (believe me when I say that it makes sense in the context)
Case: There's a list nested in a parent div. The parent div has a size of ?% (I think it was 12%) of another element else. The List must follow these rules (by this order):
1º Have the size of, at least, one option.
2º DO NOT show any empty spaces (so if there's 1 option it must be size 1, 2 options size 2 or 1, 3 options size 3 or 2 or 1, etc...)
3º DO NOT overflow the div (if there are 5 options but only a max of 3 fit, show a scroll in the list and the 3 options at a time).
4º Be as big (in height) as possible.

How can I accomplish it? Well... For that I need listeners to check when the window changes size. When it changes size, I need to know the height of the div that contains the list box. Now that I know the height of the div that contains the listbox, I need to convert the px to the number of options (I think it was divide by 10). Now that I know how many options it means, I need to change the size of the listbox having in account that it must not overflow the div that contains it at the same time show as many options as possible and not forgetting that there must be no blank spaces.

I wish I had CSS for this... If my proposal is accepted I may have CSS for that.
Just use:
min-height: 10px; /*The size of 1 option*/
max-height: 100%;
Problem solved.


There are websites that allow users to inject any CSS they want to all pages so that everyone may have the look and feel they want. Also, with that, they can use visibility and display to show and hide what they want all that works and everyone is happy with that. How about the select boxes? What if I want to change the size of the selectboxes to one I want in that website? Do I need to use injected js code (like greasemonkey) to obtain the look I want? I never had this problem but I think that there are people that have this problem even if they can live with it.

With my proposal, I think that all stays backwards compatible and the spec gives the possibility to add this way of working with styles. This is not a really restrictive matter but it's useful for some looks and feels.

I hope that makes enough sense now. If you need more pls ask for it.
Comment 5 Ian 'Hixie' Hickson 2011-06-21 05:39:02 UTC 
This is probably a CSS issue, not an HTML issue. If there was a 'shrink-wrap' keyword for 'height' I think this would be possible except for the thing about not letting multiple lines be visible at once. For that you'd need to explicitly set the item heights, or be able to query them from a 'calc()' function, or some such.
Comment 6 brunoais 2011-06-21 07:35:08 UTC 
(In reply to comment #5)
> This is probably a CSS issue, not an HTML issue. If there was a 'shrink-wrap'
> keyword for 'height' I think this would be possible except for the thing about
> not letting multiple lines be visible at once. For that you'd need to
> explicitly set the item heights, or be able to query them from a 'calc()'
> function, or some such.

Browsers don't allow me to state, using CSS, explicitly the height of the selectbox. No matter the values I use in CSS the size always overrides it. No matter if I use a min-height, height or max-height, they are always ignored and I can't find a way, in the spec, to state that I want to use the values in CSS and ignore the size value.
Tested with: IE9, FF 4.0.1, FF5, Opera 11, google chrome.
Comment 7 Michael[tm] Smith 2011-08-04 05:06:19 UTC 
mass-moved component to LC1
Comment 8 Ian 'Hixie' Hickson 2011-11-25 00:55:26 UTC 
EDITOR'S RESPONSE: This is an Editor's Response to your comment. If you are satisfied with this response, please change the state of this bug to CLOSED. If you have additional information and would like the editor to reconsider, please reopen this bug. If you would like to escalate the issue to the full HTML Working Group, please add the TrackerRequest keyword to this bug, and suggest title and text for the tracker issue; or you may create a tracker issue yourself, if you are able to do so. For more details, see this document:
   http://dev.w3.org/html5/decision-policy/decision-policy.html

Status: Rejected
Change Description: no spec change
Rationale: This should be fixed in CSS. I recommend bringing this up on www-style. This isn't the kind of thing we should add to HTML itself, as it is media-specific. Even the size="" attribute as it is today is a bit dubious, IMHO.
Comment 9 brunoais 2011-11-25 06:30:42 UTC 
(In reply to comment #8)
> EDITOR'S RESPONSE: This is an Editor's Response to your comment. If you are
> satisfied with this response, please change the state of this bug to CLOSED. If
> you have additional information and would like the editor to reconsider, please
> reopen this bug. If you would like to escalate the issue to the full HTML
> Working Group, please add the TrackerRequest keyword to this bug, and suggest
> title and text for the tracker issue; or you may create a tracker issue
> yourself, if you are able to do so. For more details, see this document:
>    http://dev.w3.org/html5/decision-policy/decision-policy.html
> 
> Status: Rejected
> Change Description: no spec change
> Rationale: This should be fixed in CSS. I recommend bringing this up on
> www-style. This isn't the kind of thing we should add to HTML itself, as it is
> media-specific. Even the size="" attribute as it is today is a bit dubious,
> IMHO.

Where's www-style? I can find places for CSS situations (ex:http://www.w3.org/Bugs/Public/describecomponents.cgi?product=CSS)but I can't find www-style.
Comment 10 Michael[tm] Smith 2011-11-25 10:05:05 UTC 
(In reply to comment #9)
> Where's www-style? I can find places for CSS situations
> (ex:http://www.w3.org/Bugs/Public/describecomponents.cgi?product=CSS)but I
> can't find www-style.

www-style is a mailing list -

http://lists.w3.org/Archives/Public/www-style/

If you want to make the comment in bugzilla instead, use the General component:

http://www.w3.org/Bugs/Public/enter_bug.cgi?product=CSS&component=General
Comment 11 public-rdfa-wg 2013-01-24 06:35:23 UTC 
This bug was cloned to create HTML WG bug 19059.
Comment 12 brunoais 2013-03-19 18:30:12 UTC 
Why was this set as wontfix?
Comment 13 Ian 'Hixie' Hickson 2013-03-20 05:05:19 UTC 
See comment 8. It's a CSS issue, not an HTML issue.
Comment 14 brunoais 2013-03-20 08:53:27 UTC 
So, should I copy this to the CSS
Comment 15 brunoais 2013-03-20 08:55:14 UTC 
Moved to CSS.
I hope I've chosen the correct component, though, but I'm not sure. I was in doubt between 3 options.
If someone can point me to the right component if this is not right, then please do.