Refactor: ipyleaflet examples used z-index instead of isolation (#…

…441)

`isolation: isolate` is more universal

solara/website/pages/docs/content/10-howto/ipywidget_libraries.md

@@ -50,6 +50,8 @@ def Page():
 Note that this is about the worst example of something that looks easy in ipyleaflet using the classical API becoming a bit more involved in Solara.
 In practice, this does not happen often, and your code in general will be shorter and more readable.
 
+Another thing of note is that ipyleaflet uses CSS `z-index` to layer content, potentially causing issues with your map overlaying other content. This can be avoided by styling the parent element of the map with `isolation: isolate;`. For examples of how to do this, you can see the below examples.
+
 See also [the basic ipyleaflet example](/examples/libraries/ipyleaflet) and [the advanced ipyleaflet example](/examples/libraries/ipyleaflet_advanced).
 
 ## Example with ipywidgets

solara/website/pages/examples/libraries/ipyleaflet.py

@@ -13,7 +13,8 @@
 
 @solara.component
 def Page():
-    with solara.Column(style={"min-width": "500px", "height": "500px"}):
+    # Isolation is required to prevent the map from overlapping navigation (when screen width < 960px)
+    with solara.Column(style={"min-width": "500px", "height": "500px", "isolation": "isolate"}):
         # solara components support reactive variables
         solara.SliderInt(label="Zoom level", value=zoom, min=1, max=20)
         # using 3rd party widget library require wiring up the events manually

solara/website/pages/examples/libraries/ipyleaflet_advanced.py

@@ -36,8 +36,6 @@ def location_changed(location):
         map = maps[map_name.value]
         url = map.build_url()
 
-        # leaflet takes a high z-index, so we need to set it higher than that otherwise the dropdown will be hidden
-        # where it overlaps with the map
         def goto_marker():
             center.value = marker_location.value
             zoom.value = 13
@@ -46,20 +44,22 @@ def reset_view():
             center.value = center_default
             zoom.value = zoom_default
 
-        solara.Select(label="Map", value=map_name, values=list(maps), style={"z-index": "10000"})
+        solara.Select(label="Map", value=map_name, values=list(maps))
         solara.SliderInt(label="Zoom level", value=zoom, min=1, max=20)
         with solara.Row():
             solara.Button(label="Zoom to marker", on_click=goto_marker)
             solara.Button(label="Reset view", on_click=reset_view)
 
-        ipyleaflet.Map.element(  # type: ignore
-            zoom=zoom.value,
-            on_zoom=zoom.set,
-            center=center.value,
-            on_center=center.set,
-            scroll_wheel_zoom=True,
-            layers=[
-                ipyleaflet.TileLayer.element(url=url),
-                ipyleaflet.Marker.element(location=marker_location.value, draggable=True, on_location=location_changed),
-            ],
-        )
+        # Isolation is required to prevent the map from overlapping navigation (when screen width < 960px)
+        with solara.Column(style={"isolation": "isolate"}):
+            ipyleaflet.Map.element(  # type: ignore
+                zoom=zoom.value,
+                on_zoom=zoom.set,
+                center=center.value,
+                on_center=center.set,
+                scroll_wheel_zoom=True,
+                layers=[
+                    ipyleaflet.TileLayer.element(url=url),
+                    ipyleaflet.Marker.element(location=marker_location.value, draggable=True, on_location=location_changed),
+                ],
+            )