CODEWITHSUNDEEP
javascripthtmlcssreactjsmaterialize
Ryuzaki Yagami
Ryuzaki Yagami

Reputation: 77

Materialize footer not staying at bottom using react

I just need a way to make the footer sticky and stay at the bottom of the page while using react.

The footer does not stay at the bottom of the page, despite following the materialize docs and creating the header, main, footer format in my app.

The footer does display correctly but refuses to go to the bottom (be a sticky footer).

Here is the render method of app.js:

render() {
        return (
            <React.Fragment>
                <Header />
                <main>
                    ... my stuff here ... 
                </main>
                <Footer />
            </React.Fragment>
        );
    }

Here is the Header component: 

export default function About() {
    return (
        <header></header>
    );
}

Here is the Footer component (copied exact from the materialize docs):


export default function About() {
    return (
        <footer className="page-footer">
          <div className="container">
            <div className="row">
              <div className="col l6 s12">
                <h5 className="white-text">Footer Content</h5>
                <p className="grey-text text-lighten-4">You can use rows and columns here to organize your footer content.</p>
              </div>
              <div className="col l4 offset-l2 s12">
                <h5 className="white-text">Links</h5>
                <ul>
                  <li><a className="grey-text text-lighten-3" href="#!">Link 1</a></li>
                </ul>
              </div>
            </div>
          </div>
          <div className="footer-copyright">
            <div className="container">
            © 2014 Copyright Text
            <a className="grey-text text-lighten-4 right" href="#!">More Links</a>
            </div>
          </div>
        </footer>  
    );
}

The footer does display correctly but refuses to go to the bottom (be a sticky footer).

I have this in the head of index.html (the docs say this is how to make a sticky footer): 

<script>

body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
  }

  main {
    flex: 1 0 auto;
  }

</script>

(I think it is because react mounts my app content inside a <div id="root"> in index.html and thus breaks the header, main, footer format materialize requires for the footer to be sticky.)

I just need a way to make the footer sticky and stay at the bottom of the page while using react.

Upvotes: 1

Views: 478

Answers (1)

Bruno Vasconcelos
Bruno Vasconcelos

Reputation: 179

In react jsx you must use className instead of class.

class is a reserved word in javascript.

You can use a <div> tag instead of a <React.Fragment> with display: flex and min-height: 100vh. In the <Footer /> tag you can apply a style with align-self: flex-end it should align the footer to the bottom of the page.

You can see this fiddle: https://jsfiddle.net/brunohgv/cjypx5wL/4/

Upvotes: 1

Related Questions