Some unusual layout issues are occurring that seem to be related to CSS.
The main div, toolbar div, and the closed dojo expandopane are causing problems. Initially, the top of the main div overlaps the toolbar until the expando pane is expanded once. After this, everything appears fine. Additionally, the scale_bar is not properly integrated into the toolContainer.
Below is the HTML body:
<!DOCTYPE html>
<html dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
<title>A Company | SIG WEB</title>
<script>
var dojoConfig = {
parseOnLoad: false,
async: true,
packages: [
{
name: "agsjs",
"location": '/SPE_SIG/agsjs' // for xdomain load
}, {
name: "js",
"location": '/test/js'
}]
};
</script>
<link rel="stylesheet" href="http://js.arcgis.com/3.17/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.17/esri/css/esri.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.18/dojox/layout/resources/ExpandoPane.css">
<link rel="stylesheet" href="css/widget_styles.css">
<script src="http://js.arcgis.com/3.17/"></script>
<script src="js/Map.js"></script>
<!--<script type="text/javascript">
dojo.require("dojox.layout.ExpandoPane");
</script>-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(window).load(function() {
$(".loader").fadeOut("slow");
})
</script>
</head>
<body class="claro">
<div class="loader"></div>
<div class = "contentclass" id="content" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'sidebar', gutters:true" style="width: 100%; height: 100%; margin: 0;">
<div id="rightPane" data-dojo-type="dojox/layout/ExpandoPane" data-dojo-props="region:'right',title:'Outils',startExpanded:false">
<div data-dojo-type="dijit/layout/AccordionContainer">
<!-- <div data-dojo-type="dijit/layout/ContentPane" id="legendPane" data-dojo-props="title:'Légende', selected:true">
<div id="legendDiv"></div>
...
The CSS code used is as follows:
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
z-index:0;
}
...
.scaleBarClass {
display: inline-block;
float: right;
padding: 15px 115px;
}
To view a simplified version of the issue on a public URL, click here. Here's how the page initially loads (with a slight map overlap over the toolbar): https://i.sstatic.net/MtiVL.jpg
And here's how it looks after expanding the 'expandopane'—the elements align correctly: https://i.sstatic.net/qBJSZ.jpg