Search code examples
htmlreactjsheightreact-routerdocument-body

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 have a standard index.html setup here

<html>
    <body>
       <div id="app"></div>
       <script src="client.min.js"></script>
    </body>
</html>

Then here's my App.js file:

import React from "react"
import ReactDOM from "react-dom"
import {Router, hashHistory} from "react-router"

import routes from "./Routes"

const app = document.getElementById('app')

ReactDOM.render((
    <Router history={hashHistory} routes={routes()}>
    </Router>
), app)

And here's my Routes.js file:

import React from "react"
import {Route, IndexRoute} from "react-router"

import Layout from "./Layout"

import About from "./pages/About"
import Home from "./pages/Home"
import NotFound from "./pages/NotFound"
import Register from "./pages/Register"
import SignIn from "./pages/SignIn"
import Terms from "./pages/Terms"

export default() => {
    return (
        <Route name="root" path="/" component={Layout}>
            <IndexRoute component={Home}/>
            <Route path="/about" component={About}/>
            <Route path="/signin" component={SignIn}/>
            <Route path="/register" component={Register}/>
            <Route path="/terms" component={Terms}/>
            <Route path="*" component={NotFound}/>
        </Route>
    )
}

Finally here's my Layout.js:

import React from "react"
import ReactDOM from "react"
import DevTool from 'mobx-react-devtools'

import Control from "./components/layout/Control"
import Footer from "./components/layout/Footer"
import Header from "./components/layout/Header"
import Sidebar from "./components/layout/Sidebar"

export default class Layout extends React.Component {
    render() {
        const { location } = this.props

        return (
            <div className="wrapper">
                <DevTool /> {/* Remove for PRODUCTION */}
                <Header />
                <Sidebar />
                {this.props.children}
                <Footer />
                <Control />
                <div className="control-sidebar-bg"></div>
            </div>
        )
    }
}

All my routes go to pages with very little content so it doesn't cover the full page. In every case the entire body height wraps to the height of the content while the html remains 100% of with window.

I've tried debugging on everything. There's no padding or margin on the body or html rendered by inspecting the elements. I've also tried adding height and min-height 100% attributes to the body tags with inline styling and still didn't get any decent results.

The page automatically fixes itself as soon as the window resizes or I reload the page but that eliminates a lot of the reason to why I am using React.

Any ideas on what could fix this?

Solution

  • 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:

    export default class About extends React.Component {
    render() {
        return (
            <div className="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:

    export default class Layout extends React.Component {
    render() {
        const { location } = this.props

        return (
            <div className="wrapper">
                <DevTool /> {/* Remove for PRODUCTION */}
                <Header />
                <Sidebar />
                <div className="content-wrapper">
                    {this.props.children}
                </div>
                <Footer />
                <Control />
                <div className="control-sidebar-bg"></div>
            </div>
        )
    }
}

    This solved all my problems :)