Z-Index on grid-items conflicts with MDC_Dialog / @SMUI Dialog

[MintyMods]

Hi Vahe,

I have hit an issue with the default z-index being applied to grid-items i.e.

.svlt-grid-item {
  touch-action:none;
  word-break: break-all;
  position: absolute;
  z-index: 1000; 
}

is causing the content of the grid items to be displayed in front of dialog content:-

I am not sure why you are using 1000 as the default starting z-index and then resetting this to 100 after dragging / resizing events:-

z-index: {item.drag.dragging || item.resize.resizing ? 1000 : 100};

but removing the style:-

.svlt-grid-item {
  touch-action:none;
  word-break: break-all;
  position: absolute;
}

and changing the inline behavior to revert back to being unset:-

z-index: {item.drag.dragging || item.resize.resizing ? 1000 : 'unset'};

resolves the issue for me and doesn't seem to change or break the drag / resize behavior of the grid-items.

Can you advise on the why the z-index for grid-items is currently being toggled so high? Thanks

[vaheqelyan]

yeah it should be fixed

[MintyMods]

To clarify do you mean it should 'already' be fixed or that you will fix it?

[vaheqelyan]

I'll fix it

[vaheqelyan]

Try the latest version, hopefully it won't conflict with the z-index

[MintyMods]

Thank you for the prompt response but unfortunately the fix only resolves the items that have been moved or resized. By default the grid items are still sitting at a z-index of 1000 due to your class definition:-

.svlt-grid-item {
  touch-action:none;
  word-break: break-all;
  position: absolute;
  z-index: 1000; 
}

[MintyMods]

Actually, ignore me. It was some left over debugging styles I had applied causing my issue. Your fix does resolvethe conflict with MDC Dialog.

Thanks again for the prompt turn around.

[MintyMods]

Playing with this further and the only thing that works for me is to reset the z-index to 'unset'

z-index: {item.drag.dragging || item.resize.resizing ? 1000 : 'unset'};

otherwise content insists on showing in front of the dialog.

I will try to make a repl or update my public site to show the issue as it seems to be when using SVG as content although the following border also shows in front of the dialog:-

.svlt-grid-item {
	border: 1px solid rgba(187, 186, 186, 0.753);
}

[MintyMods]

The following page shows the issue with grid-items showing in front of the dialog content.

Interestingly the first grid-item does not seem to have the issue? Depending on your screen resolution or window layout you should notice the lower half of the dialog is not clickable as the grid-items are positioned in front of the dialog. The upper dialog content seems OK as these are positioned above the first grid item which doesn't show the same symptoms.

If I use the unset the everything is fine.

[vaheqelyan]

https://github.com/vaheqelyan/svelte-grid/commit/fe2c6c636349fa806c23ce7d817cc0110a5cfd2f#diff-ddafee536ffc8c4ca00078b3d2f03aacL10-L14

Don't understand how I can still drag and drop an item when the dialog is open https://www.mintymods.info/demo/#/views

This is another example. https://svelte.dev/repl/48ccc2ca872c451d92fc63f180553349?version=3.12.1

[MintyMods]

Yes, very strange. I updated the scrim layer with the styles from your demo:-

.mdc-dialog, .mdc-dialog__scrim {
	position: fixed !important; /* Sit on top of the page content */
	width: 100%; /* Full width (cover the whole page) */
	height: 100%; /* Full height (cover the whole page) */
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0,0,0,0.5); /* Black background with opacity */
	z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
	cursor: pointer; /* Add a pointer on hover */
}

And the grid-items can still be dragged from below the scrim layer. MouseOver events are also firing as the toolbar is still being activated when hovering over grid-items.

[vaheqelyan]

Really became curious. This is another example. https://layout-master.now.sh/ Right click -> Generate CSS code

[vaheqelyan]

Try to open your modal outside of the container. you are mounting the element inside .grid-item (But either way your example should work too)

[MintyMods]

I think you are right, it must have something to do with opening the modal from within the grid-item. Some styles I previously had, made it look like the modal was full screen but actually it is being contained within the grid-item as can been seen from the following:-

This at least explain why the other layout items could previously be moved while the dialog was open.

I am unable to move the modal outside of the container as the modal dialog belongs to the configuration sub component of the chart that is being displayed within the container and I do not know how to make it mount outside (it's using @SMUI Dialog). If you have any ideas on how to move it out I will try but it should work within the component as it's ultimately just HTML & CSS right?

Apart from the modal scrim not covering the complete page and the dialog not being center - the grid-item continues to interfere with input fields contained within the dialog when open so is making it unusable.

I am completely stuck with this and it is becoming a problem for me so do you have any idea of a fix, maybe a work around or even what area I should try to investigate? I really like your grid and it ticks ALL my requirements but getting it to work has been shall we say 'challenging'.

[MintyMods]

Try to open your modal outside of the container.

The following does kind of resolve the issue although you can see the transition between the grid-items being in front of the dialog then moving behind so it's not great. Reload the page to see what I mean.

   const dialog = new MDCDialog(document.querySelector(".mdc-dialog"));
   dialog.listen("MDCDialog:opened", () => {
     var newParent = document.getElementById("body");
     var oldParent = document.getElementById("dialog-fix-wrapper");
     while (oldParent.childNodes.length > 0) {
       newParent.appendChild(oldParent.childNodes[0]);
     }
   });

Do you think this strange behavior is somehow linked to the issue with the grid layout not taking the full screen?

[vaheqelyan]

Okay, I think I found the problem, I will try to reproduce when I have free time.

[vaheqelyan]

I even try to remove the z-index from the .grid-item but this is still not a problem caused by the z-index. Maybe it can be silly because I practice in front-end development. if you add a modal to grid-item , each event will be associated with grid-item. The event is probably bubbling. https://javascript.info/bubbling-and-capturing#bubbling

[vaheqelyan]

repl See line 36

[MintyMods]

Okay, I think I found the problem, I will try to reproduce when I have free time. repl See line 36

Cool, most of the fixing comes from being able to reproduce in the first place.

I understand about the event bubble but that doesn't explain how the event is getting past the overlay. Usually the event would still bubble but only from the click hitting the overlay (not hitting the content behind and then bubbling).

Is this something specific to the way Svelte is handling/generating event logic?

[vaheqelyan]

Is this something specific to the way Svelte is handling/generating event logic?

Well, no, probably not.

[vaheqelyan]

repl At the moment I have no idea