overlay the time slider so it stops hiding the attribution

the slider was inserted as a block sibling of the map, so with the map at
100% height the page overflowed and the attribution got clipped. position
it absolutely over the map instead.

fixes #1301

Author: CodingSelim

folium/plugins/time_slider_choropleth.py

@@ -50,7 +50,17 @@ class TimeSliderChoropleth(JSCSSMixin, Layer):
             }
 
             let slider_body = d3.select("body").insert("div", "div.folium-map")
-                .attr("id", "slider_{{ this.get_name() }}");
+                .attr("id", "slider_{{ this.get_name() }}")
+                // overlay the slider on the map so it doesn't push the map
+                // (and its attribution) out of view
+                .style("position", "absolute")
+                .style("top", "10px")
+                .style("left", "50%")
+                .style("transform", "translateX(-50%)")
+                .style("z-index", "999")
+                .style("background", "rgba(255, 255, 255, 0.8)")
+                .style("border-radius", "4px")
+                .style("padding", "2px 8px");
             $("#slider_{{ this.get_name() }}").hide();
             // insert time slider label
             slider_body.append("output")

tests/plugins/test_time_slider_choropleth.py

@@ -91,3 +91,32 @@ def norm(col):
 
     expected_styledict = normalize(json.dumps(styledict, sort_keys=True))
     assert expected_styledict in normalize(rendered)
+
+
+def test_slider_overlays_map():
+    # the slider must not push the map (and its attribution) out of view,
+    # so it is positioned as an overlay instead of a block element
+    geojson = json.dumps(
+        {
+            "type": "FeatureCollection",
+            "features": [
+                {
+                    "type": "Feature",
+                    "id": "0",
+                    "properties": {},
+                    "geometry": {
+                        "type": "Polygon",
+                        "coordinates": [[[0, 0], [0, 1], [1, 1], [1, 0], [0, 0]]],
+                    },
+                }
+            ],
+        }
+    )
+    styledict = {"0": {"1420070400": {"color": "#ff0000", "opacity": 0.5}}}
+
+    m = folium.Map((0, 0), zoom_start=2)
+    plugin = TimeSliderChoropleth(geojson, styledict)
+    plugin.add_to(m)
+    rendered = plugin._template.module.script(plugin)
+
+    assert '.style("position", "absolute")' in rendered