Comments (7)
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;
}
from ngdialog.
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.
from ngdialog.
@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.
from ngdialog.
@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: [...]
});
from ngdialog.
@lagr thanks I also implemented similar aproach in my project. I was interested in adding the fix into the main branch.
from ngdialog.
Please fix it, this bug is really annoying :(
from ngdialog.
Bug is still open for iPhone Webkit. I am getting this issue on iOS Hybrid app
from ngdialog.
Related Issues (20)
- Still active? HOT 2
- ngDialog : Uncaught TypeError: Cannot read property 'data' of undefined HOT 2
- The dialog closes when you click on the scrollbar of the browser HOT 3
- Because of Hammer.js horizontal scrolling is not working inside a dialog
- Nested resolves?
- How to prevent page scroll up or down when close the dialog HOT 2
- Sticky Header On Scroll
- NgDialog position to center of parent called inside iframe
- Close the topmost ngDialog Instance
- Want to call ngDialog in $provide.decorator('$exceptionHandler',
- Need support for full screen dialog modal
- [Question] Draggable modal HOT 1
- ngDialog.open doesn't work with a script tag, only with an external html file HOT 1
- Setting a controller doesn't work with angular 1.7.1 HOT 1
- need to decrease the z-index of the ngDialog..help would be appreciated. HOT 1
- Hammer JS, tap on close button triggered click event on element behind the dialog box
- AngularJs 1.7, on every route change the dialogs are incrementing. every time you come back to the controller the dialogs will be 1,2,3,4 and so on HOT 4
- ngDialog controllerAs not working when upgrade ngdialog version to 0.6.6
- How is it possible to bind data back to $scope from the $scope changes made within the dialog?
- How to close dialog opened by openConfirm HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ngdialog.