Popup menu design issues

12 views

Skip to first unread message

Stephane

unread,

Nov 2, 2010, 10:49:14 AM11/2/10

to axel-dev

Hello,

We are improving the popup device (src/plugins/popupdevice.js) which is used in AXEL.

For instance it is used to render multiple choices selections (src/plugins/select.js) when using the xt:attribute element:

<xt:attribute types="select" name="currency" values="EUR CHF USD" i18n="€ CHF $" default="EUR">

which is rendered as the following popup menu displayed just below the edited field:
_____
| EUR |
| CHF |
| USD |
---------

It is also used in some new components under development (and not yet distributed) for displaying dynamical suggestions.

This raises the following design issues for which we welcome any suggestion.

1/ Maximum popup menu height

The goal is to limit the height of the popup menu and to have a scroll bar displayed when the number of options exceeds that limit. How to best set the limit ? Here are a few options:

- with a css max-height property (e.g. 150px)
- with a fixed number of choices (e.g. no more than 6 choices)
- make a computation based on the screen space available between insertion point and the bottom of the window

2/ Popup menu at the bottom of the window

What to do if the popup menu appears at the bottom of the window in such a way that some options are outside of the window limit ? Currently depending on the browser the user may or may not use the window scroll bar to scroll the document and the popup (on Firefox for instance, clicking on the window scroll bar dismisses the popup).

Here are a few options:

- do nothing and let the user scroll the document before displaying the popup menu
- automatically scroll the document so that the menu is visible
- detect the case and display the popup menu above the edited field instead ?