Skip to content Skip to sidebar Skip to footer

React Changing Route Breaks Height With Layout

I have a React application where if I change the route to a page with a small height the entire body doesn't have a max height for the window (the html does have full height). I ha

Solution 1:

I managed to get a fix, this is quite a specific problem (which I've gather from the lack of response). But in-case anyone else stumbled across a problem like this.

All of my pages components had the following render:

exportdefaultclassAboutextendsReact.Component {
    render() {
        return (
            <divclassName="content-wrapper">
                {/* All my about code goes in here */}
            </div>
        )
    }
}

I ended up removing the content-wrapper classNames from all the page container dividers and did the following to the Layout page:

exportdefaultclassLayoutextendsReact.Component {
    render() {
        const { location } = this.propsreturn (
            <divclassName="wrapper"><DevTool /> {/* Remove for PRODUCTION */}
                <Header /><Sidebar /><divclassName="content-wrapper">
                    {this.props.children}
                </div><Footer /><Control /><divclassName="control-sidebar-bg"></div></div>
        )
    }
}

This solved all my problems :)

Post a Comment for "React Changing Route Breaks Height With Layout"