[Bug 19059] New: Make it possible for <select multiple> to shrink wrap, within a min/max height range set as multiples of row height

https://www.w3.org/Bugs/Public/show_bug.cgi?id=19059

           Summary: Make it possible for <select multiple> to shrink wrap,
                    within a min/max height range set as multiples of row
                    height
           Product: HTML WG
           Version: unspecified
          Platform: All
        OS/Version: All
            Status: NEW
          Severity: normal
          Priority: P2
         Component: HTML5 spec
        AssignedTo: dave.null@w3.org
        ReportedBy: contributor@whatwg.org
         QAContact: public-html-bugzilla@w3.org
                CC: ian@hixie.ch, bzbarsky@mit.edu, mike@w3.org,
                    public-html-wg-issue-tracking@w3.org,
                    public-html@w3.org, ayg@aryeh.name,
                    brunoaiss@gmail.com


This was was cloned from bug 12531 as part of operation LATER convergence.
Originally filed: 2011-04-20 09:17:00 +0000
Original reporter: brunoais <brunoaiss@gmail.com>

================================================================================
 #0   brunoais                                        2011-04-20 09:17:15 +0000 
--------------------------------------------------------------------------------
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
================================================================================
 #1   brunoais                                        2011-04-20 10:44:15 +0000 
--------------------------------------------------------------------------------
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.
================================================================================
 #2   brunoais                                        2011-04-23 09:29:52 +0000 
--------------------------------------------------------------------------------
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?
================================================================================
 #3   Aryeh Gregor                                    2011-04-24 18:56:03 +0000 
--------------------------------------------------------------------------------
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?
================================================================================
 #4   brunoais                                        2011-04-25 12:48:04 +0000 
--------------------------------------------------------------------------------
(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.
================================================================================
 #5   Ian 'Hixie' Hickson                             2011-06-21 05:39:02 +0000 
--------------------------------------------------------------------------------
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.
================================================================================
 #6   brunoais                                        2011-06-21 07:35:08 +0000 
--------------------------------------------------------------------------------
(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.
================================================================================
 #8   Ian 'Hixie' Hickson                             2011-11-25 00:55:26 +0000 
--------------------------------------------------------------------------------
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.
================================================================================
 #9   brunoais                                        2011-11-25 06:30:42 +0000 
--------------------------------------------------------------------------------
(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.
================================================================================
 #10  Michael[tm] Smith                               2011-11-25 10:05:05 +0000 
--------------------------------------------------------------------------------
(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
================================================================================

-- 
Configure bugmail: https://www.w3.org/Bugs/Public/userprefs.cgi?tab=email
------- You are receiving this mail because: -------
You are on the CC list for the bug.

Received on Tuesday, 25 September 2012 22:02:10 UTC