topic Re: Help with dojo floating pane in ArcGIS JavaScript Maps SDK Questions

Help with dojo floating pane

BetsySchenck-Gardner — Thu, 29 Aug 2013 14:31:33 GMT

I'm having an issue using dojox.layout.FloatingPane. I create the floating pane using the following code:

        // add popup floating pane          var dock = new dojox.layout.Dock({           id: 'dock', style: 'position:absolute; bottom:0; right:0; height:500px; width:0px; display:none; z-index:0;'         }, dojo.create('div', null, dojo.body()));         //find size of the map so to get the best possible initial size for the user         var popX = map.width;         var popY = map.height - 30;         pFloatingPane = new dojox.layout.FloatingPane({           title: "Download Menu",           resizable: true, //allow resizing           closable: false, //we never want to close a floating pane - this method destroys the dijit           dockable: true, // yes we want to dock it           dockTo: dock,           style: 'position:absolute;top:100px;right:10px;width:275px;height:375px;visibility:hidden;z-index:999 !important',           id: "pFloatingPane"         }, dojo.create('div', null, dojo.body()));         dojo.connect(pFloatingPane, 'onFocus', function () {           dijit.byId('pFloatingPane').bringToTop()         });         //do the same for onShow         dojo.connect(pFloatingPane, 'onShow', function () {           dijit.byId('pFloatingPane').bringToTop()         });         pFloatingPane.startup();

When you click on a button, the floating pane is made visible on the map.

       pFloatingPane.attr("content",downloadString);        pFloatingPane.show();

