search

neveldo / jQuery-Mapael

jQuery plugin based on raphael.js that allows you to display dynamic vector maps
https://www.vincentbroute.fr/mapael/
MIT License
1.01k stars 196 forks source link

Map not resizing when used with CSS grid #383

Open zeman opened 6 years ago

zeman commented 6 years ago

Map works great within a normal div and resizes itself responsively. But when using CSS display: grid; the map no longer resizes and stays at the default width.

neveldo commented 6 years ago

Hello @zeman ,

Could you provide your work-in-progress through JSFiddle ? Maybe you should keep the container of mapael with a position: relative and encapsulate it within your grid ?

zeman commented 6 years ago

Here's one of your examples with a simple display:grid added. The map will scale up but not down as you shrink the browser. I'm testing in the latest Chrome. Tried adding a position:relative but didn't help.

http://jsfiddle.net/8a60jbhL/2/

neveldo commented 6 years ago

Hello,

Sorry for my very late answer ! Did you manage to get a solution ?

I have made some investigations. It seems that the '.map' container size ($('.map').width();) is properly updated when the window is sized up (and, in that case, the map resize behavior is triggered), but it's not the the case when it's sized down, the size of the container is not adjusted anymore . I didn't found why for now (I'm not familiar with the display:grid CSS).

BTW, I found some issues that seem related : https://github.com/rachelandrew/gridbugs/issues/16