Opened 5 years ago

Last modified 3 years ago

#10082 open bug

Selectmenu items remains visible and fixed while scrolling dialog content

Reported by: matiax Owned by:
Priority: major Milestone: none
Component: ui.selectmenu Version: 1.11.0-beta.2
Keywords: Cc:
Blocked by: Blocking:

Description

Inside a dialog when start scrolling it's content, if a selectmenu was opened, the items container shows like a fixed element.

Steps: 1) Click on select menu to show items 2) Using the mousewheel, start scrolling down

Result: Items remain visible, fixed and on top of the rest of the content

Expected: Maybe the items must hide or move along with the select menu.

The same happens with the datepicker widget

Demo: http://jsfiddle.net/Y9KWN/

Change History (6)

comment:1 Changed 5 years ago by Scott González

Priority: minormajor
Status: newopen
Summary: Selectmenu items remains visible and fixed while scrolling dialog contenSelectmenu items remains visible and fixed while scrolling dialog content

We should listen for scroll events and if the target is an ancestor of the widget, then we should close the popup.


Other widgets:
Autocomplete
Datepicker: #8223

Last edited 5 years ago by Scott González (previous) (diff)

comment:3 Changed 3 years ago by matiax

Possible solution: http://jsfiddle.net/Y9KWN/5/

Follow the same instructions as before, only this time click on the FIX button first.

What I did is to wrap the span.ui-selectmenu-button with a div.ui-selectmenu, and also put div.ui-selectmenu-menu (with a little css change) inside the same div.

It bothers me that that div.ui-selectmenu-menu is appended to the body instead of being along side span.ui-selectmenu-button. I think with this approach both elements are siblings inside the same container wich to me makes more sense that having them both separated.

The only thing left to be changed is that the items are overflowed outside the width of the span.ui-selectmenu-button

comment:4 in reply to:  3 Changed 3 years ago by Scott González

Replying to matiax:

What I did is to wrap the span.ui-selectmenu-button with a div.ui-selectmenu, and also put div.ui-selectmenu-menu (with a little css change) inside the same div.

That negates all uses of the appendTo option.

comment:5 Changed 3 years ago by matiax

Yes, but even with that option the problem persist. And both elements, button and menu, are not under a unique container for both of them. Besides, I think it's more intuitive to apply the widget directly and expect to generate a structure similar to my proposal than setting a special option to move one of both elements at the same level that the other.

Don't you agree with this reasoning?

Here is what happens with only setting "appendTo": http://jsfiddle.net/Y9KWN/6/

comment:6 in reply to:  5 Changed 3 years ago by Scott González

Replying to matiax:

Don't you agree with this reasoning?

No. There are literally years worth of attempts, use cases, and knowledge that went into the current API.

Here is what happens with only setting "appendTo": http://jsfiddle.net/Y9KWN/6/

We know what happens. That's why this ticket exists.

Note: See TracTickets for help on using tickets.