AnsweredAssumed Answered

How to refresh div's size?

Question asked by leonid.ko on Dec 1, 2016
Latest reply on Dec 4, 2016 by leonid.ko

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>

Outcomes