Map in hidden accordian no loading in Firefox

4112
9
Jump to solution
01-15-2015 11:45 AM
BillDaigle
Occasional Contributor III

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?

Tags (3)
0 Kudos
1 Solution

Accepted Solutions
KenBuja
MVP Honored Contributor

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

View solution in original post

0 Kudos
9 Replies
JohnGrayson
Esri Regular Contributor

Does it work if you use:

.hiddenContent {
    visibility:hidden;
}
.visibleContent {
    visibility:visible;
}
0 Kudos
BillDaigle
Occasional Contributor III

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

0 Kudos
KenBuja
MVP Honored Contributor

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

firefox.png

0 Kudos
BillDaigle
Occasional Contributor III

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

0 Kudos
KenBuja
MVP Honored Contributor

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

View solution in original post

0 Kudos
BillDaigle
Occasional Contributor III

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!

0 Kudos
JohnGrayson
Esri Regular Contributor

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

BillDaigle
Occasional Contributor III

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?

0 Kudos
JohnGrayson
Esri Regular Contributor

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.

0 Kudos