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

Closed
rosieks opened this Issue Mar 11, 2013 · 12 comments

Comments

Projects
None yet
3 participants
@rosieks

rosieks commented Mar 11, 2013

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

@fnagel

This comment has been minimized.

Show comment Hide comment
@fnagel

fnagel Mar 11, 2013

Owner

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).

Owner

fnagel commented Mar 11, 2013

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).

@rosieks

This comment has been minimized.

Show comment Hide comment
@rosieks

rosieks Mar 11, 2013

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/

rosieks commented Mar 11, 2013

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/

@fnagel

This comment has been minimized.

Show comment Hide comment
@fnagel

fnagel Mar 11, 2013

Owner

Please keep you demos as simple as possible.

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

Owner

fnagel commented Mar 11, 2013

Please keep you demos as simple as possible.

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

@fnagel

This comment has been minimized.

Show comment Hide comment
@fnagel

fnagel Mar 11, 2013

Owner

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

Owner

fnagel commented Mar 11, 2013

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

@rosieks

This comment has been minimized.

Show comment Hide comment
@rosieks

rosieks Mar 12, 2013

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

rosieks commented Mar 12, 2013

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

@fnagel

This comment has been minimized.

Show comment Hide comment
@fnagel

fnagel Mar 15, 2013

Owner

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

Any idea what causes the issue?

Owner

fnagel commented Mar 15, 2013

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

Any idea what causes the issue?

@rosieks

This comment has been minimized.

Show comment Hide comment
@rosieks

rosieks Mar 15, 2013

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.

rosieks commented Mar 15, 2013

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.

@seutje

This comment has been minimized.

Show comment Hide comment
@seutje

seutje Mar 20, 2013

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/jquery-ui@1f7fceb
I don't care at all about attribution, so please don't waste any time grabbing the commit properly.

seutje commented Mar 20, 2013

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/jquery-ui@1f7fceb
I don't care at all about attribution, so please don't waste any time grabbing the commit properly.

@fnagel

This comment has been minimized.

Show comment Hide comment
@fnagel

fnagel Mar 20, 2013

Owner

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.

Owner

fnagel commented Mar 20, 2013

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.

@seutje

This comment has been minimized.

Show comment Hide comment
@seutje

seutje Mar 20, 2013

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/fnagel/jquery-ui/issues/294#issuecomment-15188283
.

seutje commented Mar 20, 2013

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/fnagel/jquery-ui/issues/294#issuecomment-15188283
.

@fnagel

This comment has been minimized.

Show comment Hide comment
@fnagel

fnagel Mar 20, 2013

Owner

No problem, you're welcome!

Owner

fnagel commented Mar 20, 2013

No problem, you're welcome!

@fnagel

This comment has been minimized.

Show comment Hide comment
@fnagel

fnagel May 29, 2013

Owner

Closed. Please reopen if needed.

Owner

fnagel commented May 29, 2013

Closed. Please reopen if needed.

@fnagel fnagel closed this Sep 7, 2013

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment