I have a table - let's call it table 1. When clicking on a row in table 1 another table is being displayed, let's call this one table 2. Table 2 displays data relevant to the clicked row in table 1. Sometimes a vertical scroll needs to be displayed in table 2 and sometimes not -depends on the number of rows.Need to solve: there is an unwanted transition of the border when the scroll is not being displayed:
. The idea for the solution: "change margin-right" according to conditions which show whether the scroll exits or not.Save the result of this condition into Redux prop: element.scrollHeight > element.clientHeight || element.scrollWidth >
element.clientWidth
The problem: Trying to update the display/non-display of the scroll into redux prop from different React events such as componentDidMount, componentWillReceiveProps,CopmponentDidUpdate (set state causes infinte loop here) and from the click event.Tried to use forceUpdate() after setting props into Redux as well.
When console.log into the console in chrome (F12), the only result which is correlated correctly to the display/non display of the scrollbar is coming from within the componentDidUpdate and it doesn't reflect in the redux prop (isoverflown function returns true, redux this.props.scrollStatus and this.state.scrollStatus are false). Also don't like the usage of document.getElementById for the div which contains the rows, because it breaks the manipulation of the dom from within the props and state,but didn't find a different solution for now.
The F12 console when display the scroll bar: 
The F12 console when no scroll bar is displayed: 
.
The rest of the code:
1) action:
export function setScrollStatus(scrollStatus) { return { type: 'SET_SCROLL_STATUS', scrollStatus: scrollStatus }; }2) reducer:
export function scrollStatus(state = [], action) { switch (action.type) { case 'SET_SCROLL_STATUS': return action.scrollStatus; default: return state; } }3)Page.js (please click on the picture to see the code)
import {setScrollStatus} from '../actions/relevantfilename'; function isOverflown(element) { return element.scrollHeight > element.clientHeight ||element.scrollWidth > element.clientWidth; } class SportPage extends React.Component { constructor(props) { super(props); this.state = initialState(props); this.state = { scrolled:false, scrollStatus:false}; componentDidUpdate() { console.log( "1 isoverflown bfr redux-this.props.setScrollStatus inside componentDidUpdate",isOverflown(document.getElementById('content'))); //redux props this.props.setScrollStatus( isOverflown(document.getElementById('content'))); console.log( "2 isoverflown aftr redux-this.props.setScrollStatus inside componentDidUpdate",isOverflown(document.getElementById('content'))); //redux props this.props.scrollStatus ? console.log (" 3 this.props.scrollStatus true inside componentDidUpdate") : console.log("this.props.scrollStatus false inside componentDidUpdate"); console.log ("4 state scrollstatus inside componentDidUpdate" , this.state.scrollStatus) } componentDidMount() { console.log( "3 isoverflown bfr set",isOverflown(document.getElementById('content'))); this.props.setScrollStatus("set inside didMount", isOverflown(document.getElementById('content'))); console.log( "4 isoverflown aftr set didMount",isOverflown(document.getElementById('content'))); this.props.scrollStatus ? console.log ("scrollStatus true") : console.log("scrollStatus false"); console.log ("state scrollstatus inside didMount" , this.state.scrollStatus) } render() { <div style={{overflowY:'scroll',overflowX:'hidden',height:'50vh',border:'none'}}> { this.props.rowData.map((row,index )=> <div style={{ display: 'flex',flexWrap: 'wrap', border:'1px solid black'}} onClick={ e => { this.setState({ selected: index, detailsDivVisible: true,scrolled:isOverflown(document.getElementById('content')), scrollStatus:isOverflown(document.getElementById('content')) }, this.props.setScrollStatus( isOverflown(document.getElementById('content'))),this.forceUpdate(),console.log ("onclick this.state.scrollStatus", this.state.scrollStatus), console.log ("onclick pure funtion", isOverflown(document.getElementById('content')))); const mapDispatchToProps = (dispatch) => { return { setScrollStatus: function (scrollStaus) {dispatch (setScrollStatus(scrollStaus))}, }; }; export default connect(mapStateToProps, mapDispatchToProps)(Page); 1 Answers
Answers 1
Thank you for your reply. However,solved it in different way which does not involve the life cycle/events:
1) Calculate the height of the scroll by- multiple the height of single row by number of items to be displayed (arr.length, the arr comes from JSON)
2) setting the max height of the scroll to a needed value
3) setting the max height of the content to be the calculated height:
The result is a scroll that displays all the time with the correct height. This solved the indentation problem.
<div style={{overflowY:'auto', marginRight: '18px',zIndex:'1000',borderBottom:'1px solid black',borderRight:'1px solid black', height: this.props.rowData[this.state.selected].rowItemsList.length * singleRowHeight + 'px', maxHeight:'100px' }}> <div style={{ width:'inherit', maxHeight:this.props.this.props.rowData[this.state.selected].rowItemsList.length * singleRowHeight + 'px' }}>
0 comments:
Post a Comment