Slide Panel inside a Div

Dash Python
1

Is it possible (or is there some component) that mimics the functionality of the bootstrap Offcanvas inside its own parent container?

This type of ‘contained slide panel’ would be nice eg. to set custom settings of specific contents of a container without eating up real estate.
Maintaining full functionality of the dbc.Offcanvas would definately be sweeeet!
There are other options to do this (eg. modals) but it would be a nice and elegant way.

I split up the viewport in a few containers and launched the dbc.Offcanvas from inside one of them.
This does not work of course, but it kinda illustrates an implementation.

import dash
from dash import Input, Output, State, html
import dash_bootstrap_components as dbc

app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])
app.layout = dbc.Row([
    dbc.Row([
        dbc.Col([
            'A CONTAINER'
            ], style={'border': 'medium black solid'}),  
        dbc.Col([
            dbc.Button("Open Offcanvas FOR THIS CONTAINER ONLY", id="open-offcanvas", n_clicks=0),

            # This dbc.Offcanvas should open as a child of the current parent container
            # and darken THIS parent  container
            # Maintaining full functionality of the dbc.Offcanvas would definately bee sweeeet!
            # https://dash-bootstrap-components.opensource.faculty.ai/docs/components/offcanvas/
            dbc.Offcanvas(
                html.P(
                    "I Should be inside the div instead of on the viewport."
                    "Close it by clicking on the close button, or "
                    "!!!!!!!!!!! THIS containers !!!!!!!!!!! backdrop."
                ),
                id="offcanvas",
                title="Title",
                is_open=False,
            ),
            ], style={'border': 'medium black solid'}),
    ]), 
    dbc.Row(['ANOTHER CONTAINER']),
    ], style={'width':'100vw', 'height':'100vh', 'border': 'medium black solid'})

    
@app.callback(
    Output("offcanvas", "is_open"),
    Input("open-offcanvas", "n_clicks"),
    [State("offcanvas", "is_open")],
)
def toggle_offcanvas(n1, is_open):
    if n1:
        return not is_open
    return is_open


if __name__ == '__main__':
    app.run_server(debug=True)

Thanks in advance for looking into this.

2

Hi @popo,

The dbc.Offcanvas component is really intended to be “off canvas”. There is probably a way to mess with the CSS to achieve this, but another option is to use a side nav. You can find some examples here:
Dash Mantine & Dash Bootstrap Building Blocks

1 Like