Hi,
I have an app that has several components and after clicking a button a datatable is inserted. This element does not fit in the window and, thus, the user has to scroll manualy to see the datatable. I would like that to be done authomatically and not by the user.
As I didn’t see anything already created that could do what I want, I am trying to create a custom component that it is inserted with the datatable (after it) and force the user’s window to scroll to that element.
What I have achieved is to create an element that if it is already in the python-Dash code the window is scrolled to it BUT i cannot manage to force the window to scroll to it when it is inserted later with the button.
Can someone give me a hand?
This is the React code that im using:
import React, {Component} from 'react';
import PropTypes from 'prop-types';
export default class ScrollDragger extends Component {
componentDidMount(){
//window.scroll(0,document.body.scrollHeight);
const offsetTop = this.refs.col.offsetTop;
window.scroll(0,offsetTop);
}
render() {
const {id} = this.props;
return (
<div id={id} ref="col">
</div>
);
}
}
ScrollDragger.propTypes = {
/**
* The ID used to identify this component in Dash callbacks
*/
id: PropTypes.string
};