topic Re: Map in hidden accordian no loading in Firefox in ArcGIS JavaScript Maps SDK Questions

Map in hidden accordian no loading in Firefox

BillDaigle — Thu, 15 Jan 2015 19:45:43 GMT

We are working on implementing a responsive design to our website. Much of our content is now nested in css-based accordian panes. We have some maps that are nested in accordion panes. In Firefox (I have 31.4 ESR version), the map won't load if the accordion pane is originally collapsed. The problem appears to be that the map frame is missing dimension when the parent container is hidden. Internet explorer must handle hidden content differently; it works fine in IE9.

The following example should demonstrate the problem. As it is, the example will fail in FF.

Edit fiddle - JSFiddle

Our website content manager would like the map to be collapsed when the page opens. I'm not sure how to make this happen in FF. Any suggestions?

Re: Map in hidden accordian no loading in Firefox

JohnGrayson — Fri, 10 Dec 2021 22:42:38 GMT

Does it work if you use:

.hiddenContent {
    visibility:hidden;
}
.visibleContent {
    visibility:visible;
}

Re: Map in hidden accordian no loading in Firefox

KenBuja — Thu, 15 Jan 2015 20:01:40 GMT

Firefox returns some errors that IE and Chrome don't show.

Re: Map in hidden accordian no loading in Firefox

BillDaigle — Thu, 15 Jan 2015 20:11:32 GMT

Not really. The map works, but the container doesn’t collapse. It’s just hidden. http://jsfiddle.net/uo0f0xzn/3/

Re: Map in hidden accordian no loading in Firefox

BillDaigle — Thu, 15 Jan 2015 20:17:32 GMT

Yup. This is the same error you get in all browser if you try loading a map without a defined height and width.

Re: Map in hidden accordian no loading in Firefox

KenBuja — Thu, 15 Jan 2015 20:32:01 GMT

Since you're working with an embedded map, would you have in something like the function from Kelly's post?

Re: Map in hidden accordian no loading in Firefox

BillDaigle — Thu, 15 Jan 2015 21:57:09 GMT

Hmm….it may indeed. The map I have in the IFrame uses a load script. I think can update the load script to defer map loading if the parent(s) are not visible when the page loads. I like it. I’ll give it a shot. Good find!

Re: Map in hidden accordian no loading in Firefox

JohnGrayson — Thu, 15 Jan 2015 22:32:56 GMT

Yes, you'll have to wait until the div you want to put your map into has an appropriate size. This sample doesn't use an iframe, but shows the basic concept.

map in hidden container - JSFiddle

Re: Map in hidden accordian no loading in Firefox

BillDaigle — Thu, 15 Jan 2015 23:43:00 GMT

Good example John. I would, however, like something a little more generic since I have a number of differently developers that have implemented my map code in a number of different ways. I use the load script to handle idiosyncrasies as they crop up. Ideally I would like to check if the parent div is displayed when the createMap function is called and add a listener for a generic listener for a style change if it's not. Unfortunately, most browser don't support the onresize event on dom elements. An iterative timeout is the best I could come up with.

map in hidden container - JSFiddle

Any other suggestions?

Re: Map in hidden accordian no loading in Firefox

JohnGrayson — Fri, 16 Jan 2015 00:08:01 GMT

Bill, I guess I'm fortunate as I almost always work within the dojo/layout framework for my UIs. The dojo/layout/* containers provide events that inform me when a child pane is selected and it's within these events that I place my map creation code.