floatingPane

[RichardMoussopo]

I have a declarative floatingPane that opens on a button click. but once closed, it won't open again. Apparently, the floating pane get destroyed after closing. how do I overwrite that behavior?

<div data-dojo-type="dijit/form/Button" id="measure" data-dojo-props="iconClass:'measureIcon'" title="Measure"

                    onclick="showDialogMeasure()">

</div>

<!--Dialog Measurements-->

    <div data-dojo-type="dojox.layout.FloatingPane" id="dFloatingPane"

        data-dojo-props="resizable:true, dockable:false, title:'Measurement'"

        style="position: absolute; top: 30%; left: 25%; width: 280px; height: 180px; visibility: hidden; padding: 0; margin: 0;">

        <div id="measurementDiv" class="divMeasurement"></div>

    </div>

function showDialogMeasure() {
    if (dijit.byId("dFloatingPane").style.visibility === "hidden") {
        dijit.byId("dFloatingPane").show();
    }
    dijit.byId("dFloatingPane").show();

}

[KenBuja · Accepted solution]

Take a look at this JSBin code that seems to work properly.

[RichardMoussopo]

Thanks Ken,

your short-cut is a really nice work around.

mine still does not show the down arrow but it does hide when I click on the top right corner of the title pane

[KenBuja]

Did you include the FloatingPane.css?

[RichardMoussopo]

Yes I did.

found it. was the image link in my css...

.dojoxFloatingMinimizeIcon {

  background:url('../../../dijit/themes/tundra/images/spriteArrows.png') no-repeat 0px center;

  width:7px;

  margin: 0px 4px;

  overflow:hidden;

  float:right;

}

thank you.

for now I am using this short-cut even thought it is just minimizing the panel on bottom of  of screen.

Thank you Ken

[AdrianMarsden]

Have a read of https://community.esri.com/message/342697?sr=search&searchId=e912b943-0f92-4cca-9ce3-093c5d40d80e&se...

A lot there about styling floating Panes

[StevenGraf1]

You shouldn't have to do anything special with the measurement widget.  All you need to do is load in the correct modules and take the code from ESRI and put it in your application.  I'm sure you're already using this sample.

Here is my HTML.

<div style="position:absolute; right:10px; bottom:40px; z-Index:999;-webkit-box-shadow: 0px 0px 5px 4px rgba(0,0,0,0.49); -moz-box-shadow: 0px 0px 5px 4px rgba(0,0,0,0.49); box-shadow: 0px 0px 5px 4px rgba(0,0,0,0.49);">
          <div id="titlePane" data-dojo-type="dijit.TitlePane" data-dojo-props="title:'Measurement', closable:'false', open:'false'">
            <div id="measurementDiv"></div>          
          </div>
        </div>

[RichardMoussopo]

Thank you Steven,

I could just use a simple div, but I do like the idea of the floating pane for my other tools and being able the move the panel around the page...

I wish the floating panel could be that simple, now it's almost 8 hours that I am trying to figure this thing out! 

[TedChapin]

The FloatingPane documentation mentions a way to overwrite the close behavior using a subclass.

http://dojotoolkit.org/reference-guide/1.10/dojox/layout/FloatingPane.html#dojox-layout-floatingpane

• When the widget is closed via the close button, it can no longer be shown: FloatingPane destroys itself when the close button is pressed. You must create a subclass of FloatingPane to override this behavior.

It would be good to hammer out these details so you can have a closable and reopenable floating pane that remembers the state of its contents.

[DavidStajan]

I've used this implementation of a floating widget in my app and it worked great.  There might be some useful code in there for others so I'm sharing the link

Spatial Agent GIS