Skip to content

fix: use viewport units for percentage map dimensions (fixes #2186)#2229

Open
Kakarot35 wants to merge 6 commits into
python-visualization:mainfrom
Kakarot35:fix/height-viewport-units-2186
Open

fix: use viewport units for percentage map dimensions (fixes #2186)#2229
Kakarot35 wants to merge 6 commits into
python-visualization:mainfrom
Kakarot35:fix/height-viewport-units-2186

Conversation

@Kakarot35
Copy link
Copy Markdown
Contributor

Fixes #2186

Problem

folium.Map(height='100%') collapses to nearly zero height when the map
is embedded inside a Django or Flask template. This happens because
height: 100% in CSS requires every ancestor element to have an explicit
height — which page templates typically don't have.

Similarly, folium.Map(height='1000px') can shrink in a non-maximized
browser window because there is no minimum floor set.

Changes

  • Viewport units for percentages: when height or width is given as
    a percentage, emit vh/vw instead of %. Viewport units are always
    relative to the browser window size, not the ancestor chain, so they work
    correctly in both standalone and embedded (Django/Flask) contexts.

  • Min constraints for pixel sizes: when height or width is given in
    pixels, also emit min-height/min-width so the map cannot shrink below
    its intended size in a smaller window.

  • Remove dead CSS rule: the template was emitting
    #map { position:absolute; ... } which never matched anything — folium
    uses hashed IDs like map_d7a447c..., not map. Removed.

Before / After

/* Before — collapses in embedded templates */
#map_abc123 { height: 100%; }

/* After — always fills the viewport correctly */
#map_abc123 { height: 100vh; }

Tests

13 new tests added covering percentage → viewport units, pixel → min
constraints, dead rule removal, and full backwards compatibility.

@Kakarot35
Copy link
Copy Markdown
Contributor Author

@hansthen The failing "Publish Docs" check was caused by a missing export in folium/plugins/init.py — now fixed and merged via #2230. This PR should be good to review now. Would appreciate your feedback!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add better control for height when browser window is not maximized

1 participant