OpenLayers map rows not aligning OpenLayers map rows not aligning codeigniter codeigniter

OpenLayers map rows not aligning


so i found the solution to the problem, and im posting it if anyone else runs into the same issue.

The problem lies within Bootstrap Twitter styling. But, the twitter team has created a ID tag that fixes the issue. Using ID="map_canvas" fixes the problem.

The code that puts some sort of max width on the tiles of the map:

Bootstrap.css - Line 64-74:

img {  max-width: 100%;  vertical-align: middle;  border: 0;  -ms-interpolation-mode: bicubic;}

The solution is found on line 76-78(boostrap.css):

#map_canvas img {  max-width: none;} 

Hope this helps for anyone else! Have a nice day!


Ran into the same problem but didn't want to change the id of my OpenLayers container.You can fix for an arbitrary div by using the same CSS rule:

<style>#mapCanvas img { max-width:none; } /* make Boorstrap work with OpenLayers */</style>