// 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();
pFloatingPane.attr("content",downloadString); pFloatingPane.show();
<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; }
Solved! Go to Solution.
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(); });
/* 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*/ }
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(); });
/* 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*/ }
/** * 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); } }
<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>
/** * 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 } }); });
dojo.connect(mapinfofp, 'resize', function() { dojo.style(mapinfofp.canvas, 'height', dojo.style(mapinfofp.canvas, 'height') - 18 + 'px') } );
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!