Question

I recently started working with Dojo framework and have to make floating panes for a website. After searching on both google and stackoverflow, I come across a very good example:

jsfiddle

But the problem is every time I minimize the floating pane and then click on the small tab on bottom to show it again, the size of pane increases! It can also be seen in the jsfiddle example although you need to repeat it multiple times since the change is like 2px.

Can someone help me with this weird behavior?
JavaScript code:

dojo.require("dojo.dnd.move");
dojo.require("dojox.layout.FloatingPane");

dojo.ready(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 searchboxNode = dojo.byId("searchbox");
    var floatingPane = new ParentConstrainedFloatingPane({
        title: "A floating pane",
        resizable: true,
        dockable: true,
        //constrainToContainer: true,
        style: "position:absolute;top:40px;left:40px;width:160px;height:100px;"       
    }, searchboxNode);

    floatingPane.startup();
});

EDIT#1 : I’ve raised an official bug ticket for it and further responce can be checked via this link:
http://bugs.dojotoolkit.org/ticket/16598

Answer 1

that is a dojox floatingpane bug, i don’t know if its reported or not, but it also happens when you use directly the class

dojox.layout.FloatingPane 

instead of

ParentConstrainedFloatingPane

and also if you change the dojo version (tried 1.8.3 to verify), so unless you are willing to get your hands messy fixing it, try reporting it to dojo too see if its been fixed.