Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

CSS grid causing dcc.Graph to resize incorrectly when zooming in #528

Open
oliverbrace opened this issue Apr 18, 2019 · 1 comment

Comments

@oliverbrace
Copy link

commented Apr 18, 2019

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.

Many Thanks

@EBoisseauSierra

This comment has been minimized.

Copy link

commented May 13, 2019

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

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)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
2 participants
You can’t perform that action at this time.