[Modal] Close Position in Scrolling Modal Offscreen When Small Resolution

[stevekr]

Close icon disappears when modal content exceeds the height of the browser.

http://jsfiddle.net/r3f44rgd/

[jlukic]

It seems to be appearing fine in your fiddle for me. What browser?

[stevekr]

Safari 8.0.6 (10600.6.3) on Mac OS 10.10.3 (14D136) Now I noticed that icon is not disappearing, but after transition it seems to reposition relative to dimmer not modal.

[lauri-elevant]

+1 Same issue here, on Safari the -2.5rem for top and right are not relative to the modal but relative to the modal + margin (hence it is off-screen).

@jlukic I think it can be reproduced just fine on Safari / iPad. The screenshot by @stevekr is exacly what I am seeing as well.

[lauri-elevant]

The media query should bring the close button to within the modal. And it does, but the coords still refer to the dimmer, not modal. You can just faintly see the X in the Safari screenshot.

Oo a wider screen, the X is outside of the modal - in Safari's case then off-screen..

[lauri-elevant]

This also occurs in IE10/11 (did not test Edge atm). If the modal is of the "scrolling" variety, then the close icon is relative to the dimmer, not modal, hence -2.5rem off from the corner of the window (as opposed to modal). This means that the close icon is completely off-screen.. If the width is reduced, then the close icon should be palced inside the modal, which also does not happen - in this case it is similar to the Safari screenshot above.

safariisthenewie

[lauri-elevant]

The core of the issue is pretty simple. The scrolling modal gets a position: static !important which means that the close icon is no longer relative to that. I propose a fix:

.ui.dimmer.modals .scrolling.modal {
    position: relative !important;
    top: auto;
    left: auto;
}

I see no ill effects on other browsers. @jlukic could you please look into this? :-)

[jlukic]

This looks like a bug. The fix seems pretty clear. I do know static is there for a reason which I will have to research through issues archives.

[gsmith-daed]

With the relative (instead of static) fix in place, I'm seeing an issue where modals that are taller than the browser appear far down the page (the page is also much taller than the browser).

js appears sets the top: property on the modal, which is ignored when static, but applies when relative. That may be why static is there.

[gsmith-daed]

Using this fix for now:

.ui.dimmer.modals .scrolling.modal {
    position: relative !important;
    top: auto !important;
    left: auto;
}

[ilanus]

@gsmith-daed Thanks! the close icon was jumping in all iPhone's i tested upon opening, that's pretty huge BUG I suggest @jlukic take a look into that / push the fix.

[wdmeest]

Is there already an idea in which version this will be fixed?

[stale[bot]]

There has been no activity in this thread for 90 days. While we care about every issue and we’d love to see this fixed, the core team’s time is limited so we have to focus our attention on the issues that are most pressing. Therefore, we will likely not be able to get to this one.

However, PRs for this issue will of course be accepted and welcome!

If there is no more activity in the next 90 days, this issue will be closed automatically for housekeeping. To prevent this, simply leave a reply here. Thanks!

[lubber-de]

Doesn't seem to happen anymore using latest SUI 2.4.1