Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

RangeSlider/RangeSliderPreview don't resize correctly when reconfiguring width #375

Closed
julian-sens opened this Issue · 4 comments

5 participants

@julian-sens

I am working on a project that uses rickshaw and we want to be able to resize the graph in a fluid website layout. Everything else resizes fine, but the range slider does this:
1. The draggable area stay at the same width.
2. The underlying graph seems to resize to the width of the original graph without accounting for the grabber-handle widths.

Here is an example - https://gist.github.com/julian-sens/8340627

Taking a look at the code, it seems like it would save a lot of effort to use d3.svg.brush on the preview chart. It takes care of rendering the shutter elements (without hard-coded handle styles) and handles the appropriate mouse events.

@tonioo

It seems you need to manually resize the slider:

slider.configure({...});
slider.resize();

It almost works for me, the slider is properly resized but not the graph (it stays a bit larger)

@glasnt

So I've worked out most of why this is breaking, and have submitted #417 to suit.

The only problem remaining is that the svg object classed rickshaw_range_slider_preview doesn't appear to have it's height/width style attributes attributes adjusted when running configure again. The svg style data stays the same through repeated configure calls.

Everything else about the slider preview appears to adjust, apart from that one item. After re-adjusting a window from a smaller size to a larger one, it's clear that the item isn't resizing, as there's a distinct stop in the semi-transparent overlay of a non-selected area of the graph on the right hand side.

Demonstration of the current issue: gif image
(not - artefacts in gif is due to image compression, not rickshaw issues.)

The only problem is that since the rickshaw_range_slider_preview isn't wide enough, the semitransparent fill and the select range gui (handle, etc) are obscured from view when they pass through that area. Also, when the right-handle is within this area, it is not selectable (however, by dragging a zoomed view out of that section, the handle is visible, and therefore selectable again)

I will update if I am successful in debugging this any further.

update:
OK, it appears what's happening is that on changing the configurations, the svg element is being created in duplicate, but the previous element is still being displayed, and isn't being removed.

There's similar functionality in Y.Axis, where if the element exists, it's removed, then redrawn from the configurations. I think this will work in this case, but I can't get it working exactly right. (adding code before line 158 of RangeSlider.Preview like if (this.svg[0][0]) { this.svg[0][0].remove()} should work, but it's breaking the entire graph. )

@rbu

I think I've seen your remaining issue as well, as per my comment in
#382 (comment)

it should be fixed by adding line 78 from the diff at https://github.com/shutterstock/rickshaw/pull/382/files#diff-bb80a52c2004e143191885b04a86813cR78

@dchester dchester closed this in 972c2bd
@chdileep2012

I need to change slider handles in Rickshaw.Graph.RangeSlider.Preview'
can u plz help me?

instead handles i need to keep my own handles?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.