When I am dragging an element down, the form doesn't scroll down when the dragging reaches the bottom.
The reason for this may be that I am manipulating the content of the form by adding an empty placeholder component under the dragged component, and then removing and adding the placeholder each time the dragged component moves over another component. I call revalidate each time the placeholder is removed/added.
Strange thing is that the scrolling works fine when dragging upwards.
Any suggestions for what could be the cause and how I may fix it?
Thanks
Related
The following issues below point to the same problem I am experiencing:
Scroll jumps to the top when List data gets updated
InfiniteLoader jumps when scrolling up after loadMoreRows completes
Adding new items to List causes Scrollbar Jumping
(Using react-virtualized) vsx-registry: scrolling and selecting a tree-node jumps back to the top
And of course My SandBox Here. When you are testing in my sandbox, scroll to the bottom as fast as you can and then stop to wait for loading. A single or multiple jumps will be clearly noticeable.
I am also cross-posting this on GitHub right now. If anyone would come up with a fix that would help a lot of people here using react-virtualized.
Attempts:
When I remove the Cellmeasurer for both the content and the loader and replace row height with a manually defined function, the problem seems to disappear.
To minimize the scenario, I removed the Autosizer and Windowscroller and left with only InfiniteLoader and CellMeasurer. The problem is still there. The jump occurs exactly when rendering the items Infiniteloader appends to the list.
Using material-ui/lab 4.0.0-alpha.27 - TreeView Component
I have a treeview with a couple of hundred nodes. I have added a textfield before the treview that the user can use to search/filter the tree. As they type I add/remove classes from the TreeItems to hide and show TreeItems. It works fine BUT we want all of the nodes to be expanded once they enter something into the search/filter textfield.
I have tried feeding the "defaultExpanded" prop a new list that has all of the nodes in it but it doesn't seem to cause the nodes to expand as I had expected. The defaultExpanded prop only seems to be respected when the tree initially draws.
I am currently working around this by looking for collapsed nodes and firing click events for them to force them to open but that is causing issues (the textfield looses focus and the keyboard hides and the treeview jumps around). I need something a bit smoother.
You need to use the expanded prop, instead of defaultExpanded.
I have a problem with Office UI Fabric's Panel (well, also Modal). I'm rendering them with multiple input fields to provide data for my app. Due to the number of fields the controls are rendered with a scroll bar. After scrolling down and clicking outside of the input, the focus is being set on the first textfield/dropdown in the container panel what causes the whole thing to be scrolled to the top. Is there a way to prevent setting the focus/scrolling to the first element when clicking outside of the input?
This was indeed a bug and has been resolved already. Tested it in the version 5.56.0.
I've managed to render a react-virtulized List to which I passed an array of react-bootstrap Panels. I've measured each of my rows, and via children callback, each time one of the child panels are clicked, an attribute in the parent state is updated. Said attribute is used inside the react-virtualized List rowHeight() function top check whether that panel is currently expanded. Then, using a ref to my List, i call the recomputeRowHeights(index) and forceUpdateGrid() methods on saidref.
The thing is, while the List component correctly updates both the height and position of my rows, the animation isn't smooth. I mean, the bootstrap expand animation works fine, but the change in height of the expanded row happens instantly after the click event, and then the animation starts, feeling somewhat chopy.
Is there any workaround for this, or is this an upcoming/planned/in the works feature for react-virtualized?
Unfortunately, I have not spent much time working with or optimizing for resize animations within react-virtualized. It doesn't surprise me to hear that the resize/reposition is a bit choppy in the case you mention.
Here's a quick-and-dirty example of one way you may add animation: plnkr.co/edit/VanCAQmSkUejp3hbJUyJ?p=preview. Not meant to be bug free, just an illustration. :D
I have a horizontally scrolling div that is contained within a directive, where the directive is placed in a view. Upon adding elements to my scrollable div I want to always scroll to the end of the div. I am attempting to do this by placing an id on the element I want to scroll to, and setting $location.hash('myElementId'). I then call $scrollToAnchor().
I am seeing two problems. First, I haven't been able to make this work at all, and am wondering if $scrollToAnchor() works for horizontally scrollable areas. Second, calling $scrollToAnchor() seems to trigger the controller() function of my view to run again, along with all the controller() functions of any directive contained in the view, effectively causing everything on the view to redraw, which is not my intention.
Is there a way to cause scrolling to happen for a particular scrollable div only? Does $scrollToAnchor() cause a 'refresh' of the view by design?
Thanks