Comments (5)
I ran into the same issue. None of the solutions you mentioned have worked for me. I consider them as workarounds. Do you plan to fix it and change the structure of elements?
from vex.
Since the .vex
element is set to overflow: auto
in all included themes, there is a scrollbar present on that element.
Unfortunately, since the .vex-overlay
element is behind .vex-content
(but still a child of .vex
) it catches clicks before they reach down to the scrollbar. So you have a few options to achieve what you want:
-
Leave the overlay there but set
pointer-events: none
so that the click event passes through to the scrollbar:.vex-overlay { pointer-events: none }
-
Hide the overlay entirely:
.vex-overlay { display: none }
-
Move the right edge of the overlay over a bit so that the scrollbar can be seen below it.
.vex-overlay { right: 16px /* Approximate scrollbar width */ }
If you go with this last option I'd recommend setting the .vex-overlay
's right
CSS property only in the event you detect a scrollbar is present. You can do this using the technique outlined in my comment here.
from vex.
@tvavrys thanks for the push.
I think the right call is to change the structure to something like this:
<div class="vex">
<div class="vex-overlay"></div>
<div class="vex-content-scroll">
<div class="vex-content"></div>
</div>
</div>
As this will be a breaking change, it will probably necessitate a major version bump.
In the meantime, the third solution above should work just fine, and in some ways, it may even be preferred. Would you mind giving it another shot and letting me know what seems to be failing?
from vex.
I remember that the third solution does not solve scrolling problem (middle button scrolling) when you have your mouse over vex-overlay.
The new structure should solve this problem, but I completely understand your concerns regarding the major version bump. It's not a small change.
from vex.
To have scrolling on the overlay and also be able to close the content with a click on the overlay:
.vex-overlay {
pointer-events: none;
}
var vexContent = vex.open({...});
$('.vex').click(function() {
vex.close(vexContent.data().vex.id);
});
$('.vex-content').click(function(event) {
event.stopPropagation();
});
from vex.
Related Issues (20)
- HTML entities in unsafeMessage/unsafeContent
- is it possible to open vex over a canvas ?
- Help moving vex and using append location
- vex-open remains on body in chrome if dialog is closed in background with child browser window & print dialog is called (then print cancelled or proceed) HOT 1
- vex input field sanitizes spaces
- Multiple Buttons?
- problem with the modal position and size HOT 1
- how to use it in Vue? HOT 2
- readme spelling error
- file input inside vex.open() HOT 1
- Dynamic select using AngularJS with ng-options
- vex.close could cover submission
- demos in documentation don't work
- button click opens and closes dialog at the same time HOT 2
- Can Vex Modal lock? HOT 1
- Unsafe assignment to innerHTML
- Animations required for close
- Make buttons respond to Enter and Esc keys
- Refresh buttons of a dialog confirm HOT 1
- vex dialog buttons are not working as expected. 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 vex.