Openlayers + Bootstrap tiles missing
Posted on Apr 19 2014 by Matthew Jakeman
I’ve just implemented a mapping system that uses openlayers for the mapping engine. I am also using twitter bootstrap to help with the CSS for the site.
Unfortunately these two together result in only half of the tiles being displayed in the map. This is down to bootstrap setting a global property for the img tag as follows:
img { max-width:100%; }
This can be overcome by overriding this setting for your map as follows (presuming your map has an id of #map)
.map img { max-width:none; }
Thanks to this blog post for pointing me in the right direction.