Map Won't Resize to Fill Div

[LauraMiles1]

I am working on a menu called "rightPanel" that slides left and right. I have a div called "leftPanel" that contains another div called "mapDiv", which contains the map. When rightPanel slides to the right, both leftPanel and mapDiv are stretching to fill the space where rightPanel used to be. However, the map is not updating to fill this space. I've tried using map.refresh(); but this seems not to do anything to my map. Anybody see what's going wrong? jsfiddle

(click the lock icon to slide rightPanel left and right)

[RobertScheitlin__GISP]

Laura,

   You need to call map.resize() after you hide the panel and possibly map.reposition() as well.

[LauraMiles1]

Hi Robert, thanks for quick reply. I added map.resize() and map.reposition() but it seems to be having a strange effect. About half of the space vacated by rightPanel now gets filled, but not all of it?

Updated jsfiddle

[ChrisSergent]

I changed your z-index for the map to 0 and your positioned your elements to absolute. Your map now fills the entire page. I added a right of 0% for the rightPanel. You can check out the updates here:

Edit fiddle - JSFiddle

[LauraMiles1]

Hi Chris, thank you for your suggestions. The solution you provided does work in IE but not in Chrome - I'm not sure what happened to the lock icon but it's not visible in Chrome anymore. However the map goes behind the menu when I would prefer it to be be beside. I'd like to keep the CSS as it was, it was functioning as I wanted it to, it was just the map itself that wasn't stretching to fill the white space.

Robert's suggestion of using map.resize() did work also, but only resizes the map to fill about 1/2 the space left when rightPanel slides...I wonder if this is because map.resize() and rightPanel's animation are happening simultaneously? I'm not sure how I should get around this?

[RobertScheitlin__GISP · Accepted solution]

Laura,

  You are correct. you have to wait for the annimation to complete. Here is how:

          //Slide main menu left and right
          $('#testdiv').click(function () {
              if ($('#rightPanel').css('margin-right') === '0px') {
                $('#rightPanel').animate({
                  marginRight: '-275px'
                }, "slow", function(){
                  mapObj.resize();
                  mapObj.reposition();
                });

                } else {
                  $('#rightPanel').animate({
                    marginRight: '0px'
                  }, "slow", function(){
                    mapObj.resize();
                    mapObj.reposition();
                  });
                }
            });

[LauraMiles1]

Works perfectly - thanks Robert!