GoJS FloorPlanner Z-index problem

GoJS
1

Hi,

When I was resize a wall with adornment extension, I cant click another html input areas.

img
img.png1396×550 36.7 KB

anyone have an idea about this bug ?

  • ı was tried z-index for solve but this cant solved.
2

You started from the sample here, right? Floor Planner

I just tried resizing walls, windows, and doors, and I am still able to click on the Selection Info window input fields without issue. How can I reproduce your problem?

3

hi ryanj, firstly thanks for reply.

yes I’m using floorPlanner template of go js.

I want to tell you about the width problem. when I want to make planners div width %60 %70 or %80 etc. I’m having this problem.

img
img.png1899×805 55.1 KB

navigation bar => 10%
right bar => 20%
planner screen => 70% width // calc(100% - 258px) height

when I make planner screens 100% width problem was solved. but I want to make screen width 70%

thanks…

4

Could you please show the HTML for the body down to the diagram’s Div and the left and right bars? You can leave out the details underneath all of the elements.

5

Hi walter,

I think its not about viewport or css problem. this is look like resize wall parts function problem.

dsadsa
dsadsa.png1899×901 82.4 KB

this image is original floorPlanner and Im making planner div %60 and Im taking again this z-index problem.

6

OK, so it looks like this is just a problem with how you have modified the page layout. I don’t know what you have done, but I think it does not involve GoJS or any floor planner sample tools. Nor about z-index.

7

The photo I wrote in the last comment belongs to the gojs library, and I only changed
div id=“myFloorplanDiv” style=“width:60% !important”><div’>

please can you try this ?

secondly; after resize the wall with adornments, when I drag the planner canvas with mouse problem is solving.

8

I’m getting confused – it seems that the resizing tool problem is completely unrelated. If that is the case, it would be better to have a separate topic for this styling issue.

OK, I tried setting width: 60% on the myFloorplanDiv style in the debugger. Sure enough, I got a similar result to what you show in your screenshot. But that is exactly what you asked for – you want the Diagram DIV to be 60% of the available width, and because it’s a child of <body>, I think the result is correct.

And if there were a bug, it would be a bug in the browser’s page layout.

But there is one interaction with GoJS. Please read Resizing Diagrams -- Northwoods Software about programmatic changes to the size of the Diagram’s DIV. But I didn’t think you were changing it dynamically.

9

I tried, resize not solved this problem…

10

I’m afraid I don’t understand the problem(s?) you’re having. I’ve tried reducing the width of the Floorplan div to 60%, but I cannot see any issues. What exactly are the problems you are facing, and how can I reproduce them, starting with the published floorplanner sample we have on our site?

11
  1. make floorplandiv width 60% (on your example site, not in developer console. make it in html code)
  2. drag and drop a wall on diagram.
  3. resize with adornment (click end of wall and resize)
  4. double click resized wall (dont click or drag anywhere)
  5. when selectionInfoWindow is opened, try to click length input area
  6. you will see bug, you cant click area

note ; if you want, I can publish a video on youtube.

1 Like
12

I have just followed these steps and tested with Chrome, Firefox, and Edge. In all cases, I could find no issues. Perhaps a video would help.

13

When I was remove diagram.isMouseCaptured = true; in Floorplanner-WallReshapingTool.js problem was solved.

note : you have removed in the latest version.