Scrollable on entire page

[likeastore]

Scrollable on entire page

[natehaefner]

I have made a workaround, but it requires a different structure for the dialog itself. Basically you need to make the ngdialog-overlay a parent of the ngdialog-content and apply the overflow:auto to the overlay instead of ngdialog.

So in the source code I changed the the line:

$dialog.html('<div class="ngdialog-overlay"></div><div class="ngdialog-content">' + template + '</div>');

to

$dialog.html('<div class="ngdialog-overlay"><div class="ngdialog-content">' + template + '</div></div>');

and the css became:

.ngdialog {
  position: fixed;  
  z-index: 10000;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.ngdialog-overlay {
  position: fixed;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  background: rgba(0, 0, 0, 0.4);
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -webkit-backface-visibility: hidden;
  -webkit-animation: ngdialog-fadein 0.5s;
  animation: ngdialog-fadein 0.5s;
}

[bgse]

We had a similar issue, but the main problem for us was the fact that the overflow scrollbar was being obfuscated by the overlay.

Users would be able to scroll with the cursor inside the dialog, but could not use the scrollbar.

I've fixed this by simply giving the ngdialog-overlay class to the main ngdialog element instead of having it nested inside:

self.$result = $dialog = $el('<div id="ngdialog' + globalID + '" class="ngdialog ngdialog-overlay"></div>');
$dialog.html('<div class="ngdialog-content">' + template + '</div>');

No further changes were necessary to make it work as we excpected it to.

This will allow interaction for the scrollbar, and also fixes your issue I believe. I haven't extensively tested this with the original themes though, as we use our own custom themes.

[sejoker]

@voronianski the issue with scrolling is reproduced in the latest 0.3.11 version, is it regression bug? I could make PR with similar fix that @bgse did.

[lagr]

@sejoker A non-intrusive fix that uses the mechanism of @bgse's solution would be to add ngdialog-overlay to the className option and disabling the overlay via option. I have not tested this in depth, but it works quite well for me.

ngDialog.open({
          template: '...',
          className: 'your-custom-classes ngdialog-overlay',
          overlay: false,
          controller: [...]
        });

[sejoker]

@lagr thanks I also implemented similar aproach in my project. I was interested in adding the fix into the main branch.

[andriytkachiv]

Please fix it, this bug is really annoying :(

[zaidiqbalvf]

Bug is still open for iPhone Webkit. I am getting this issue on iOS Hybrid app