JavaScript - Floating Panes for Tools - Floating Pane affecting Map Extent

[IanPeebles]

Hello everyone.  I have recently tried something new with an application.  I have added a button to the main toolbar and when it is clicked, a measurement widget appears within a floating pane.  The tool works well, but I noticed that it affects my initial map extent when the application is first loaded.  Also, when closing the floating pane then re-opening, it shifts the floating pane to the right and down a few pixels.

My question is, what should I look at to correct these issues.  Here is a screenshot of the button that fires the floating pane and the floating pane that contains the measurement widget:

After closing the pane, then reopening (repeat step a couple of times).  Notice how the pane shifted to the right and down and part of it is cut off on the map:

Also when the map first loads, here is the extent (not the initial extent I set):

When I hit the home button twice (notice the map goes to full-extent my set initial extent):

The Floating pane DIV is causing this issue, because when I comment out the code, it works just fine.

Anyone have and recommendations on how I can maintain the initial spatial extent while the floating pane exists?  How can I close the floating pane and have it re-open in the same location after it is closed?

I can share code if necessary.  I will also point out that the z-index value is set to 999 for the floating pane.

Any suggestions will be greatly appreciated.  Thank you!

[IanPeebles]

Here is some code I can provide:

index.html

<!-- Measuring Widget - Floating Content Pane -->
   <div id="divFloatingPane" data-dojo-type="dojox/layout/FloatingPane" data-dojo-props="resizable:false, dockable:true,    closable:false" title="Measuring Tools">
<div id="measurementDiv"></div>
</div>

layout.css

/* *********************************** */
/* * MEASUREMENT                 * */
/* *********************************** */

#measureToolFrame{
  position: absolute;
  top: 45px;
  right: 190px;
  border: 1px none black;
  width: 34px;
  height: 34px;
}

#measure{
  width: 24px;
  height: 24px;
  background-image:url(http://arcgis02/vegetationmanagement/images/measuring.png);
  background-size: 24px;
}

/* Measurement Widget - Size of Frame */
#measurementDiv{
  width: 243px;
  height: 190px;
  border: 1px none black;
  background-color: none;
}

/* ESRI Measurement Widget - Floating Pane Content Window Undernearth Widget */
.dojoxFloatingPaneContent{
  height: 190px;
  background: white;
  overflow: none !important;
}

/* ESRI Measurement Widget - Floating Pane Canvas */
.dojoxFloatingPaneCanvas{
  width: 243px;
  height: 190px;
  background-color: white;
  border: 1px none black;
}

/* ESRI Measurement Widget - Floating Pane Properties */
#divFloatingPane{
   z-index: 1;
   top: 50px;
   width: 238px;
   height: 220px;
   border: 1px solid black;
   background-color: white;
   visibility: hidden;
}

/* ESRI Measurement Widget - Floating Pane Title */
.dojoxFloatingPaneTitle, .reportTitlePane {
  height: 22px;
  width: 246px;
  background-color: #2E8B57;
  font-family: calibri;
  font-size: 13pt;
  font-weight: bold;
  color: white;
  overflow: none;
}

/* ESRI Measurement Widget - Button Properties */
.esriMeasurement .dijitReset .dijitInline.dijitButtonNode{
  margin-top: 5px;
  margin-left: 5px;
  background-color: none;
  border-radius: 4px;
  border-color: #E1E1E1;
}

[KenBuja]

I use a Floating Pane in my application. I set the dock for the Floating Pan to be hidden and also set the initial position of the pane. I haven't had an issue where it moves on its own when opening and closing it.

        .videoFloatingPane {
            position: absolute;
            top: 35px;
            left: 60px;
            width: 500px;
            height: 300px;
            z-index: 90;
        }
        .dojoxDock {
            visibility: hidden;
        }

[IanPeebles]

Ken,

Thank your for the response.  Still not sure why my floating panel keep changing positions.  I have nearly the same css as you:

/* ESRI Measurement Widget - Floating Pane Properties */

#divFloatingPane{

   z-index: 1;

   top: 50px;

   width: 238px;

   height: 220px;

   border: 1px solid black;

   background-color: white;

   visibility: hidden;

}

Then

/* Dojox File Folder Floater at the Bottom of Map */

.dojoxDock {

  visibility: hidden;

}

Now in the index.htm, I have the pane inside the map DIV.  Is that were you have it?  Here is my block of code inside the index.html file.

<!-- Map -->
<div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'center'">
  
       <!-- Map Home Button -->
          <div id="HomeButton" title="See Full Map"></div>
   
       <!-- Search Tool - Find Facility ID -->
       <div id="search" title="Find Facility ID"></div>
   
       <!-- Measuring Widget - Floating Content Pane -->
       <div id="divFloatingPane" data-dojo-type="dojox/layout/FloatingPane" data-dojo-props="resizable:false,    dockable:true, closable:false" title="Measuring Tools">
        <div id="measurementDiv"></div>
         </div>
  
    </div

Still not sure why my spatial extent is being thrown off.

[KenBuja]

No, I don't have the Floating Panes within the map div

<body class="claro">
    <div id="content" data-dojo-type="dijit/layout/BorderContainer"...>
        <div id="divMap" ...>
        </div>
    </div>
    <div id="divVideo" data-dojo-type="dojox/layout/FloatingPane" ...>
    </div>
</body>

[KenBuja · Accepted solution]

Here's the site that I'm using the Floating Panes: NCCOS BIOmapper

Click on the Search tab, run a search on any of the layers and that brings up a Floating Pane with the results. If you run a search on the layer "Dive Sites" with the search "VideoExists" is equal to "Yes", click on the video icon to bring up another Floating Pane to play the video. Neither of these move if you open them repeatedly, but will open in the same position as when they were closed.

[IanPeebles]

Ken,

You are helping me out so far. The difference is between your map and my map is that my floating pane is inside the map.  That is proving to be the reason why the initial spatial extent is messing up along with the change in position each time the floating pane is closed.  It looks like I need the floating pane on top of all my other DIVs.

Your floating pane is on top of the map, the right pane, and the title pane.  If I can do that, I should resolve the issue.  However, I did try to move the floating pane div outside of my application header DIV, left pane DIV, and map DIV, but this broke the application.

I may have some additional questions if that is OK...but seeing your application is helpful because I can clearly see the behavior of your floating pane.

[IanPeebles]

Ken,

Thanks for sharing your information.  I do have good news.  I got my floating pane to work without affecting the map and not shifting in a different position.  I noticed that you had the floating pane outside of the border container, which was very helpful.  Here is what I did:

1. Delcared "dojox/layout/FloatingPane", in my map.js file.  I did not have this declared.

2. Moved the following Code outside of the border container:

Having the floating pane inside the map DIV was certainly causing some issues.

After making these minor changes, I now have it working.  Here is a preview below:

Thank you for the input.  Now that I have the floating pane working, I plan to use it for many other tools .

Just make sure it is outside the border container .

[KenBuja]

Glad I could help. Unless you're programmatically creating a Pane within your map.js script, I don't think you need that extra require. I think that was left over in my script from when I was creating the Panes there, instead of in the html, where they are now.

[IanPeebles]

Actually, when I did not have the require it did not work.  I do not have any requires in my index.htm.  Everything is in modules .