I have simple react application where I am using react-visjs-timeline. When I change a movable property (this property is to allow or block horizontal scroll) of the timeline from options, the vertical scroll jumps back to the top.
It is not only changing movable property but changing any property in the options triggers this issue. The project is available in codesandbox and I would highly appreciate any help or suggestions.
To reproduce the problem:
Scroll down the timeline.
Click on the button "Lock/Unlock Scroll"
You will immediately notice that the timeline jumps back to the top.
Link to the Project: https://codesandbox.io/s/reactjs-vistimeline-n18rm6
Related
I binded the apexchart in my application. However when I make the container of the chart smaller, the toolbar is not moved or overlied (like the chart).
since I'm new in react. I have no idea how to solve that. It would be nice if it is moved and the chart resizes automatically. (actually what the "reset zoom" button does)
Another question would be if I can use my own toolbar on the left, but execute the same listener of the apexchart toolbar.
Thank you in advance
I have a basic create-react-app with Material/MUI text field and button. When I tab from the textfield to the button, it creates an animation on the button where the middle part slightly grows and shrinks. I'm trying to figure out how to get rid of that animation and just show a simple button that has focus. Toggling the options in Chrome debugger hasn't helped me track down where this animation is being created (focus, hover, etc.). In fact, anytime I change any property in the CSS panel it turns the animation off and makes it harder to track down what is causing this.
Thanks.
I'm using ReactiveSearch 3.30.0.
Here's how I use the ReactiveList component in my Next.js project.
<ReactiveList
....
infiniteScroll={true}
showLoader={true}
pagination={false}
loader={<MyCustomLoader/>}
....
/>
The problem is during the loading that occurs,
When I click on a filter item
or
When Scroll more to the bottom
the MyCustomLoader is always at the bottom.
Expected outcome for the MyCustomLoader is,
When I click on a filter item => MyCustomLoader at top
and
When Scroll more to the bottom => MyCustomLoader at bottom
The reason is, since my results list is long and scrollable, the loader is not shown when I click a filter item. It is actually rendered on the DOM, because I could see it when zoomed out the browser window (but is outside visible area to the user).
Related GitHub issue https://github.com/appbaseio/reactivesearch/issues/749
Any workaround is highly appreciated. Thanks.
I have a React App where the user can toggle between different views of the same data structure. When toggling from one view to another, the browser window sometimes automatically scrolls vertically. Instead I am expecting the window to not scroll when possible.
The CodeSandbox here reproduces the issue:
https://codesandbox.io/embed/magical-chebyshev-otlpu?fontsize=14&hidenavigation=1&theme=dark
If you scroll down, then click on "CLICK TO SWITCH VIEW BELOW", you will notice that there's an automatic scroll to the top happening.
I suspect this is an issue with MUI TextField. If I change the MUI TextField to a div, the issue does not show up, so I don't think this is due to React.
I have this narrow panel which is basically a list of thumbnails, and i need to be able to scroll over them using buttons.
We have a panel (anchor layout), with containers in it, and each container contains the image.
there isn't space for a scrollbar, and anyway we don't want one.
I thought it would be as easy as in the listener for my button calling panel.getEL().scroll('b',20)
but this isn't working because the scrollHeight === ClientHeight so scroll does nothing.
Is there a technique I am missing or should this work?
So you're using a button to scroll through the images? What about having the button's listener remove/hide the containers/images at the front of the panel to allow the others to use the space?