Come together with the global Drupal community in Rotterdam, 28 Sept – 1 Oct 2026. Sessions, contribution, connection, and Early Bird savings until 8 June.Problem/Motivation
When its height is relative (%), a map does not appear on the preview page.
This is a consequence of an openlayers package change: version 5.0.0 does not suffer from it while 6.14.1 does.
Steps to reproduce
- Use openlayers 6.14.1.
- Create a map, set its height to 100%.
- Display preview page.
The browser console says "No map visible because the map container's width or height are 0.".
Proposed resolution
I have tried to fix it with a CSS-only solution, without success for all situations, even with flex containers.
If I set CSS rules to handle relative heights successfully, absolute heights do not display properly anymore.
min-height does not work: the ideal fix would be the openlayers package supports it.
IMO, a non-absolute height should be changed to some default (400px?) in PHP when displaying a map preview, maybe with a warning message.
| Comment | File | Size | Author |
|---|---|---|---|
| #5 | openlayers-map-preview-not-shown-if-height-is-relative-3275967-5.patch | 2.16 KB | ken-g |
Comments
Comment #1
Anonymous (not verified) commentedmonnerat created an issue. See original summary.
Comment #2
Anonymous (not verified) commentedComment #3
ken-g commentedHi @monnerat,
I have been doing some further investigation around this issue. This problem appears to be a lot more widespread than just previewing a map - it also happens when an Openlayers map is displayed in a View or a Geofield Formatter. In fact I even created the issue when displaying a map on a simple HTML page. So, it is nothing to do with Drupal.
As you say, the map disappears when moving from v5 to v6. However, this only works in v5 because Openlayers appears to set the height to be half the width, which is not really a solution at all.
So, we need to come up with a proper solution for relative heights expressed as a percentage.
Having researched this further, the underlying issue is the use of "height: nnn%" in the first place. What does this actually mean ? % of what ? % of the browser window ?
In general html/css terms, setting the height of a div container only works if the parent container(s) are also set to 100% or a fixed height.
It is confusing if a map is not shown at all, so our options for resolving this issue appear to be:
1) Deprecate the use of "height: nnn%", and encourage the use of "height: nnnpx" instead
2) Deprecate the use of "height: nnn%", and encourage the use of "height: nnnvh" instead
3) Continue to allow the use of "height: nnn%", but automatically convert it to a pixel-based height (same as option 1 really).
I have assumed all along that the issue you are trying to solve is for the Openlayers map to use 100% height of the browser window. If that is the case, isn't option above the simplest solution ?
Your thoughts / comments on all of the above ?
Comment #4
Anonymous (not verified) commentedHi Ken,
Thanks for your comment.
Yes, I definitely think it's a OL package problem and ought to be fixed/improved there. The behavior is correct if we consider only the CSS height property. Alas, it seems neither the effective height nor the min-height property is handled. Thus we should workaround it.
In fact, it is possible to use percents with version 6 if the CSS targets it.
The recipe is to have a defined height for the external container. From what I've noted, the OL API determines the effective map height from it if % is given. I did not check the JS code, but noted that by trials.
I made relative-height maps work in a panels pane with CSS rules. Although not very versatile, this is doable on a case by case basis and should also be doable for views, etc. Thus I see no real problem outside the preview form.
The problem with the preview is that it should work both with absolute and relative heights. In my trials, I managed to have a relative-height map preview displayed (with a default height), but absolute-height map previews were bad with the same parameters. This case is however limited to the preview form, as occurrences of maps in real web pages are either absolute or relative, not both.
This is why I suggested a particular processing for the preview page: relative heights are perfectly legal in real use, thus we can preview them with a default height and a message telling something as:
Warning: this map has a relative height and is previewed as if it were xxx pixels high. An effective use of it requires additional CSS rules.I use a 100% height as you supposed. I did not check with other percentages.
I am not convinced by your limiting alternatives as it effectively prevents using relative heights. I would apply 3) for preview only.
Agreed, but at least this shows something where the map should be !
Comment #5
ken-g commentedHi @monnerat,
Many thanks for your comments.
So, if we concentrate on fixing the preview screen as you originally posted, how about this as a simple patch ? If a non-absolute (%) value is used for the map height, the preview screen defaults to 400px as you originally suggested, with a warning message.
Comment #6
Anonymous (not verified) commentedMany thanks for the proposed patch.
I tried it and it does exactly what I was thinking of. Nice and concise !
Please note that if we set the height to "auto" (or any illegal value), the problem subsists. This is however less important as "auto" targets the content, not the container, which is exactly the reverse we want to achieve. IMO this should not be handled, except maybe documenting it.
Many thanks again.
Patrick
Comment #8
ken-g commentedFixed in 7.x-3.2 release.