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>
Solved! Go to Solution.
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>
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'
}
}
}
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.
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>
Thank you very much for your help!