Auto resize map to 100% after content pane is removed in ArcGIS JavaScript API

Question

I'm using ArcGIS JavaScript API 3.6.

I have a map layout with a bordercontainer and two contentpanes, One is the map div and the other is the left div (which holds the legend, and basemaps and such as child elements).

I have a checkbox element on the footer that when clicked, fires off a function that (should ideally) make the left div disappear and the map div expand to the width of the browser.

function toggleDiv() {
 // If statement to check if the checkbox is checked.
if (dijit.byId("ToggleLeft").checked) {
 //Sets the left div's display CSS property to inline and then setting the
 //width property
 dojo.setStyle(dijit.byId("leftDiv").domNode, 'display', 'inline');
 dojo.byId("leftDiv").style.width = '285px';
}
else
{
 // Sets the display css property to "none" which makes the element disappear 
 dojo.setStyle(dijit.byId("leftDiv").domNode, 'display', 'none');
};

}

When I resize the browser, the map automatically resizes to the width of the browser. However, I want to do this as soon as the leftDiv element disappears.

What JavaScript code would I have to use to get this to happen?

Answer 1

Want to improve this post? Provide detailed answers to this question, including citations and an explanation of why your answer is correct. Answers without enough detail may be edited or deleted.

The answer I was looking for was provided at Auto resize map div/container to 100% after a content pane is removed from the layout.

Answer 2

Try resizing the border container as well as the map. (For me, I added a small delay to make the map redraw properly.)

//Resizes the border container
dijit.byId("border-container").resize();
//Resizes the map after 500 ms
setTimeout(function () { 
 map.resize();
}, 500);