Materialize: Valign-wrapper breaks grid

[greg-mckeon]

3327 mentioned this, I'm having the same problem where a div that has both the row class and the valign-wrapper class breaks grid layout - columns stop wrapping when the screen size changes. any chance of a fix/workaround besides duplicating the whole block and adding a hide-on-med-and-up?

[alexsales]

Checkout the comments on issue #2997. A possible workaround that doesn't require you to duplicate a bunch of code is to just use a media query to target small screens (<= 600px) and change the css display to inherit https://plnkr.co/ByUOUA92GHTelskSvXcs:

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

[Dogfalo]

There isn't a way they work on the same element. As one adds a flexbox styling which breaks the row functionality if they exist on the same container.

[jessegilbride]

I think the heart of the issue is that the .row .col uses floats, .valign-wrapper uses flexbox, and they might not be compatible as is, without a hack.
https://www.w3.org/TR/css-flexbox-1/#flex-containers

IMO, floats are useful and all that, but things can get difficult if they're relied on too much -- like a row-column layout. I hope to see a future Materialize version that does away with this and relies on basic position, flexbox, and grid for layouts.

Also, while I'd much prefer a full flexbox/grid layout scheme, here's another option for vertical alignment using position:absolute (and a few associated properties).
https://www.w3.org/Style/Examples/007/center.en.html

[jacobq]

@Dogfalo Are there currently any plans to support display: grid in future versions of materialize? I find it to be much more ergonomic than prior layout techniques, the standard seems to be stabilizing, and there appears to be widespread support in browsers.
(I guess I'm effectively asking if enough time has passed since #5091)

[Dogfalo]

@jacobq yes, something like that will come after 1.0

[cadenzah]

@Dogfalo Would you add this information in the document? If people using the framework don't get noticed that .valign-wrapper and .row, .col cannot be used together, they will likely to waste time looking for a 'official solution', just like I did.

[Dogfalo]

We would accept pull requests for this bug

On Tue, Sep 17, 2019 at 8:56 AM cadenzah [e-mail] wrote:

@Dogfalo https://github.com/Dogfalo Would you add this information in
the document? If people using the framework don't get noticed that
.valign-wrapper and .row, .col cannot be used together, they will likely
to waste time looking for a 'official solution', just like I did.

—
You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub
https://github.com/Dogfalo/materialize/issues/3361?email_source=notifications&email_token=AAVFVR2Z44WJFMYNFDVAB4DQKD42BA5CNFSM4CJEA6S2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD65AJ5I#issuecomment-532284661,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAVFVR4BEPASZJ6WB7TYGL3QKD42BANCNFSM4CJEA6SQ
.

>

Doggy sends his greetings from Mars.