topic Re: How to refresh div's size? in ArcGIS JavaScript Maps SDK Questions

How to refresh div's size?

leonidkostuyk — Sat, 11 Dec 2021 17:33:51 GMT

I am trying create toggle bottom div, but center div does not updates its size. What is wron?

When I resize browser window, all divs became right size.

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Example</title>
    <link rel="stylesheet" href="http://js.arcgis.com/3.18/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.18/esri/css/esri.css">
    <style>
        html,
        body {
            height: 100%;
            width: 100%;
            margin: 0%;}
    </style>
    <script src="http://js.arcgis.com/3.18/init.js"></script>
    <script>
        require(["esri/map", "esri/dijit/Basemap", "dojo/parser"], function(
            Map, Basemap, parser
        ) {
            parser.parse();
            map = new Map("map", {
                basemap: "osm",
                center: [37.6,55.7],
                zoom: 8,
            });
        });

        function toggle_visibility(id) {
           var e = document.getElementById(id);
           var s = document.getElementById(id+'_splitter');
           if(e.style.display == 'none'){
               if (s){ 
                 s.style.display = 'block';
                 e.style.display = 'block';             
               }
           }  else {
              if (s){ 
               s.style.display = 'none';
               e.style.display = 'none';              
              }
           };                     
       };
    </script>
</head>
<body class="claro">
    <div id="contentAll" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="region:'center'" style="width: 100%; height: 100%; margin: 0;">
        <div id="content" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="region:'center'" style="width: 100%; height: 100%; margin: 0;">
            <div id="navToolbar" data-dojo-type="dijit/Toolbar" data-dojo-props="region:'top'" >
                <div data-dojo-type="dijit/form/Button" id="tableButton"  data-dojo-props="onClick: function(){toggle_visibility('bott')}">Show/Hide bottom table</div>               
            </div>
            <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'" style="overflow:hidden">
            </div>
        </div>
        <div id="bott" data-dojo-type="dijit/layout/ContentPane" data-dojo-props='region:"bottom", splitter:true, style:"height:150px"'>
        </div>
    </div>
</body>
</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: How to refresh div's size?

FC_Basson — Sat, 11 Dec 2021 17:33:54 GMT

Remove the onClick event from the prop attribute of the button and specify it as a seperate attribute:

<div data-dojo-type="dijit/form/Button" id="tableButton" onClick="toggle_visibility('bott')">Show/Hide bottom table</div>‍‍

Also place your "bott " element within the "content" div.

Then change your toggle_visibility function to resize the map div (assuming that is what you want to happen):

function toggle_visibility(id) {
  var e = document.getElementById(id);
  var s = document.getElementById(id + '_splitter');
  var m = document.getElementById('map');
  if (e.style.display == 'none') { 
    if (s) { 
      s.style.display = 'block';
      e.style.display = 'block';
      m.style.height = document.body.scrollHeight -240 + 'px'
    }
  } else { 
    if (s) {
      s.style.display = 'none';
      e.style.display = 'none'; 
      m.style.height = document.body.scrollHeight - 70 + 'px'
    }
  }
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: How to refresh div's size?

leonidkostuyk — Fri, 02 Dec 2016 03:12:50 GMT

Unfortunately it does't work correctly: after clicking on button div 'map' does't display map in the place where bottom div disappeared. It displays map with the same size.

Re: How to refresh div's size?

RobertScheitlin__GISP — Sat, 11 Dec 2021 17:33:57 GMT

Leonid,

You have to work with BorderContainer differently:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Example</title>
    <link rel="stylesheet" href="http://js.arcgis.com/3.18/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.18/esri/css/esri.css">
    <style>
        html,
        body {
            height: 100%;
            width: 100%;
            margin: 0%;}
    </style>
    <script src="http://js.arcgis.com/3.18/init.js"></script>
    <script>
        require([
          "esri/map", "esri/dijit/Basemap",
          "dijit/registry", "dojo/on", "dojo/dom", "dojo/parser",
          "dijit/form/Button", "dijit/Toolbar", "dijit/layout/BorderContainer", "dijit/layout/ContentPane",
          "dojo/domReady!"
        ], function(
            Map, Basemap, registry, on, dom, parser
        ) {
            parser.parse();
            map = new Map("map", {
                basemap: "osm",
                center: [37.6,55.7],
                zoom: 8,
            });

            on(dom.byId("tableButton"), "click", function(){
              toggle_visibility("bott");
            })

            function toggle_visibility() {
              var appLayout = registry.byId("contentAll");
              var bottPanel = registry.byId("bott");
              var panelIndex = appLayout.getIndexOfChild(bottPanel);
              if(panelIndex >= 0) {
                  appLayout.removeChild(bottPanel);
              } else {
                  appLayout.addChild(bottPanel);
              }
              appLayout.resize();
            }
        });
    </script>
</head>
<body class="claro">
    <div id="contentAll" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="region:'center'" style="width: 100%; height: 100%; margin: 0;">
        <div id="content" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="region:'center'" style="width: 100%; height: 100%; margin: 0;">
            <div id="navToolbar" data-dojo-type="dijit/Toolbar" data-dojo-props="region:'top'" >
                <div data-dojo-type="dijit/form/Button" id="tableButton">Show/Hide bottom table</div>
            </div>
            <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'" style="overflow:hidden">
            </div>
        </div>
        <div id="bott" data-dojo-type="dijit/layout/ContentPane" data-dojo-props='region:"bottom", splitter:true, style:"height:150px"'>
        </div>
    </div>
</body>
</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: How to refresh div's size?

leonidkostuyk — Mon, 05 Dec 2016 06:57:18 GMT

Thank you very much for your help!