react-vis icon indicating copy to clipboard operation
react-vis copied to clipboard

FlexibleXYPlot grows but does not shrink

Open Choongkyu opened this issue 6 years ago • 2 comments

When the component is set to be a particular percentage of its parent component and is resized to be a bit bigger than that initial width, it does not shrink back down when the window is resized. This can be demonstrated when enclosed in a table cell or in a div set to display: flex: https://codesandbox.io/s/wk6kpxl3jk

Choongkyu avatar Apr 19 '19 01:04 Choongkyu

Hmm quite an old issue... still happens after more than a year -_-

I played with this and found out that div with class .rv-xy-plot should have a little bit of css help e.g.:

.rv-xy-plot {
  // decouples the outer container width from inner container width (width check happens before svg render) 
  position: absolute; 
  // masks any glitches caused by denounce on resize event (obv combined with a bit lighter denounce would help more)
  overflow: hidden;
}

Hope this will help someone ;-)

thefill avatar Nov 22 '20 21:11 thefill

Hmm quite an old issue... still happens after more than a year -_-

I played with this and found out that div with class .rv-xy-plot should have a little bit of css help e.g.:

.rv-xy-plot {
  // decouples the outer container width from inner container width (width check happens before svg render) 
  position: absolute; 
  // masks any glitches caused by denounce on resize event (obv combined with a bit lighter denounce would help more)
  overflow: hidden;
}

Hope this will help someone ;-)

obv that's just one of the solutions - and one that can mess a lot with legends & axis

thefill avatar Nov 22 '20 21:11 thefill