Resize brower window on mobile app

MayJeff

I try to perform a query search and click on the "view map" to zoom to specific parcel on the map. Everything works fine until you click the "Result button" back to query results list and resize the browser window then try to click on "View Map"  again. The map totally shows blank.

Here is my jsfiddle:

Edit fiddle - JSFiddle

Hope someone can give me some ideas.

Thank you.

khutchins

The reason this is happening is because its attempting to resize the map when its not visible which causes display issues. To resolve this I made two modifications to your source code. The first was to set the autoResize constructor option for the map to false to prevent the map from trying to resize itself each time the browser size changes.

            map = new esri.Map("map", {
                          basemap: "streets",
                          center: center,
                          zoom: zoom,
                          autoResize:false
                        });

The second update was to add logic to resizeMap to prevent it from trying to resize the map when the map view isn't visible. Here I check the display value and if its equal to none I exit resizeMap without modifying the map height.

  function resizeMap() {
                      //only resize when map view is visible
                      var selected = domStyle.get(dom.byId("mapView"),"display");
                      if(selected === "none"){
                        return;
                      }
                        mobile.hideAddressBar();
                        adjustMapHeight();
                        map.resize();
                        map.reposition();
                    }

Here's a revised version of your code showing those updates.

Mobile Map