1010957 - <select> drop down list reaches out of window/monitor

Status: NEW

(Core :: Layout: Form Controls, enhancement)

Description

[Andreas]

User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:29.0) Gecko/20100101 Firefox/29.0 (Beta/Release)
Build ID: 20140506152807

Steps to reproduce:

<form>
  <div style="margin-left:1700px"><p> <!-- this is for 1920xY in a maximized window -->
    <select size="1" style="width:70px">
      <option> A A A A A 1</option>
      <option>BB BB BB BB BB BB BB BB BB BB BB BB BB BB 2</option>
      <option>CCC CCC CCC CCC CCC CCC CCC CCC CCC CCC CCC 3</option>
      <option>DDDD DDDD DDDD DDDD DDDD DDDD DDDD DDDD DDDD 4</option>
      <option>EEEEE EEEEE EEEEE EEEEE EEEEE EEEEE EEEEE 5</option>
    </select>
  </p></div>
</form>


Actual results:

the dropped down menu reaches out of firefox window and even the whole display. You cannot see the numbers.


Expected results:

the dropped down menu should render completely inside the current window (as long as it is big enough of course)

Comment 1

[Mats Palmgren (inactive)]

The behavior here is intentional, so I'll change this to an enhancement request.
It would help to know what other browsers do in these situations, do they
also make the dropdown menu display outside the window on the right side?
(what about the left side for RTL content?)

Comment 2

[Andreas]

(In reply to Mats Palmgren (:mats) from comment #1)
> The behavior here is intentional, so I'll change this to an enhancement
> request.

I don't think this is how it is supposed to be. I think, this changed in the last some versions (in 29?)?
This is really annoying and there would have been lots of reports, if this was there for several months or even years.

> It would help to know what other browsers do in these situations, do they
> also make the dropdown menu display outside the window on the right side?

Chrome handles it just as I expected.

Comment 3

[Mats Palmgren (inactive)]

Chrome does display the dropdown outside the window if it fits on the
screen though, they display it inwards only if it would overflow the
screen edge - which seems reasonable.  They handle the RTL case
(overflowing to the left) the same way (tested in Chrome nightly
on Linux64).

Comment 4

[Mats Palmgren (inactive)]

I think we should consider not allowing the dropdown to overflow the window
border at all (displaying it inward instead).  It might allow us to remove
the widget for the dropdown eventually.  Huge dropdowns in tiny windows
would be clipped but I don't see that as a significant problem...

Comment 6

[Andreas]

IMO, the following behavior is the most natural (for LTR):
 - If the edge of the window is also the edge of the screen, then put the menu as far to the left as needed to show the whole menu. (Eye candy bonus: align it at the right side just as Chrome does it)
  -> If the window is at the edge to another display, do not use this other display. It might be a display for some presentation stuff e.g. and therefore may not be in field of view. 
 - If the menu reaches out of the window, but it still fits to the screen, do so. It is more useful to see the whole menu than to cut off the information just because the window is too small. 
 - If the menu is too big to fit onto the whole screen, put it as far to the left as possible and cut off the outer right part. There is no space left, bad luck