make-vis-flexible does not work with grid
See original GitHub issueThe FlexibleXYPlot
component does not resize correctly when using CSS grid. We suspect this is an issue within make-vis-flexible
and the xy-plot
component. There’s an assumption that the parent component will always, and accurately, downsize “correctly”. In the case of CSS grid, that isn’t true.
The child component’s explicitly set width will override any upstream re-flows and re-renders. In our specific case, that implies that our graph will only act responsively when the browser window is increased in size, not when it’s decreased.
Unexpected behavior:
- use CSS grid
- load page
- make page smaller
- chart overflows in the x-axis
Internally set, explicit width:
Trivial example:
https://codepen.io/anon/pen/vvJBoM?editors=1100
Naive suggestions to fix:
There’s likely context that we’re missing, but it seems peculiar to have “two separate components” for flexible and non-flexible plots. IMHO all charts should be flexible, and their size should be constrained by their parent components only. Internally, they should always strive to expand to 100%.
Calculating the the width of the component and setting it via JS (in React) is prone to exactly this type of issue. We suspect this was for a reason. Likely due to the needs of internal calculations for plotting data, animations, etc. Ideally we’d love to see (and help!) with making this styling less JS-centric, more CSS-native, and possibly condensed into one component.
This is a lot to ask, and we’re happy to help. We’ll need feedback first.
Thanks!
Issue Analytics
- State:
- Created 5 years ago
- Reactions:3
- Comments:5 (1 by maintainers)
Top GitHub Comments
Had this same issue with grid and
<FlexibleXYPlot>
. The plot width would only increase, and not decrease.<AutoSizer>
from react-virtualized seems to work well.Pseudo code for the workaround I used:
make-vis-flexible isn’t a great wrapper. When it was written it was fairly reliable but there’s a number of occasions beyond this one when it doesn’t deliver. Meanwhile there are great solutions outside of react-vis which are better maintained, such as AutoSizer from react-virtualized. https://bvaughn.github.io/react-virtualized/#/components/AutoSizer