Let's say we use MUI Masonry and in each of the items there is a Collapse element that is expanded if it gets clicked. If you click an item that needs to be moved to another column, it moves the items outside the parent's specified width!
This CodeSandbox demonstrates the issue. The original view is like:
Now, after clicking the first item, which does not require moving, I see:
Which is what I expected, but if I click one of the items at the bottom that requires moving it, it creates a new column outside the parent's width.
At the moment dynamic height like that is not supported. See this issue.
Related
I'm using react-selectable-fast on a list of items that can be selected. However an item or a group of selected items should also be draggable, which is implemented using react-dnd.
The issue is that the selecting comes in the way of dragging; when hovering on top of an item and trying to drag it I end up selecting instead.
I've managed to fix the issue with a hack: store in state whether currently hovering an item or a group of selected items and if so disable the <SelectableGroup>. However this means that the whole list of items is rerendered every time I move the mouse over an item.
So I would like a better solution but I haven't been able to find one. In the last attempt I put the draggable element (using connectDragSource) on top of the selectable element (using createSelectable) again on top of <SelectableGroup /> and gave them increasing z-indexes, also tried playing around with stopPropagation() and preventDefault() but still the selecting overrides the dragging.
Any ideas?
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
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
I have a parent view model, that contains a collection of other view models (of same type) (children). On Initialization the number of children will be decided (varying).
The child View consists of a button and a list box. Initially the listbox is hidden. On click of button the list box appears and on clicking outside (outside of the control or any other child button).
On init only buttons will be shown. I want these buttons to be spaced across the available width. The requirement is that once the button is clicked (when listbox is shown) the width of the whole child will increase (lets say 350) and when it is hidden it reverts back to the original size.
In the parent i am using a ItemsControl to show the children views. I have tried all controls but not able to figure ou a appropriate solution for this. I have two issues:
On Button click i am able to show current listbox. If i click another button teh first one goes off. Till here it works fine. But i also need that the currentopen listbox closes on click anywhere outside of the control (child control)
How to automatically size and resize based on what is clicked . First all should be propotionately sized and then when one is clicked it's size increases (here other childs resize with the rest available space). When the one (open control) is collapsed, all of them come back to normal proptionate sizes.
Any ideas ?
BTW, i am using MVVM pattern for this.
how about using a flag to direct the view to perform calc and refresh/readjust the sizing as when needed.
like on-click routine, set the flag on
whenever the view (pre-)painting/drawing event is kicked in, check if the flag is on, do the calc and sizing, then off the flag.