pythonleafletwidgetipyleaflet

how to remove shadow from a WidgetControl?

Using the following code from ipyleaflet documentation I get a nice display with 2 extra custom widgets. These widgets have a small dark shadow that I would like to remove.

from ipyleaflet import Map, basemaps, WidgetControl
from ipywidgets import IntSlider, ColorPicker, jslink

m = Map(center=(46.01, 6.16), zoom=12, basemap=basemaps.CartoDB.DarkMatter)
zoom_slider = IntSlider(description='Zoom level:', min=0, max=15, value=7)
jslink((zoom_slider, 'value'), (m, 'zoom'))
widget_control1 = WidgetControl(widget=zoom_slider, position='topright')
m.add_control(widget_control1)

color_picker = ColorPicker(description='Pick a color:')
widget_control2 = WidgetControl(widget=color_picker, position='bottomright')
m.add_control(widget_control2)
m

It's is useless as I'm using the dark theme from jupyterlab (which transforms the shadow in a horrible white shadow) as shown here:

enter image description here

I didn't find any parameter in the documentation, is it even possible ?

Solution

  • digging in the ipyleaflet code, it seems that the shadow is mandatory as it's only set in this css file. The different options are set in the js file meaning that shadow cannot be removed from python code.

    As an ugly fix I forced some css directly on the top cell before import ipyleaflet:

    # ugly fix to remove shadow from map custom widgets
from IPython.display import display, HTML
display(HTML("<style>.leaflet-widgetcontrol {box-shadow: none}</style>"))