Everything works fine. The floating pane displays all the content it is suppose to. The problem I have is after I close the pane and then click on the button to open it again, its height increases. In fact it keeps increasing every single time you reopen the floating pane. Am I missing something that controls the size of the pane? I'm using the following stylesheets:

    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.8/js/dojo/dojox/layout/resources/FloatingPane.css"/>     <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.8/js/dojo/dojox/layout/resources/ResizeHandle.css"/>        .dojoxFloatingPane {          padding: 0 0 20px 0 !important;          border: solid 1px #769DC0 !important;          font-family: Arial, "Kimberley", sans-serif;          font-size: 14px;       }        .dojoxFloatingPaneTitle {          border: none;          padding: 5px 0 10px 8px;          height: 16px;          background: #ABD6FF url('http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/images/titlebar.png') repeat-x;       }        .dojoxFloatingPaneContent {          border-top: solid 1px #769DC0;          font-family: Arial, "Kimberley", sans-serif;          font-size: 12px;       }        .dojoxFloatingMinimizeIcon {          width: 15px;          height: 15px;          margin-right: 6px;          padding-right: 6px;          background: url('http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/images/dialogCloseIcon.png') no-repeat 0 0;       }

Thanks for any assistance.

Re: Help with dojo floating pane

BenFousek — Thu, 29 Aug 2013 15:33:42 GMT

Betsy,
I know of the increased size on show phenomenon. I don't understand it completely, but it's a layout issue with padding coupled with the floating pane's containerNode wanting to resize with padding on show. The critical part of the fix is padding:0 !important; in the .dojoxFloatingPane class.

First, here's a code update:

var mapinfofp = new dojox.layout.FloatingPane({   id: 'map-info-floating-pane',   title: 'Map Information',   resizable: false,   resizeAxis: null,   closable: false,   dockable: true,   dockTo: app.layout.dock,   style: 'position:absolute;top:90px;left:340px;width:270px;height:215px;visibility:hidden;overflow:hidden;',   href: 'html/map-info.html',   preload: false }, dojo.create('div', null, dojo.body())); mapinfofp.startup(); mapinfofp.on('focus', function () {   mapinfofp.bringToTop(); }); mapinfofp.on('show', function () {   mapinfofp.bringToTop(); });

Note the content wrapped in div with dojoxFloatingPaneWrapper class:
[HTML]
<div class="dojoxFloatingPaneWrapper">
<div data-dojo-type="mods/widget/MapInfo" data-dojo-props="map:app.map"></div>
</div>[/HTML]

The CSS:

/* floating pane */ .dojoxFloatingPaneWrapper {  padding:8px; } .dojoxFloatingPane {  padding:0 !important;  border:solid 1px #769DC0 !important; } .dojoxFloatingPaneTitle {  border: 1px solid #ffffff;  border-top: none;  background-color: #abd6ff;  background-image: url("http://ajax.googleapis.com/ajax/libs/dojo/1.9.1/dijit/themes/claro/images/standardGradient.png");  background-repeat: repeat-x;  background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);  background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);  background-image: -o-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);  background-image: linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);  _background-image: none;  padding: 5px 7px 4px 7px; } .dojoxFloatingPaneContent {  border-top:solid 1px #769DC0;  padding:0;  overflow:hidden } .dojoxFloatingMinimizeIcon {  /*custom minimize icon if desired*/ }

Re: Help with dojo floating pane

JasonZou — Sun, 12 Dec 2021 05:14:05 GMT

The issue is a known issue recognized by the DOJO team. To my understanding, the cause is actually pretty simple. floatingPane.show will call resize method every time, which will increase its width and height by the floatingpane border width. What I did is to create a subclass of FloatingPane, and overwrite the resize method. Here is the code.

/**
 * resize the floating pane
 * @override The original one is buggy. That's why for the override.
 * 
 * @issue 
 * #1) Each time when the default resize() is called, the location of the floatingPane is 
 * changed to a new location with an offset added to its top and left.
 * 
 * #2) Each time when the default resize() is called, the size of the floatingPane is 
 * increased with a small amount in both width and height.
 *
 * @cause 
 * #1) The issue is caused by the below two commented out else-if statements, where 
 * if x/y is included in dim, the given new dimension, the left/top will be set to the x/y value. 
 * The problem is x/y is the absolute value related to the viewport or document root, while 
 * top/left is the offset value relative to the closest positioned ancestor, or its offsetParent. 
 * If the offsetParent is not the viewport or document root, the result will end up with top/left 
 * value increased with the x/y value of its offsetParent each time.
 *
 * #2) The issue is caused by the below two commented out dns.width/dns.height statements. 
 * Per the dojo source v1.8, dim is one of the two results based on startup(), show() and 
 * maxmimize(): the result of domGeom.position(this.domNode) and window.getBox(). The 
 * domGeom.position returns the width and height that include the border, but dns.width/dns.height 
 * does not. So set dns.width = dim.w actually increase the width by borderWidth * 2.
 * @solution 
 * #1)  top = dim.y - offsetParent.y; left = dim.x - offsetParent.x;
 * #2)  dns.width = dim.w - borderWidth * 2
 * 
 * @see http://bugs.dojotoolkit.org/ticket/5849
 * @see http://www.w3schools.com/jsref/dom_obj_all.asp
 * 
 * @comment
 * The above issue is with dojo 1.8 and below. Hopefully it can be fixed in the future release.
 * 
 */
resize: function(/* Object */dim){
 // override: do nothing if passing no dim.
 if (!dim) return;
 
 // summary:
 //  Size the FloatingPane and place accordingly
 dim = dim || this._naturalState;
 this._currentState = dim;
   
 // Variables used for the issue corrections

 // calculate the offset due to the border width
 // borderOffset = borderWidth * 2
 // @see http://www.w3schools.com/jsref/dom_obj_all.asp
 var borderOffset = this.domNode.offsetWidth - this.domNode.clientWidth;

 // get offsetParent node and its location values
 var offsetParent = this.domNode.offsetParent;
 var offsetLocation = {x: 0, y: 0};
 if (offsetParent) {
  var offsetParentLoc = domGeom.position(offsetParent);
  offsetLocation = {x: offsetParentLoc.x, y: offsetParentLoc.y};
 }

 // From the ResizeHandle we only get width and height information
 var dns = this.domNode.style;
 if("t" in dim){ dns.top = dim.t + "px"; }
//   else if("y" in dim){ dns.top = dim.y + "px"; }  // original line that causes issue #1. DON'T uncomment this line!!!
 else if("y" in dim){ dns.top = (dim.y - offsetLocation.y) + "px"; }  // correction of issue #1. 
 if("l" in dim){ dns.left = dim.l + "px"; }
//   else if("x" in dim){ dns.left = dim.x + "px"; }  // original line that causes issue #1. DON'T uncomment this line!!!
 else if("x" in dim){ dns.left = (dim.x - offsetLocation.x) + "px"; } // correction of issue #1.
//   dns.width = dim.w + "px";  // original line that causes the issue #2
//   dns.height = dim.h + "px";  // original line that causes the issue #2
 dns.width = (dim.w - borderOffset) + "px";  // correction of issue #2
 dns.height = (dim.h - borderOffset) + "px";  // correction of issue #2

 // Now resize canvas
 var mbCanvas = { l: 0, t: 0, w: (dim.w - borderOffset), h: (dim.h - this.focusNode.offsetHeight - borderOffset) };
 domGeom.setMarginBox(this.canvas, mbCanvas);

 // If the single child can resize, forward resize event to it so it can
 // fit itself properly into the content area
 this._checkIfSingleChild();
 if(this._singleChild && this._singleChild.resize){
  this._singleChild.resize(mbCanvas);
 }
}

Re: Help with dojo floating pane

BetsySchenck-Gardner — Thu, 29 Aug 2013 17:34:07 GMT

Jason,
Sorry for my stupidity but where would this resize function code be placed? In the main html page?
Betsy

Re: Help with dojo floating pane

JasonZou — Sun, 12 Dec 2021 05:14:08 GMT

Create a module named as FloatingPane, and place it under some folder where other custom dijits saved, like myProject/dijits/.
In the main html page,

 <script>
  var dojoConfig = {
   parseOnLoad: false,
   async: true,
   packages: [{
    name: "dijits",
    location: "myProject/dijits"   // may need to revise it based on your project file structure
   }]
  };
 </script>
 <script src="http://js.arcgis.com/3.6/"></script>

Then in the code where you need to use the custom FloatingPane module, load it as
AMD:
define(["dijits/FloatingPane",...], function(FloatingPane, ...) {});

non-AMD:
dojo.require("dijits.FloatingPane");

Used in HTML:
<div data-dojo-type="dijits.FloatingPane" data-dojo-props="put floatingpane properties here"></div>

Used in JS:
var floatPane = new dijits.FloatingPane(...);

Here is the complete code of the custom FloatingPane.

/**
 * Base widget for all tool windows. Behave like the floating title pane with hide feature.
 * @class
 * @extends dojox/layout/FloatingPane
 * @features
 *   1. minimize to hide content area.
 *   2. click close button to hide instead of destroy.
 *   3. change the default close, minimize and restore icons.
 *   4. fixed the buggy resize function.
 */
define([
 "dojo/_base/declare",
 "dojo/_base/lang",
 "dojo/dom-construct",
 "dojo/dom-geometry",
 "dojo/dnd/move",
 "dojo/on",
 "dojox/layout/FloatingPane"
], function(declare, lang, domConstruct, domGeom, dndMove, on, FloatingPane){
 
 return declare(FloatingPane, {
  resize: function(/* Object */dim){
   // override: do nothing if passing no dim.
   if (!dim) return;
   
   // summary:
   //  Size the FloatingPane and place accordingly
   dim = dim || this._naturalState;
   this._currentState = dim;
   
   // Variables used for the issue corrections

   // calculate the offset due to the border width
   // borderOffset = borderWidth * 2
   // @see http://www.w3schools.com/jsref/dom_obj_all.asp
   var borderOffset = this.domNode.offsetWidth - this.domNode.clientWidth;

   // get offsetParent node and its location values
   var offsetParent = this.domNode.offsetParent;
   var offsetLocation = {x: 0, y: 0};
   if (offsetParent) {
    var offsetParentLoc = domGeom.position(offsetParent);
    offsetLocation = {x: offsetParentLoc.x, y: offsetParentLoc.y};
   }

   // From the ResizeHandle we only get width and height information
   var dns = this.domNode.style;
   if("t" in dim){ dns.top = dim.t + "px"; }
   else if("y" in dim){ dns.top = (dim.y - offsetLocation.y) + "px"; }  // correction of issue #1. 
   if("l" in dim){ dns.left = dim.l + "px"; }
   else if("x" in dim){ dns.left = (dim.x - offsetLocation.x) + "px"; } // correction of issue #1.
   dns.width = (dim.w - borderOffset) + "px";  // correction of issue #2
   dns.height = (dim.h - borderOffset) + "px";  // correction of issue #2

   // Now resize canvas
   var mbCanvas = { l: 0, t: 0, w: (dim.w - borderOffset), h: (dim.h - this.focusNode.offsetHeight - borderOffset) };
   domGeom.setMarginBox(this.canvas, mbCanvas);

   // If the single child can resize, forward resize event to it so it can
   // fit itself properly into the content area
   this._checkIfSingleChild();
   if(this._singleChild && this._singleChild.resize){
    this._singleChild.resize(mbCanvas);
   }
  },

  // override
  // Called when clicking the close button (X) located on the right side of the title bar.
  // The original implementation is to destroy the widget. It should hide instead.
  close: function() {
   this.hide();
  },
  
  // override
  // Enable the user to create custom onHide event handler
  hide: function() {
   this.inherited(arguments);
   this.onHide();
  },
  
  // event added
  onHide: function() {
   // stub method for event
  }
 });
});

Re: Help with dojo floating pane

BetsySchenck-Gardner — Fri, 30 Aug 2013 12:26:10 GMT

Thanks to Ben and Jason for their help with this problem. In the end I used Ben's solution. It was the easier one to get working on my end but Jason's solution worked as well.

Re: Help with dojo floating pane

AdrianMarsden — Thu, 03 Oct 2013 12:40:43 GMT

Ben - thanks for the answer - (and original code) The only issue I have now is the vertical scroll bar obscures the resize handle (which is a user requirement) - this was what the 20 px padding in the original CSS brought to the party - so any ideas?

Cheers

ACM

Edit - so far I've managed to move it a bit with - seems OK.

.dojoxResizeHandle {

right:20px
}

Re: Help with dojo floating pane

BenFousek — Thu, 03 Oct 2013 14:00:37 GMT

I've never used resizing or have scrolling. I size the floating pane to fit the content without overflow.

I was able to get a quick solution based on my example code above to be placed below the focus and show events.

dojo.connect(mapinfofp, 'resize', function() { dojo.style(mapinfofp.canvas, 'height', dojo.style(mapinfofp.canvas, 'height') - 18 + 'px') } );

18px seems to be enough.

The problem I see with this is always having the extra "padding" on the bottom even when no scroll bars are showing. I suppose you could check to see if the cavas node is scrolling before changing the height.

This is obviously non-AMD.

Re: Help with dojo floating pane

AdrianMarsden — Thu, 03 Oct 2013 14:04:19 GMT

I've never used resizing or have scrolling. I size the floating pane to fit the content without overflow.

I was able to get a quick solution based on my example code above to be placed below the focus and show events.
dojo.connect(mapinfofp, 'resize', function() { dojo.style(mapinfofp.canvas, 'height', dojo.style(mapinfofp.canvas, 'height') - 18 + 'px') } );
18px seems to be enough.

The problem I see with this is always having the extra "padding" on the bottom even when no scroll bars are showing. I suppose you could check to see if the cavas node is scrolling before changing the height.

This is obviously non-AMD.

Cheers!

By the sounds of it, the appearance will match my CSS hack - leaves the padding there without scroll bars - but I think my users can cope - my floating pane contains the results of a "all layers, All features" ID task - just like old ArcIMS did, so it can have one feature in one table, or 100+ in several tables.

Re: Help with dojo floating pane

BenFousek — Thu, 03 Oct 2013 16:44:33 GMT

Cheers!

Back when I first started using floating panes I had the same issues with the resizer and resizing. The solution at the time was static dimensions. Grids and custom mods with complex layout and lots of resizing were particularly difficult to work with in a floating pane. I never went back and just created closeable tabs for a tab container for those sorts of things. At any rate, you've inspired me to revisit floating panes while going to AMD. I can think of several items I'd like to get into a floating pane.

Cheers and good luck to you!

Re: Help with dojo floating pane

AdrianMarsden — Thu, 14 Nov 2013 11:51:22 GMT

Hi - anyone else having issues with floating panes/non-AMD and 3.7

I've added

dojo.require("dojox.layout.Dock");

As it seems to be required now, but still get "Uncaught TypeError: Cannot call method 'attr' of undefined " when it is called.

Re: Help with dojo floating pane

KenMorefield — Tue, 17 Dec 2013 17:44:19 GMT

Hi Adrian,
Did you ever figure out how to use the floating panes with non-AMD code and version 3.7? I'm having no luck. I even notice that ESRI's own sample doesn't work - https://developers.arcgis.com/en/javascript/jssamples/gp_clipasync.html

There is no visible floating pane on the sample. Anyone have any ideas, or better yet a functioning, non-AMD sample?

Thanks,
Ken

Re: Help with dojo floating pane

AdrianMarsden — Sun, 12 Dec 2021 05:14:11 GMT

Yes - I had to move various bits to my init function. As I use the constrained floating pane, I don't know which bits are relevant, so here is all the bits I had to move into my init function

  var ParentConstrainedFloatingPane = dojo.declare(dojox.layout.FloatingPane, {


        postCreate: function ()
        {
            this.inherited(arguments);
            this.moveable = new dojo.dnd.move.parentConstrainedMoveable(
                this.domNode, {
                    handle: this.focusNode,
                    area: "content",
                    within: true
                }
            );
        }


    });
    var BoxConstrainedFloatingPane = dojo.declare(dojox.layout.FloatingPane, {


        postCreate: function ()
        {
            this.inherited(arguments);
            this.moveable = new dojo.dnd.move.boxConstrainedMoveable(
                this.domNode, {
                    handle: this.focusNode,
                    box: { l: 10, t: 10, w: 400, h: 400 },
                    within: true
                }
            );
        }


    });


    var ConstrainedFloatingPane = dojo.declare(dojox.layout.FloatingPane, {


        postCreate: function ()
        {


            this.inherited(arguments);
            this.moveable = new dojo.dnd.move.constrainedMoveable(
                this.domNode, {
                    handle: this.focusNode,
                    constraints: function ()
                    {
                        var coordsBody = dojo.coords(dojo.body());
                        // or
                        var coordsWindow = {
                            l: 0,
                            t: 0,
                            w: window.innerWidth,
                            h: window.innerHeight
                        };


                        return coordsWindow;
                    },
                    within: true
                }
            );
        }


    });
    var pFloatingPane;


    dojo.ready(function ()
    {








        //add popup floating pane for in
        var dock = new dojox.layout.Dock({
            id: 'dock',
            style: 'position:absolute; bottom:0; right:0; height:500px; width:0px; display:none; z-index:0;'
            //tuck the dock into the the bottom-right corner of the app
        }, dojo.create('div', null, dojo.body()));
        //find size of the map so to get the best possible initial size for the user
        popX = map.width * 0.66;
        popY = map.height * 0.66;


        pFloatingPane = new ConstrainedFloatingPane({


            title: "Layer Info",
            resizable: true, //allow resizing
            closable: false, //we never want to close a floating pane - this method destroys the dijit
            dockable: true, // yes we want to dock it
            dockTo: dock,
            style: 'position:absolute;top:90px;left:340px;width:' + popX + 'px;height:' + popY + 'px;visibility:hidden;overflow:hidden;',


            id: "pFloatingPane"
        }, dojo.create('div', null, dojo.body()));


        dojo.connect(pFloatingPane, 'onFocus', function ()
        {
            dijit.byId('pFloatingPane').bringToTop();
           // alert(1)
        });
        //do the same for onShow
        dojo.connect(pFloatingPane, 'onShow', function ()
        {
            dijit.byId('pFloatingPane').bringToTop();
        });




        dojo.connect(pFloatingPane, "onDock", function ()
        {
          //  alert(1)
        });






        //add popup for draw tools
        var drawtools = new ConstrainedFloatingPane({
            id: 'drawtools',
            title: 'Drawing Tools',
            href: 'common/draw.html',
            resizable: false,
            closable: false,
            dockable: true,
            dockTo: dock,
            style: 'position:absolute;top:100px;left:50px;width:450px;height:480px;visibility:hidden;overflow:hidden;'
        },
            dojo.create('div', null, dojo.body()));


        dojo.connect(drawtools, 'onFocus', function ()
        {
            dijit.byId('drawtools').bringToTop()
        });
        dojo.connect(drawtools, 'onShow', function ()
        {
            dijit.byId('drawtools').bringToTop()
            r1 = dijit.byId('radio2')
            //it's late, I want to go home, so classic bodge here
            if (r1) {
                dijit.byId('radio1').set('checked', false);
                dijit.byId('radio2').set('checked', false);
                dijit.byId('radio3').set('checked', false);
                dijit.byId('radio4').set('checked', false);
                dijit.byId('radio5').set('checked', false);


            }


        });


        dojo.connect(drawtools.dockNode, 'click', function ()
        {
            drawToolbar.deactivate(); enableID();
        });




        pFloatingPane.startup();
        
        dojo.forEach(dojo.query('.dojoxFloatingMinimizeIcon'), function (i)
        {
            dojo.attr(i, 'onmouseover', 'dojo.style(this, "backgroundPosition", "-21px 50%")');
            dojo.attr(i, 'onmouseout', 'dojo.style(this, "backgroundPosition", "0 0")');
            dojo.attr(i, 'onmousedown', 'dojo.style(this, "backgroundPosition", "-42px 50%")')


        });


    });

Hope that helps.

Re: Help with dojo floating pane

RobertKirkwood — Fri, 22 May 2015 21:08:23 GMT

Ben,

Is there any way to making the floating pane behave like a dialog box as far as it resizing on the fly?

there is an example of my dialog box here:

WyoBio :: Map

When you click on a point on the map it populates the dialog box. if you click on other features with more data the box resizes automatically. I have went to a floating pane because the dialog is modal and disables some of the maps functionality. I have tried to get the floating pane to behave in a similar fashion but its not working.

Re: Help with dojo floating pane

BenFousek — Fri, 22 May 2015 23:10:07 GMT

Robert,

You may be able to use 'dojo/dom-geometry' to get the size of the content and then size the floating pane accordingly.