CSS grid causing dcc.Graph to resize incorrectly

Dash Python
1

I am trying to use CSS grid to help in laying out Dash apps. This works for everything expect when used in conjunction with dcc.Graphs.

import dash
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash()

app.layout = html.Div(
    children=[
        dcc.Graph(
            figure={
                'data': [
                    {'x': [1, 2, 3], 'y': [4, 1, 2], 'type': 'bar', 'name': 'SF'},
                ],
            }
        )
    ],style = {"display":"grid","grid-template-columns":"1fr"}
)

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

In this case when users zoom in dcc.Graphs fails to change its size causing it to be off the screen. Zooming out works fine bizarrely. If the page is reloaded already zoomed in it works fine.

It is as if dcc.Graphs doesn’t automatically check the screen size when zooming in. Is this a known problem or do I have to add something somewhere.

Many Thanks

2

I’ve seen this same problem - using vw or other screen-size dependent sizing sometimes requires resizing the screen for dcc.Graph to move to the correct shape.

3

Here is a demo of the problem encountered using the code above: when you zoom out, the graph resizes automatically (âś“); but when you reset the zoom, the graph zooms in instead of resizing automatically (âś—).

So this makes the graph “bleeding” outside of the window, what is not wanted.

Peek 2019-05-13 12-30
57618348-095c9380-757b-11e9-9944-b8b37c69ce68.gif843Ă—552 265 KB

This problem does not seem to occur when not using fr in the grid layout (or when using another display type), e.g.:

import dash
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash()

app.layout = html.Div(
    children=[
        dcc.Graph(
            figure={
                'data': [
                    {'x': [1, 2, 3], 'y': [4, 1, 2], 'type': 'bar', 'name': 'SF'},
                ],
            }
        )
    # Any of the lines below DON'T work
    # ],style = {"display":"grid","grid-template-columns":"1fr"}
    # ],style = {"display":"grid","grid-template-columns":"1fr","width":"100%"}
    # ],style = {"display":"grid","grid-template-columns":"1fr","width":"100vw"}
    #
    # Any of the lines below DO work
    ],style = {"display":"grid","grid-template-columns":"100%"}
    # ],style = {"display":"grid","grid-template-columns":"100vw"}
    # ],style = {"display":"bloc"}
)

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