DOM tree browser compatablity

GoJS
1

Hi, i am using a DOM tree and here am facing one issue with the browser resolutions. On setting browser to 90% screen resolution, im able to click on the tree nodes but when am trying same with browser resolution with 100% am not able to click any node. as per the need i have added media queries for browser to 90%, remaining all modules are working fine in the same window bit only org chart is not working. Please let me know the better solution for click with 90% resolutions.

2

I am unable to reproduce any problem. What @media queries are you using? Does the diagram work at all percentage browser scales when you remove those CSS rules?

3

@media (min-width: 1440px) and (max-width: 1680px) {
#app {
zoom: 0.90 !important;
zoom: 90% !important;
}
.Modal {
zoom: 0.90 !important;
zoom: 90% !important;
}
}

by adding this … am not able to click on tree node in 100% browser screen. But with out css styles am able to do clicks in all resolutions

4

What happens when that @media CSS does not apply to the HTML DIV elements that host Diagrams?

5

Hi Walter , Can you please suggest how to exclude media Query for canvas element containing gojs alone, as i have tried excluding the zoom for the respective html elements in couple of ways as below., but of no use.and due some UI Component distortions we are forced to apply above zoom to 90& 80% to our application,Kindly suggest…
#htmlElementIdcontainingGOJSCanvas{
zoom :100%;
}

 @media not only and (max-width:760px){
     #htmlElementIdcontainingGOJSCanvas{
        
    }
}
6

Sorry, but I don’t know what to do there. However, having an empty rule is probably wrong.

7

Thanks Walter for quick reply.
Its not empty rule, its as below and i have excluded media rule for this component alone.
Basically the issue is occurring only when we set media rules for application zoomin to 80/90% as shown above.if i remove that snippet, our gojs component is working.but we cant remove it as our application demands to show in that way.

@media not only and (max-width:760px){
#htmlElementIdcontainingGOJSCanvas{
zoom :100%;
}
}

8

Your CSS zoom values are probably wrong. Here’s what I just tried to make it work:

  <div style="zoom:90%">
    some other elements at reduced scale
    <div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:600px; zoom:111%"></div>
    yet more elements at reduced scale
  </div>