I have noticed that when I try to align two charts side by side, and don’t specify a hardcoded with for the chart, any chart that is not aligned to the right edge of the screen will spill outside of its container as shown in the below picture.
However, the width does appear to be properly defined as if you do something like go into inspect element and then exit out, basically forcing a “refresh” of the page constraints, the plot will behave as normal
Any reason why this might be or how to fix it? Obviously it’s pretty inconvenient to only be able to have plots aligned to the right of the screen without obfuscating everything behind it. These plots are all created using plotly python and then saved to a div element which is rendered on an html page (more specifically a page within a Django app).
Both of the graphs share a common parent div but individually they also contain their own div containers which follow a flexbox 2 column stacking layout. Again, this works with everything except the graphs, and even works with the graphs if I open and close the inspector as shown in the second screenshot.
After looking into it a bit more I think what I’m looking for is a way to either understand the workings or find a way to manually trigger some sort of “relayout” event that occurs when the inspector panel is opened. When this happens I can see the widths of several divs including ones on the “main-svg” ids that change the width from 1700+ to ~800 pixels wide. Of course setting a manual width within the plotly layout options in python would somewhat solve this but that eliminates any chance of having a responsive width filled graph for different screen sizes.
Just did some more searching on the forum and came across this thread from 2016:
It appears to have an almost identical set of symptoms to mine and seems like it does stem from how flexbox handles sizing its children elements. However the troubling part to me is that this post is from 2016 and despite 30+ subsequent replies and multiple anecdotes confirming similar problems nothing appears to have been done about this. It seems like unfortunately while this forum shows decent response time and support for simpler issues, more longstanding and complex problems even from as early as 2016 seem to see no attention from the developers which, given how relatively simple of a test case this is, unfortunately may end up making this an unsuitable platform for my use case.