Some areas inside the Vuetify Dialog box don't close it even if there is no content there

user_6912830 0
Viewed 96

See this image here of my custom Lightbox component.

One should be able to simply exit the component and go back to the page by clicking on anywhere outside the image or the v-sheet component on the right (which by the way, is supposed to be touching the image, but I can't figure out how to move it without using margin).

Unfortunately, the red boxes exist - they are areas where clicking should close the dialog, but don't. This is because the entire Dialog component is the green box - it believes even those red boxed areas are part of the component.

I've been attempting to use @click and v-click-outside directives where possible to try and exclude the image and the sheet component can be clicked but everything else closes the dialog, but unfortunately I only get strange behaviors that donn't help at all.

Also, I found out using margin: auto will create another unclickable area, so I need to find out another way to move it over.

Source Code

vue-directives vuetify.js vue.js modal-dialog
2 Answers

Problem 1:

"is supposed to be touching the image, but I can't figure out how to move it without using margin"

Instead of lg="10" on the first col, you can use lg="auto" so it will shrink to fit its contents.

          justify="center"
          class="fill-height"
        >
          <v-col
-           lg="10"
+           lg="auto"
            md="12"
            offset-lg="0"
            class="fill-height text-right"
          >

Problem 2:

"areas where clicking should close the dialog, but don't"

You can use pointer-events: none on the dialog body to disable click event capturing, then pointer-events: auto on specific elements to selectively enable it.

          <v-col
            lg="2"
            md="4"
            align-self="top"
-           @click="dialog = false"
          >
            <v-sheet
              class="rounded-tr-lg text-left"

...

- <style lang="scss">
- .v-dialog {
+ <style lang="scss" scoped>
+ ::v-deep .v-dialog {
    margin: 0;
    padding-left: 24px;
    padding-right: 24px;
    box-shadow: none !important;
+   pointer-events: none;
+ }
+ .v-image,
+ .v-btn,
+ .v-sheet {
+   pointer-events: auto;
  }
  </style>
user_20747360

Option 1: Use flexbox and @click function to close whatever

Basically, if you get your css to do a similar layout, but fill those red boxes with a background: blue you in turn can put an @click on that same div, which will close whatever you need.

Option 2: Use Modals

I would use a parent component that communicates to an "image component" and "image details component" (such that the two components are siblings.

Moreover, I would personally use v--modal for both of these sibling components, and have the closed event tied to a single instance of closing both modals by names

The shiftX and shiftY should be enough for placement. https://www.npmjs.com/package/vue-js-modal

user_29578900
Related