fnagel/jquery-ui

Unable to open dropdownlist on IE8 if dropdown is in modal dialog

rosieks opened this issue · 12 comments

I have a problem with selectmenu on IE8 (IE9 in IE8 mode). In my case I have dropdown with more values than screen can display and that dropdown is placed in jquery ui modal dialog. I prepared jsfiddle that show my case: http://jsfiddle.net/WMaA9/7/

When I open dialog and choose value from first dropdown then I add 100 items to second dropdown and refresh selectmenu. This cause that scrollbar appear. When open second dropdown scrollbar disappear and raise resize event so effective dropdown list is closed.

I noticed that scrollbar appear because of dialog overlay

I'm pretty busy atm and I would help a lot if you could provide your demo
within one of my prepared fiddles: #61

This would help to make sure all needed files and CSS rules are included
probably. At least your included selectmenu CSS files (from raw.github) is
known to cause issues as GitHub sends wrong header data (and, by the way:
raw.github should not be used as CDN).

Thank you for answer. I used source from github because I can't find any other public source. I forked one of your fiddle and add full jquery-ui to have jquery ui dialog. http://jsfiddle.net/AUeT9/3/

Please keep you demos as simple as possible.

Is the issue still reproducible in this fiddle: http://jsfiddle.net/AUeT9/9/

Perhaps you want to try the new, built from scratch version of selectmenu. Its about to be released: https://github.com/jquery/jquery-ui/tree/selectmenu

Problem still appear. Just open http://jsfiddle.net/AUeT9/9/show/ in IE9 or IE10 and change compatibility mode to IE8

Problem confirmed in IE9 (in IE8 mode): the selectmenu wont open at all.

Any idea what causes the issue?

According to my investigation jquery dialog overlay cause appearance of the scrollbar (only when you have number of items that not fit into the screen). When you open selectmenu then overlay size is changed and resize event is fired and that cause selectmenu close.

Grabbed it from https://github.com/jquery/jquery-ui/tree/selectmenu and noticed that select elements in a modal do open, but they open underneath the modal (as modal has z-index 9999).
Bumping its z-index to 9999 did the trick for me as they were being placed after the modal in the markup.
No clue where to file/fix this though (as in, which repo/tracker).
-> seutje@1f7fceb607
I don't care at all about attribution, so please don't waste any time grabbing the commit properly.

The posted link points to the source of the new, built from scratch version
of selectmenu which makes use of the new .ui-front stacking technique.
Adding a z-index just breaks the ui-front functionality and is not
recommended. It works very nice in every browser, see
http://view.jqueryui.com/selectmenu/tests/visual/selectmenu/compatibility.html

Anyway, this is unrelated to this version of selectmenu.

Oh my, I'm so sorry. Almost looks like I randomly threw some things
together and hoped it to work, and it isn't even a Monday...
Thanks for pointing me in the right direction and sorry for wasting your
time, I have no excuse, really :x
On Mar 20, 2013 5:53 PM, "Felix Nagel" notifications@github.com wrote:

The posted link points to the source of the new, built from scratch version
of selectmenu which makes use of the new .ui-front stacking technique.
Adding a z-index just breaks the ui-front functionality and is not
recommended. It works very nice in every browser, see

http://view.jqueryui.com/selectmenu/tests/visual/selectmenu/compatibility.html

Anyway, this is unrelated to this version of selectmenu.


Reply to this email directly or view it on GitHubhttps://github.com//issues/294#issuecomment-15188283
.

No problem, you're welcome!

Closed. Please reopen if needed.