Make responsive themes work with OpenLayers

I'm having the same problem - I recreated an OpenLayers Data Overlay view and the OpenLayers Map view and the problem persisted. I can resolve by downgrading the library to 2.11 (but retaining the latest dev of the module).

The previews in both the OpenLayers Map admin and in the Views admin display in correct proportion, it's only in the final rendered view (page or block) that the issue occurs.

Thanks to #1818436: CSS crashes the img tags, I realized that in my case this is caused by using in responsive theme (Zen Responsive) where all images are set to max-width:auto.

In my case, implementing the following css resolves the issue:

.openlayers-container img {
    max-width: none;
}

Of course, this only allows a non-distorted, but also non-responsive, map within a responsive layout.

@Rob_Feature, if this fixes your issue, I suggest that we change this to a feature request with a title like "Support Responsive Maps in OpenLayers." It was suggested in the roadmap for 3.x in #1353122: 3.x Goals

Hello,

I'm not against including the CSS bit fix, but I don't want to loose the responsive feature.

Any idea on how to fix this in a elegant way ?

in my opinion this issue isn't about making openlayers maps responsive, but fixing their appearance when using a responsive theme that declares

img { 
  max-width: 100%; 
}

responsive maps are a separate topic in my opinion, as just setting images to scale won't work for slippy maps that are compound of a grid of images.

thus i recommend:
- create a separate issue if you want responsive maps
- fix this issue by adding the following code to openlayers.css or add a note that for responsive base themes you need to declare this in your theme manually:

.openlayers-container img {
    max-width: none;
}

hope this helps

In any case, it would be usefull to add some documentation on this - if only to point out why there is a problem with responsive themes.

Fixed.

cool.

just a note: i saw from your commit that you are using 4 spaces for css indentation. would be better to keep with 2 spaces, as coding standards recommend.

Fixed again :) Thanks !