Issues with ArcGIS JSAPI in a jQuery UI Accordion?

Question

Has anyone had success using an ArcGIS Javascript API map within a jQuery UI accordion? I have a simple example here:

http://chadwilcomb.com/maps/test/AGS_jQueryUI.htm

There is an offset between the mousedown location and the map. For instance, if you SHIFT + Drag to zoom, you will see the zoom box is severely offset from the mouse location. Also, if you double-click to zoom, the map centers on a different location than where you double-clicked. I have checked all the CSS settings in Firebug and nothing seems to really help. Anyone have any other ideas?

Additional info:

I originally experienced this problem within an ASP.NET MVC3 View, but as you can see it still occurs in a simple HTML file.

The original map had a mouseover tooltip dialogue on a feature layer and that worked as expected.

The same behavior exists when using the Dojo Accordion as well...

http://chadwilcomb.com/maps/test/AGS_DojoAccordion.htm

• Michael Markieta: Strange, the mousedown location is the same distance (height) away from the top of the map div as the height of the stacked accordion headers.
• Michael Markieta: Notice that when you resize the browser window, your map div container resizes to the proper extent. When this happens, your mousedown location is actually corrected!
• awesomo: Looks like Derek answered your specific question, but related issue, I have been including dijit.popup._beginZIndex = 5000; when I place a dojo esri dijit within a jquery container. For example, when putting the measure dijit in a jquery dialog, the dijit dropdown boxes display behind the jquery dialog. Starting the z index for the dijit solves this problem.

Answer 1

Call map.reposition() after your map div is repositioned (e.g., when your pane with the map in it is shown).

• chadwilcomb: Thanks Derek! I added the following to my jQuery: $("#accordion").accordion({ change: function () { map.reposition(); } })
• Derek Swingley: :) Glad to help!