Using bootstrap alongside Jquery/Javascript and Leaflet maps, I am facing an issue. Inside the pBody div lies the map div, along with a sidebar div. The toggle switch above collapses the sidebar div and should expand the width of the pBody div from span9 to span11. Although the collapsing functionality works well with CSS, the problem arises when the map fails to redraw to fit the new size of the div. I have attempted the following code:
$("#toggle").click(function (event) {
event.preventDefault();
$('#pBody').toggleClass('span9');
$('#pBody').toggleClass('span11');
//L.Util.requestAnimFrame(map.invalidateSize, map, !1, panelBody._container);
//The above line was tested, but the issue still persists.
$("#map").width("100%");
map.invalidateSize(false); //this is a leaflet function that should redraw the map.
});
The additional space in the map div is filled with grey, resulting in erratic behavior when zooming in or out. Sometimes the map fully occupies the expanded space, while other times it includes the grey filler.