Z-index problem with graphics

Suite and Optimus Suite 5
#1

I’m trying to use dhxWins Windows alongside some graphics elements, but the graphics elements always appear behind the windows, even when they are rendered after the windows.

I’ve tried adjusting the z-index property in the windows style-sheet, but this did not fix the problem.

I have this issue with HTML5 canvas and with jsgl graphics.

#2

Could you provide us completed demo to reproduce this issue?
It you have PRO version, please, send the demo on support@shtmlx.com with a link to this topic.
docs.dhtmlx.com/doku.php?id=othe … leted_demo

#3

Hi Darya

Many thanks for your prompt reply. I am using the standard versions.
I guess this means that you probably cannot spend much time on the issue, because you have paying customers to look after. However, if you are able to help, I can make a standalone demo. It will take some time, because the app makes use of AJAX calls to Yii models, but I will start on it asap…

Richard

#4

A standalone demo is a very good (and sometimes the only) way to show us your issue. Besides, it sometimes help users to find their own mistakes and fix them.
As for, “I guess this means that you probably cannot spend much time on the issue” - it is a bit complicated to replicate your issue guiding only a picture. The issue is not reproduced in our demos so we need to see how exactly you use the dhtmlx (component).

#5

Thanks - I have emailed the demo to support@dhtmlx.com

#6

Ok, wait for an answer.

#7

You need to place your svg object in the parent different from window viewport. To try it just make some changes in your demo code:
var Panel = new jsgl.Panel(document.getElementById(“obj”));
…

#8

Thanks Darya. I’ve made the changes as suggested, but now the graphics do not show at all (tested using Chrome/Linux and IE7/Windows).

#9

OK – got it! Need to place the “obj”

inside the “main”
- Doh!!
Thanks for your help! Working OK now.
#10

You are welcome!!!

#11

Darya - one other thing: I am placing grids inside the windows. Is there any way of changing the default margin between the window border and the grid? I can’t see a relevant css setting.

#12

You use web skin windows. This skin has 8px white border around a container div. You can decreas this border the next way:
.dhtmlx_skin_dhx_web div.dhtmlx_window_active div.dhtmlx_wins_body_outer {
border: none;
}
.dhtmlx_skin_dhx_web div.dhtmlx_window_active div.dhtmlx_wins_body_outer div.dhtmlx_wins_body_inner {
border: 0px !important;
}