I am looking at this example: ArcGIS API for JavaScript Sandbox
So I guess I am asking how to control two containers.
When one opens it sizes to 40% height and 100% width
When it closes the map window resizes to 100%
Solved! Go to Solution.
I was able to do it this way....any other suggestions to improve welcome
I open the div when the user completes the drawing of the polyline with:
dijit.byId("profilecontainer").domNode.style.visibility = 'visible';
<div id="elevationdiv" data-dojo-type="dijit/TitlePane" data-dojo-props="title:'Elevation', closable:false, open:false">
<div id="info2" >
<label>Digitize a route:</label>
<button id="Polyline" type="button">Polyline</button>
<button id="FreehandPolyline" type="button">Freehand Polyline</button>
<label>Select unit measure:</label>
<select id="unitsSelect">
<option value="esriMiles">Miles</option>
<option value="esriKilometers">Kilometers</option>
<option value="esriMeters">Meters</option>
<option value="esriNauticalMiles">Nautical Miles</option>
<option value="esriYards">Yards</option>
<option value="esriFeet">Feet</option>
</select>
</div>
</div>
<div id="map" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="region:'center'" style="height:100%">
<div id="profilecontainer" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'bottom'" >
<div id="profileChartNode"></div>
</div>
</div>
on(dom.byId("elevationdiv"), "click", function() {
if (dijit.byId("elevationdiv").open) {
//alert("open");
}
if (!dijit.byId("elevationdiv").open) {
//alert("closed");
dijit.byId("profilecontainer").domNode.style.visibility = 'hidden';
map.graphics.clear();
epWidget.clearProfile(); //Clear profile
}
});
I think I have it working....just testing....so dont waste your time on this...after I post my results I might have a question or two....
I was able to do it this way....any other suggestions to improve welcome
I open the div when the user completes the drawing of the polyline with:
dijit.byId("profilecontainer").domNode.style.visibility = 'visible';
<div id="elevationdiv" data-dojo-type="dijit/TitlePane" data-dojo-props="title:'Elevation', closable:false, open:false">
<div id="info2" >
<label>Digitize a route:</label>
<button id="Polyline" type="button">Polyline</button>
<button id="FreehandPolyline" type="button">Freehand Polyline</button>
<label>Select unit measure:</label>
<select id="unitsSelect">
<option value="esriMiles">Miles</option>
<option value="esriKilometers">Kilometers</option>
<option value="esriMeters">Meters</option>
<option value="esriNauticalMiles">Nautical Miles</option>
<option value="esriYards">Yards</option>
<option value="esriFeet">Feet</option>
</select>
</div>
</div>
<div id="map" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="region:'center'" style="height:100%">
<div id="profilecontainer" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'bottom'" >
<div id="profileChartNode"></div>
</div>
</div>
on(dom.byId("elevationdiv"), "click", function() {
if (dijit.byId("elevationdiv").open) {
//alert("open");
}
if (!dijit.byId("elevationdiv").open) {
//alert("closed");
dijit.byId("profilecontainer").domNode.style.visibility = 'hidden';
map.graphics.clear();
epWidget.clearProfile(); //Clear profile
}
});