CODEWITHSUNDEEP
vue.jsmodal-dialogvuetify.jsvue-directives
Xevion
Xevion

Reputation: 750

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

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

Upvotes: 1

Views: 506

Answers (2)

Kael Watts-Deuchar
Kael Watts-Deuchar

Reputation: 4481

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>

Upvotes: 1

T.Woody
T.Woody

Reputation: 1218

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

Upvotes: 0

Related Questions