On a site with the OpenLayers module, I noticed that a freshly created Aurora sub theme (corona based) breaks the OpenLayers map in a strange way. Bartik works just fine; just compare the images attached.

Does anyone understand what's going on here? I couldn't figure out how the OpenLayers markup works, but perhaps it some max-width rule somewhere?

#3 source.html_.txt17.38 KBmarcvangend
map-bartik.png520.14 KBmarcvangend
map-aurora.png299.97 KBmarcvangend


What are your JavaScript settings for your subtheme?

Also, do you have source for that for me to look at?

new17.38 KB

Thanks for looking into this.

All settings are default, so the info file says:

name =  mytheme
description =  mytheme theme based on the Aurora base theme.
core = 7.x
base theme = aurora
; Stylesheets
stylesheets[all][] = stylesheets/style.css
; Regions
regions[header]         = Header
regions[main_prefix]    = Main Region Prefix
regions[highlighted]    = Highlighted
regions[help]           = Help
regions[content]        = Content
regions[sidebar_first]  = Primary Sidebar
regions[sidebar_second] = Secondary Sidebar
regions[main_suffix]    = Main Region Suffix
regions[footer]         = Footer
; Chrome Frame Options
settings[aurora_enable_chrome_frame] = 1
settings[aurora_min_ie_support] = 10
; Miscelaneous Options
settings[aurora_remove_core_css] = 0
settings[aurora_html_tags] = 1
settings[aurora_typekit_id] = 0
; JavaScript Options
settings[aurora_footer_js] = 1
settings[aurora_libraries_head] = 0
; Toggle Display
settings[toggle_logo] = 1
settings[toggle_name] = 1
settings[toggle_slogan] = 0
settings[toggle_node_user_picture] = 0
settings[toggle_comment_user_picture] = 0
settings[toggle_comment_user_verification] = 1
settings[toggle_favicon] = 1
settings[toggle_breadcrumbs] = 0
; Development Options
settings[aurora_rebuild_registry] = 1
settings[aurora_livereload] = 0
settings[aurora_viewport_width] = 1
settings[aurora_modernizr_debug] = 1
; Experimental Options
settings['aurora_custom_js_handling'] = 0

I installed Modernizr 7.x-3.0-dev (today's build) and jQuery Update 7.x-2.3-alpha1. Switching from jQuery version 1.5 to 1.8 didn't solve the problem.

I am attaching the source of the page. (Just anonymized some strings containing the client name.) If you want, I can put it on a server and send you a personal message with the url.

After digging in the source code some more, I found that:

  • the element #OpenLayers.Map_2_OpenLayers_Container has inline style width:100px
  • two levels down, there are 256x256 px images with class 'olTileImage' and inline style width:256%
  • those images are restricted by Aurora's (rather sensible) default max-width:100%

I was able to fix the problem using a simple CSS rule in my theme:

.olTileImage {
  max-width: none;

This works great for now, but I'm not sure what the real fix should be. I don't expect Aurora to include all kinds of exceptions and hard-coded classnames to support 3rd party libraries, but on the other hand, I guess we can't expect OpenLayers to change its map widget all of a sudden.

Status:Active» Closed (works as designed)

If I am reading this correctly, then Aurora is working as it should by making images responsive. This seems like a weird thing for OpenLayers to do, but I dont see a way to "fix" it more than what you have already done. If there is a fix you can think of that is more comprehensive-- let us know. Until then, I will close this issue out.

I think you are correct. Aurora is not broken. Open Layers is not broken either (although it's a bit weird). The two are just a little bit incompatible. Let's just hope people will find this thread when they need it.

Issue summary:View changes

some additional info