Search code examples
htmlcssmaterialize

MaterializeCSS: Buttons do not vertically align (but input-fields do) inside footer

If I use valign-wrapper with a .btn in a Materialize.css .page-footer, it does not vertically align. e.g., the following html:

<footer class="page-footer">
    <div class="valign-wrapper row col 12" id="rowContainer">
        <div class="col s12">
            <button class="btn btn-block waves-effect waves-light light-blue" type="submit" name="action">btn1</button>
        </div>
</footer>

produces:

Footer with button not vertically aligned

Note: in my stylesheet, I have:

.btn-block
{
    width: 100%;
}

To make buttons with the .btn-block class fit to the width of their container.

If I replace the button with an .input-field, everything works as expected (i.e. it is vertically aligned in the footer). e.g.:

<footer class="page-footer">
    <div class="valign-wrapper row col 12" id="rowContainer">
        <div class="input-field col s12">
            <input placeholder="Input1" type="text" class="center-align">
        </div>
</footer>

produces:

Properly aligned <code>.input-field</code>

Why is this happening and how can I vertically align my button? It is my understanding that .valign-wrapper should do this for me.

Note that in my actual application, I am add several buttons to the footer; that is why I am using the .row class with a specified number of columns.

Solution

  • Okay I see. I've had issues vertically aligning certain things within divs in Materialize too. The work around can be tedious but try something like this.

    HTML:

    <footer class="page-footer">
  <div class="valign-wrapper row col 12" id="rowContainer">
     <div class="col s12">
       <button class="btn btn-block waves-effect waves-light light-blue" 
         type="submit" name="action">btn1</button>
    </div>
</footer>

    CSS:

    .valign-wrapper {
height:100px;
padding-top: 70px;
border-style: solid; /*just used to show footer height*/
border-color: black; /*just used to show footer height*/
}

.btn-block {
width: 100%;
}

    You'll probably have to tweak the 

        padding-top: 70px;

    line to fit your footer.

    Here's the codepen:

    https://codepen.io/controllz/pen/mdyLRXQ

    I added the border in CSS just to show the footer height. Remove that when you get it right. Hope this helps.