nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

What is the equivalent of a FloatingPanel control

Hi all

In Dojo how do you use to replace the old Web ADF FloatingPanel control?

thanks

Find more posts tagged with

Accepted answers

All comments

Hi Jose,

I believe the 'dojox.layout.FloatingPane' is similar. Here is an example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
  <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=7" /> 
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/> 
    <title></title>   
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2/js/esri/css/esri.css">
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2/js/dojo/dojox/layout/resources/FloatingPane.css">
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2/js/dojo/dojox/layout/resources/ResizeHandle.css">
    <link rel="stylesheet" href="css/claro.css" type="text/css" media="screen" title="no title" charset="utf-8"/>    
    <script type="text/javascript">var dojoConfig = {parseOnLoad: true};</script> 
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.2"></script> 
    <script type="text/javascript">
        dojo.require("dijit.layout.BorderContainer"); 
        dojo.require("dijit.layout.ContentPane"); 
        dojo.require("dojox.layout.FloatingPane");
        dojo.require("esri.map"); 

        var map;
        
        function init() {
            var initialExtent = new esri.geometry.Extent({"xmin":-8396836.868209211,"ymin":4835062.442691721,"xmax":-8328196.416809216,"ymax":4891396.53253782,"spatialReference":{"wkid":102100}});
            map = new esri.Map("mapDiv", {extent: initialExtent})
            var baseMap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer");
            
            map.addLayer(baseMap);
           
            dojo.connect(map, "onLoad", function(theMap){
                dojo.connect(dijit.byId('mapDiv'), 'resize', map, map.resize);
            }); 
          } 
          
        function showMap() {
          if (!map) {
              init();
          }
        }
             
        dojo.addOnLoad(init);
    </script> 
  </head> 
   
  <body class="claro"> 
   <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline'"  style="width: 100%; height: 100%; margin: 0;"> 
    <div id="floater" dojoType="dojox.layout.FloatingPane"  title='Map' dockTo="dock" closable="false" resizable="true"  dockable="true" > 
      <div id="mapDiv" data-dojo-type="dijit.layout.ContentPane" style="height:100%;width:100%;">
          <input type="button" value="Show Map" onclick="showMap()" />
      </div>       
    </div>
   </div>
  </body> 
</html>

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.