From 6d81afb3951238a2b0d9604f44b32f152ad81062 Mon Sep 17 00:00:00 2001 From: Chandler Swift Date: Sat, 30 Nov 2024 12:26:39 -0600 Subject: [PATCH] Fix mobile popups to window This doesn't really do all that great a job; Leaflet doesn't really seem to be equipped to do this well (or, more likely, I'm just not figuring out how to do it!). The hack with the extra container is necessary because the transform on the `.leaflet-map-pane` element creates a new stacking context, which messes up even `position: fixed`. I wasn't able to figure out a way to get around this. Written on an airplane without an internet connection, so per the XKCD I'd link but can't, "my apparent IQ goes down like 30 points when [I don't have docs handy; orig "Wikipedia is down"]"! --- map.html | 35 ++++++++++++++++++++++++++++++++++- 1 file changed, 34 insertions(+), 1 deletion(-) diff --git a/map.html b/map.html index 6c4e38c..475b983 100644 --- a/map.html +++ b/map.html @@ -31,10 +31,36 @@ top: 10px; text-shadow: 0 0 2px white; } + .leaflet-popup-content-wrapper { + height: min(800px, 60vh); + overflow-y: auto; + } + #popupcontainer { + position: relative; + z-index: 1000; + } + #popupcontainer .leaflet-popup-content-wrapper { + height: unset; + } + #popupcontainer .leaflet-popup { + transform: none !important; + position: fixed; + width: 100vw; + height: 100vh; + right: 0; + left: 0 !important; + top: 1em; + bottom: 1em !important; + overflow: auto; + } + #popupcontainer .leaflet-popup-content { + width: initial; + }
+