search

cloydlau / json-editor-vue

Vue and Nuxt 2/3 isomorphic JSON editor, viewer, formatter and validator.
https://cloydlau.github.io/playground/json-editor-vue/
MIT License
437 stars 26 forks source link

Modals are behind Vuetify Navigation Drawer #78

Closed DedicatedManagers closed 11 months ago

DedicatedManagers commented 11 months ago

Before you start, please make sure to:

Link to minimal reproduction

https://play.vuetifyjs.com/#eNqlU81uEzEQfhXjS0CK16ThgKK0CgckQHCFA8thE0+KwX+yvdtWUd6dsZ0GZ1vaSEg5rL/5fsbjyfcdDX7D3znXDD3QBV1G0E51Ea5aQ8hyYJ1z+TMfTDfI6y5Ka5jw3Q144sDrzoCJB1KmKRkik+hEoowKLlv65Y5ghpKbLG4pCf36vva1hyi3dy29WvJKWxsKOUgBPhPuvx/NU9L8PoZ+Rph8TPDsKfNn1Rf/pZ7/Q52wB/P8O2rdSVPnbKyJCFUXz3CE28i2EpQgqLECFIbrcI0j5jXzU7DmvZDRehx3Rf2F+Ak3tTXOStixn3QoS7Hk1bLgMWy8dJEEiH3ZGamd9ZHsiIct2ZOtt5pMcM8mVfG0sUJJTTHIICv0JMCucKapRi6T48vJB1DKkm/WK/Fi8io1VFrAcDqlJQAbd00S4XLvkk17KISWLkhGEoYx6dzSnzG6sOB8IwzKcEhy8I2ByI3TfIU07nsTpQYmrF7Nm3nzlgt82hpuIGi29vYmgEeTlk6rmLLrz0YdmJjwprkoCQeIqW4dUsQDa455A3jmweA/BPy5NxrJ6luNSk/ejAnQ8ryrZSpXcs2HOZfofdvoU7vOSKU6ll6ubMI5xo+Ijo6jpTrDbqRYvW5mszKVUaX0noL2rcEf3U9pniFuYX4/+uMPKz3Qfg==

Steps to reproduce

Install Vuetify & add a permanent left navigation drawer. Add Json-Vue-Editor to the project Click on the filter which causes a modal to open

image

What is expected?

The JSON Editor modal should be on top.

What is actually happening?

The JSON Editor is hidden behind the Vuetify Drawer

System Info

No response

Package Manager

None

Any additional comments?

No response

cloydlau commented 11 months ago

Hello, I wonder why you think this is a problem with json-editor-vue and not Vuetify? You should use CSS property z-index yourself to handle this kind of problem. Imagine that even if I set a higher z-index for it, how can we ensure it will work with other components of Vuetify or other UI libraries? Also, why does it have to be higher?

DedicatedManagers commented 11 months ago

I wonder why you think this is a problem with json-editor-vue and not Vuetify?

I would think you would want it to be highly compatible with something as popular as Vuetify.

Also, why does it have to be higher?

I can't access the left side of the modal.

I hear that you don't think this an issue for this repo to solve. Thanks for your hard work in making this tool.