Js onresize event listener for toast not working

Dash Python
1

I’m trying to fire an event, whenever a toast gets resized.

import dash
import dash_bootstrap_components as dbc
from dash.dependencies import Input, Output, ClientsideFunction
import dash_html_components as html
import dash_core_components as dcc
import plotly.graph_objects as go
import numpy as np

style_toast = {
     "position": "fixed",
     "top": 50,
     "left": 50,
     'zIndex': 6,
     "maxWidth": "90vw",
     "width": "15vw",
     "height": "30vw",
     "maxHeight": "90vh",
     "resize": "both"
}

style_fig = {
    'height': 'inherit'
}


x, y = np.random.uniform(size=50), np.random.uniform(size=50)

fig = go.Figure(data=[go.Scattergl(x=x, y=y, mode='markers')])
fig.update_layout(margin=dict(l=0, r=0, t=0, b=0))


app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])

app.layout = html.Div([
    dbc.Toast(dcc.Graph(figure=fig, style=style_fig),id="my_toast", style=style_toast, header="resize me!"),
    html.Div(id='dummy')
])

app.clientside_callback(
        ClientsideFunction(namespace="clientside", function_name="inherit_height"),
        Output('dummy', 'children'),
        Input('my_toast', 'id')
    )

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

assets/scripts.js:

/* JavaScript namespaces */

if (!window.dash_clientside) {
    window.dash_clientside = {};
}

window.dash_clientside.clientside = {
    inherit_height: function(id) {
        console.log('event triggered');
        // this gets printed
        document.getElementById(id).addEventListener('resize', function() {
                console.log('size changed');
                // this never gets printed
                // TODO: later: resize div of graph's height 
            })
        return window.dash_clientside.no_update;
    }
}

Like mentioned in the comments, the function inherit_height is called but the event listener is not listening to resizes.
Anyone with a clue why?

I’m doing this and the function is called ‘inherit height’ because I’m still trying to make a graph inside a toast inherit the toast’s
height and not only its width, which seems to a bug:

2

Hi @luggie

I also verified that the width is responsive, but the height is not responsive. It stays at the default height for the figure which is 450px, even if responsive=True is included in dcc.Graph.

It might be worth reporting this as an issue. In the meantime, a workaround is to set the height in the figure or in dcc.Graph.

In your example, if you set the height as something slightly less than the container, it works.

style_fig = {
    'height': "25vw"              
}

There may be some conflict with Bootstrap. In this example, the height is responsive, but only if style={'height': '100%'} is set in dcc.Graph. (Unfortunately, setting height to 100% does not fix this issue with Bootstrap)


import dash
import dash_html_components as html
import dash_core_components as dcc
import plotly.graph_objects as go
import numpy as np

external_stylesheets = ["https://codepen.io/chriddyp/pen/bWLwgP.css"]

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)


x, y = np.random.uniform(size=50), np.random.uniform(size=50)

fig = go.Figure(data=[go.Scattergl(x=x, y=y, mode="markers")])
fig.update_layout(margin=dict(l=0, r=0, t=0, b=0))

app.layout = html.Div(
    dcc.Graph(
        figure=fig,
        responsive=True,
        
        # this needs to be included to make the height responsive
        style={'height': '100%'}
    ),
    style={"borderStyle": "solid", "height": 300, "width": 100},
)

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

Yeah I guess I’ll set up an issue to this