[BUG] Graph(style='height=100%') fails when reducing window size on Firefox

[orenbenkiki]

PIP

dash (1.0.2)
dash-bootstrap-components (0.7.0)
dash-core-components (1.0.0)
dash-daq (0.1.7)
dash-html-components (1.0.0)
dash-renderer (1.0.0)
dash-table (4.0.2)

Describe the bug

Writing: Graph(..., style=dict(height='100%'))

Expected behavior

The graph should fill the full height of the div, which will obey normal CSS rules, that is, span all the available space in the layout. It should not cause any overflow, and respond to window resize (also on Firefox ;-).

Actual behavior

• A scrollbar appears for a small amount of overflow (both Chrome and Firefox). Since the amount is small, it is possible to work around this with overflow=hidden, but it may cause clipping (e.g. if using long labels for the X axis, etc.).

• Reducing window size does not cause graph resize (Firefox only). That is strange, one would expect that any resize event is handled the same way, regardless if the new size is higher or lower than the original size.

Edit

The following example almost works, except for the two issues above. This threw me off, originally I thought that the feature does not work at all. I edited the issue title and content accordingly.

[orenbenkiki]

Here is an example showing the problem:

import dash
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash()
app.layout = html.Div(
    id='body',
    style={
        'display': 'flex',
        'flex-flow': 'column',
        'background-color': 'green',
        'height': '100vh',
        'width': '100%'
    },
    children=[
        html.Div(
            id='header',
            children=[
                html.H1('MWE'),
            ]
        ),
        html.Div(
            id='expand',
            style={
                'flex-grow': 1,
                'height': '100%',
                'width': '100%',
                'background-color': 'blue'
            },
            children=[
                dcc.Graph(
                    figure=dict(layout=dict(autosize=True)),
                    style={
                        'height': '100%',
                    },
                ),
            ]
        ),
    ]
)
app.run_server(debug=True)

[orenbenkiki]

Although the sample example above sort-of-works, in my real-life application it doesn't :-( I have a complex layout using nested flex boxes, specifically a top bar, a side bar, and a main display region which tries to span the remaining space.

Things I have seen:

• The initial size of the graph is set to 100px * 100px. Any resize event (e.g. if I resize the window) causes the graph to resize to the correct full size.

• Trying to show a heatmap of 100x * 100px causes "Something went wrong with axis scaling" because the computation of the colorbar scale becomes confused due to the cramped space.

Bottom line: the automatic resize of the graph when the container is at width and height of 100% is too fragile to work for me. I am working around the issue by giving some elements fixed sizes and setting the graph size to something horrible like calc(100vw - 400px). This does work at the cost of using absolute sizes for elements I'd much rather just have their "natural" size :-(

[alexcjohnson]

Moved the issue to the dash-core-components repo where it would be addressed - @antoinerg has some good ideas about how to make this work better 🙏

[alexcjohnson]

And @orenbenkiki thanks for opening another very clear and helpful issue!

[wbrgss]

@orenbenkiki I too have experienced some frustrations using Flexbox layouts with dcc.Graph — there is more work to be done on complex flex layouts. For your simple example, I think this may work:

...
        dcc.Graph(
            figure=dict(layout=dict(autosize=True)),
            config=dict(responsive=True),
            style={
                'height': '100%',
            },
        ),

Behaviour on Firefox without my suggestion (cut-off x-axis)

With my suggestion (responsive=True)

That is, add responsive=True to the config argument in dcc.Graph(). You can thank @antoinerg for that. Related issue plotly/plotly.js#3034 and PR: plotly/plotly.js#3056

Does that solve your problem? The documentation for this could probably be higher-profile, sorry about that. There is a section on it here.

I also want to echo @alexcjohnson that we appreciate your clear and well-defined issues with examples!

[orenbenkiki]

Possibly these flags do makes things better, but they don't fix my real-world application. Some computation deep in the code looks at "100%" and interprets it as "100px", causing the (very initial) size to be 100 x 100 pixels, which triggers the "something went wrong with axis scaling" error (when computing the colorbar coordinates). I don't have a minimal program to demonstrate this :-(

[Marc-Andre-Rivet]

Making my way through the comments made above and will provide feedback as I go through them.

I am using:

• dash==1.6.1 (plotlyjs==1.51.1)
• Chrome 78 / Firefox 70

A scrollbar appears for a small amount of overflow (both Chrome and Firefox)

This problem is unrelated to the dcc.Graph, while annoying this is normal browser behavior when making a top-level element take 100% of the viewport and is caused by browsers applying a default style to the body element.

In Chrome:

body {
    display: block;
    margin: 8px;
}

Same in Firefox: https://hg.mozilla.org/mozilla-central/file/tip/layout/style/res/html.css#l122

The scrollbar issue can be replicated by simply using an empty div:

<div style='display: flex; flex-flow: column; background-color: green; height: 100vh; width: 100vw' />

There's really only three ways to handle this:

• explicitly override the body's default margin

body {
    margin: 0`;
}

• size the top div by taking the margins into consideration (this won't work in all browsers, as they don't all support mixed units)

.my-div {
    height: calc(100vh - 16px);
    width: calc(100vw - 16px);
}

• update Dash's default style to override the browser defaults for body (reset.css) -- IMO we shouldn't do this

Reducing window size does not cause graph resize (Firefox only)

This seems to be working fine with the versions above. Can you confirm if you still experience this issue?

Although the sample example above sort-of-works, in my real-life application it doesn't :-( I have a complex layout using nested flex boxes

👀 Looking. More to come.

[Marc-Andre-Rivet]

Using a slightly more complex UI I get a graph that can grow but can't get smaller in both Chrome and Firefox.

import dash
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash()
app.layout = html.Div(
    style={
        'display': 'flex',
        'flexFlow': 'column',
        'backgroundColor': 'green',
        'height': 'calc(100vh - 16px)',
        'width': 'calc(100vw - 16px)'
    },
    children=[
        html.Div(
            style={
                'backgroundColor': 'blue',
                'flex': '0 0 100px'
            }
        ),
        html.Div(
            style={
                'backgroundColor': 'red',
                'display': 'flex',
                'flex-direction': 'row',
                'flex': '1'
            },
            children=[
                html.Div(
                    style={
                        'backgroundColor': 'yellow',
                        'flex': '0 0 300px'
                    }
                ),
                html.Div(
                    style={
                        'backgroundColor': 'orange',
                        'flex': '1'
                    },
                    children=[
                        dcc.Graph(
                            figure=dict(layout=dict(autosize=True)),
                            style={
                                'height': '100%',
                                'width': '100%'
                            },
                        ),
                    ]
                )
            ]
        )
    ]
)
app.run_server(debug=True)

Adding responsive=True as suggested by @wbrgss improves the behavior and makes it resize consistently when both growing/reducing, down to sizes smaller than 100x100px in both Chrome and Firefox.

The latest versions of plotly.js introduced some fixes to better handle small graphs, so maybe this is why the behavior is better? Or maybe the page structure needs to be more complex, or specific graphs are needs to expose the problem?

@antoinerg Any insight into the latest comments, what would the next steps be?

[antoinerg]

I get a graph that can grow but can't get smaller

That looks a lot like this plotly.js issue plotly/plotly.js#3034 which was fixed by plotly/plotly.js#3056 . What happens when you turn on the configuration option {responsive: true} on the plotly.js figure?

cc @Marc-Andre-Rivet

[Marc-Andre-Rivet]

@antoinerg Too fast! I updated the comment above with responsive=True 😀