I used react-virtualized to create a infinit list component and antd to create a modal component.List item bind the click event to show the modal.
hrer is demo's link: https://codepen.io/dingjs/pen/eRXZyw?editors=0010
Dont't scroll
Click list item (The modal will show)
Click close button of modal (Window will scroll to the top of list)
Scroll to top of window
Click the element out of list then close the modal(Everything is all righ)
The question was Occurred in the third step.
If list's header under the top of browser, window will scroll to the top of list.
You did not explicitly say what your actual question is, but guessing from the title you want the window to scroll to top when the modal is closed. But that is so simple that I am thinking your actual question is something different...?
Put a
<div id="topOfList"></div>
at the start of the list, then
close = () => {
this.setState({
visible: false
})
document.getElementById('topOfList').scrollIntoView()
}
Related
On the first screen, popover is under 100vh and not fully visible. After popover on click it changes position and becomes visible fully. Want to have correct position on click as on the second screenshot.
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 am trying to create a panel where a list of item is presented, once an item is clicked, the right hand side should display the item selected. The left hand side should contain a list of items. The list of items can be very long therefore, i have limited the max height of the list such that when it exceeds this height, it will create a scroll bar so user can scroll down to see the rest of the list. The problem is, whenever an item at the bottom of the list is clicked, the list automatically scrolls back up to the top. I have a feeling that this is due to the fact that I am using a state to pass the item around, and when the item is changed, it causes a re-render thus "reseting" the list. Can someone give me a suggestion as to how i can stop this from happening? Any pointers would be greatly appreciated!
Here is the sandbox:
https://codesandbox.io/s/sad-archimedes-3u4k0?file=/src/App.js
ex/ scroll to the bottom and click "random30" and the list goes back up to "random1"
This happens because you placed a component EventListContainer inside of EventsList component which will lead to "re-render" every time you update the state.
You can just move ScrollContainer directly inside the EventsList component return:
return (
<ListContainer>
<ScrollContainer>
{eventListSorted.map(event => {
return (
<EventContainer
onClick={e => {
onSelect(event);
setSelectedEvent(event);
}}
selected={selectedEvent ? selectedEvent.id === event.id : false}
>
{event.uiString}
</EventContainer>
);
})}
</ScrollContainer>
</ListContainer>
);
Also you better move the eventListSorted array outside the EventsList component.
sandbox example.
Instead of clicking on a button and showing the slide navigation menu, how to show the menu by just sliding the screen. Say for example the menu button is positioned on the top left corner. When I swipe the screen from left to right the menu must open likewise it should close if I swipe from right to left.
You could add a swipe listeners to the Viewport and call the events accordingly
Ext.Viewport.bodyElement.on('swipe', function (event, node, options){
var button = Ext.ComponentQuery.query('button');
if (event.direction == 'right') {
button[0]._handler();
} else {
button[1].fireAction('tap');
}
});
Fiddle: https://fiddle.sencha.com/#fiddle/c1p
Obviously this fiddle has bugs and should only be used so you can have an idea of how to implement your solution.
See here solution for how to show the side menu by just sliding the screen in Sencha Touch 2.4.1
Sencha Touch - menu and edge swipes errors
My tab bar with icons at bottom of the is not showing on all views... like I will go to the following view on button tap... there the tab bar is not showing... this is my onbuttontap function
myAccFunction: function() {
var MyUser=Ext.Viewport.add(Ext.create('Sample.view.Userinfo'));
Ext.Viewport.animateActiveItem(MyUser, this.getSlideLeftTransition());
console.log('UserinfoAction'); },
tab bar is showing when I go directly to the view using icon on the tab bar.. but when I go to the view using button tap tab bar is not showing ..
Viewport is the main view that takes usually full screen. Inside the viewport you normally have a panel with tabbars, navigation/title bar and if you want to present multiple pages there - you use cards layout. But the point would be - not to add these pages directly to the viewport, but rather add them to your main panel.