Code Monkey home page Code Monkey logo

Comments (5)

tvavrys avatar tvavrys commented on July 24, 2024 1

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.

adamschwartz avatar adamschwartz commented on July 24, 2024

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.

adamschwartz avatar adamschwartz commented on July 24, 2024

@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.

tvavrys avatar tvavrys commented on July 24, 2024

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.

sebastianhelbig avatar sebastianhelbig commented on July 24, 2024

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)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.