Is it possitble to add a dropdown e.g. dbc.DropdownMenu or dmc.Popover in EasyButton?

[ougx]

something like:

import dash_leaflet as dl
from dash import Dash, html, Output, Input
import dash_bootstrap_components as dbc

# Add CSS for the icon.
external_css = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
# Create example app.


dropdown = dbc.DropdownMenu(
            label="Menu",
            children=[
                dbc.DropdownMenuItem("Item 1"),
                dbc.DropdownMenuItem("Item 2"),
                dbc.DropdownMenuItem("Item 3"),
            ],
            id="rastercontrol",
            style={'zindex':'2000'}
        )



app = Dash(external_stylesheets=[external_css])
app.layout = html.Div([
    dl.Map([
        dl.TileLayer(),
        dl.EasyButton(children=dropdown, icon="fa-globe", id="btn")
    ], center=[56, 10], zoom=6, style={'height': '50vh'}),
    html.Div(id="log")
])

@app.callback(Output("rastercontrol", "opened"), Input("btn", "n_clicks"))
def log(n_clicks):
    return True

if __name__ == "__main__":
    app.run_server()

[12rambau]

I have the feeling that what you are looking for is the behaviour implemented in ipyleaflet as WidgetControl. IF yes, then I'm looking for the same thing as reported in my SO post.

It's coded there in their interface: https://github.com/jupyter-widgets/ipyleaflet/blob/7f7343d5595b2e9868885706522890cae98fef47/python/jupyter_leaflet/src/controls/WidgetControl.ts#L12, but their are directly calling leaflet instead of wrapping around react leaflet so I'm not 100% sure this could be easily ported to a ComponentControl object in dash-leaflet.

@emilhe Could you let me know if theis feature is desirable from your end and I'll try to make a poc else I'll simply use the absolute positioning workaround (because if it works it aint stupid)