Dash use split-grid.js

Dash Python
1

I try to use split-grid.js in dash, but it doesn’t seem to work.

My app.py is:

from dash import Dash
app = Dash(__name__, title= "Test",
    external_scripts=["https://unpkg.com/split-grid/dist/split-grid.js"]
)


app.layout = html.Div([
   html.Div(),
   html.Div([],className="gutter-col gutter-col-1"),
   html.Div()
],className="test")



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

And the asserts dir has two file, main.js and style.css
main.js:

Split({
    columnGutters: [{
        track: 1,
        element: document.querySelector('.gutter-col-1'),
    }],
})

style.css :

.test {
    display: grid;
    height: 100vh;
    grid-template-columns: 1fr 10px 1fr;
}

.gutter-col {
    grid-row: 1/-1;
    cursor: col-resize;
}

.gutter-col-1 {
    grid-column: 2;
    background-color: red;
}

I don’t know much about front end, can someone see why it doesn’t work？

split-grid.js link.

2
2 Likes