1149771 - Scrolling issues with modal overlay

Status: RESOLVED INCOMPLETE

(Websites :: Shape of the Web, defect, P3)

Description

[Cory Price [:ckprice] (bugmail disabled, NI me!)]

A few issues with the single issue modal

1. For modal with a height that extends beyond the viewable area, scrolling down loses the 'close' icon. It should stick to the top - http://cl.ly/image/2F403P332N23

2. For modals that are the exact height of the viewable area, there is no more room to scroll down. Can we add some margin here? Example http://lorax.s3-website-us-west-2.amazonaws.com/detail/access/affordable on a Macbook Air - http://cl.ly/image/2p1x093t0V3u

3. Go to checklist view; open a modal; scroll down - note that if you scroll down in the modal, the checklist view behind also scrolls.

Comment 1

[Schalk Neethling [:espressive]]

"3. Go to checklist view; open a modal; scroll down - note that if you scroll down in the modal, the checklist view behind also scrolls." - this is going away in https://bugzilla.mozilla.org/show_bug.cgi?id=1147904#c2

Comment 2

[Schalk Neethling [:espressive]]

Apologies for the bugmail noise. Assigning these back to default until we know how we are moving forward with the project. A lot of these can probably even be closed as they me no longer be relevant.

Comment 3

[Zak Carey]

Bootstrap 4.3 added a new built-in scroll feature to modals. This makes only the modal-body content scroll if the size of the content would otherwise make the page scroll. To use it, just add the class modal-dialog-scrollable to the same div that has the modal-dialog class.
<div class="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" style="overflow-y: scroll; max-height:85%; margin-top: 50px; margin-bottom:50px;" >
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title"></h3>
</div>
<div class="modal-body"></div>
<div class="modal-footer"></div>
</div>
</div>
</div>
Use this element and I hope you get good results because I do various experiments with my website https://electricbikeslounge.com/.

Comment 4

[salman virk]

Great website to download YouTube thumbnail https://myyoutubethumbnaildownloader.com/

Comment 5

[trosclairson]

Hi,
Trosclairson Jeffry Here,
I also facing Scrolling issues with modal overlay on https://lemotwordle.com/.

Comment 6

[u597032]

Shape of the Web Website is no longer active