Materialize: Broken valign-wrapper with row class.

[ghost]

I'm trying to use the valign-wrapper inside a row, but for some reason, the row/column functionality becomes broken when the wrapper is introduced. Any insight?

Sample Code:

<div class="container">
    <h1>Without valign</h1><br>
    <div class="row">
        <div class="col s12 m4 l4">
            <img src="images/profile_images/face.png" class="responsive-img">
        </div>
        <div class="col s12 m8 l8 left-align ">
            <img class="valign" src="images/other_images/email_icon.png" height="30" width="30">
            <a class="blue-link-no-padding" href="mailto:[email protected]">[email protected]</a><br>
            <img class="valign" src="images/other_images/phone_icon.png" height="30" width="30">
            <a class="blue-link-no-padding" href="tel:[phone]">[phone]</a>
        </div>
    </div>

    <h1>With valign</h1><br>
    <div class="row valign-wrapper">
        <div class="col s12 m4 l4 valign">
            <img src="images/profile_images/face.png" class="responsive-img">
        </div>
        <div class="col s12 m8 l8 left-align valign">
            <img class="valign" src="images/other_images/email_icon.png" height="30" width="30">
            <a class="blue-link-no-padding" href="mailto:[email protected]">[email protected]</a><br>
            <img class="valign" src="images/other_images/phone_icon.png" height="30" width="30">
            <a class="blue-link-no-padding" href="tel:[phone]">[phone]</a>
        </div>
    </div>
</div>

Desktop:

Mobile:

[darckyn]

The same problem here...

plz help.

[ghost]

Here is a hacked solution that works. I duplicate the same row, but only apply the valign-wrapper and valign tags when the screen size is medium or large, and on small, I display a normal row and column grid. To achieved this, I use the helper classes "hide-on-med-and-up" and "hide-on-small-only". Dirty but effective. I don't have time to learn above flex and flex-direction. :100:

<div class="container">
    <div class="row hide-on-med-and-up">
        <div class="col s12 m4 l4">
            <img src="images/profile_images/face.png" class="responsive-img">
        </div>
        <div class="col s12 m8 l8 center-align ">
            <img class="valign" src="images/other_images/email_icon.png" height="30" width="30">
            <a class="blue-link-no-padding" href="mailto:[email protected]">[email protected]</a><br>
            <img class="valign" src="images/other_images/phone_icon.png" height="30" width="30">
            <a class="blue-link-no-padding" href="tel:[phone]">[phone]</a>
        </div>
    </div>

    <div class="row hide-on-small-only valign-wrapper">
        <div class="col s12 m4 l4 valign">
            <img src="images/profile_images/face.png" class="responsive-img">
        </div>
        <div class="col s12 m8 l8 left-align valign">
            <img class="valign" src="images/other_images/email_icon.png" height="30" width="30">
            <a class="blue-link-no-padding" href="mailto:[email protected]">[email protected]</a><br>
            <img class="valign" src="images/other_images/phone_icon.png" height="30" width="30">
            <a class="blue-link-no-padding" href="tel:[phone]">[phone]</a>
        </div>
    </div>
</div>

[darckyn]

I used this css code and it helped me:

@media #{$small-and-down} {
.valign-wrapper{
display: inherit;
}
}

[alexsales]

@darckyn +1: definitely on the right track and much less verbose.

@bionetmarco: If you don't want to use Sass, you can just add a css media query at the end of your stylesheet. In your specific sample code, I found that you'll need to increase the specificity of your selector to get @darckyn's code to work https://plnkr.co/ByUOUA92GHTelskSvXcs:

@media only screen and (max-width: 600px) { .row.valign-wrapper { display: inherit; } }

[jessegilbride]

I put in my 2-cents about this on the other issue thread (#3361), including a possible workaround with position:absolute.

https://github.com/Dogfalo/materialize/issues/3361#issuecomment-333342892

[Dogfalo]

valign uses flexbox to achieve vertical centering which conflicts with the grid system, so in general it should be used in localized places

[cirleno]

I have been looking in this discussion and I learn something which helped me solve a problem in may development, tks for all.