Hi,
This issue has been widely discussed and users have provided many solutions. However, I am finding it hard to implement this function for my application.
My application has a tab container with two tabs. Each tab has a map div - mapM and mapA. I would like each map to resize itself when I move the application from one screen size to another. I have tried some of the solutions from this forum, but it has not worked for me. Maybe I am not inserting the code at the right place. I'll appreciate any help.
Thanks Samir
Here is what I have:
HTML code:
<html>
<body>
...
<div id="projectTabContainer" dojoType="dijit.layout.TabContainer" style="width: 100%; height: inherit;">
<div id="mappingTab" dojoType="dijit.layout.ContentPane" title="Mapping" selected="selected">
<div id="mapM" dojotype="dijit.layout.ContentPane" region="center"></div>
...
</div>
<div id="analysisTab" dojoType="dijit.layout.ContentPane" title="Analysis" >
<div id="mapA" dojotype="dijit.layout.ContentPane"></div>
...
</div>
</div>
</body>
</html>
CSS code:
html {
height: 100%; width:100%;margin:0; padding:0; overflow:auto;
}
body {
background-color: #505050; overflow: auto; font-family: "Calibri"; width:100%; height:92%;margin:0; padding:0;
}
#projectTabContainer {
position: absolute; top: 75px;
}
#mapM, #mapA {
position:absolute; width:99%; height:99%; padding:0;
}
...
JS code:
function init(){
...
var selectChildEvent = dojo.subscribe("projectTabContainer-selectChild", null, onSelectChild);
dijit.byId('projectTabContainer').selectChild(dijit.byId('analysisTab'));
dijit.byId('projectTabContainer').selectChild(dijit.byId('mappingTab'));
dojo.unsubscribe(selectChildEvent);
...
mapM.addLayer(BaseMapM);
dojo.connect(dijit.byId('mapM'),'onLoad', mapM, function(map){
mapM.resize();
});
mapA.addLayer(BaseMapA);
dojo.connect(dijit.byId('mapA'),'onLoad', mapA, function(map){
mapA.resize();
});
...
}
function onSelectChild(page){
switch(page.id){
case 'mappingTab':
mapM = new esri.Map("mapM", {extent : iniExtentM});
...
mapM.addLayer(StreetMapM);
...
break;
case 'analysisTab':
mapA = new esri.Map("mapA", {extent : iniExtentA});
...
mapA.addLayer(StreetMapA);
...
break;
}
}
...
dojo.addOnLoad(init);
