Vuetify: [Bug Report] Broken CSS in version 0.17.0

[frapa]

Versions and Environment

Vuetify: 0.17.0
Vue: 2.5.3
Browsers: Firefox 56.0
OS: Ubuntu undefined, Linux

Steps to reproduce

Nothing, with the last version 0.17.0 the layout of the app is broken (main is shown below sidebar instead of on the side).

Simply changing my css to 0.16.9 fixed the issue.

Expected Behavior

Correct layout.

Actual Behavior

None

Reproduction Link

https://codepen.io/wernerm/pen/LjggoV

[frapa]

It's also in the CDN.

[ClaudioEyzaguirre]

I had the same issue, but I could fix it.

https://codepen.io/anon/pen/dZRRvO

[nullism]

I'm having the same issue -- it's also present in the live layout examples: https://vuetifyjs.com/examples/layouts/baseline

[azaars]

If you happen to have the toolbar and navigation drawer ordered this way:

<v-navigation-drawer></v-navigation-drawer>
<v-toolbar></v-toolbar>

would it helps if you switch the order?

[nullism]

Well, that doesn't appear to fix the issue present in the official examples, which is that all page content starts below the bottom on the drawer, regardless if the toolbar is even present. It seems to me that the issue with the official examples is related to the issue @frapa is reporting, and is specific to the drawers.

For example, the <> was centered in 0.16.9, but now it's at the bottom of the page:

https://vuetifyjs.com/examples/layouts/baseline

[snarlynarwhal]

I tried going back to 0.16.9 and it still appears all broken. After changing the package version to "vuetify": "0.16.9", I delete node_modules, ran npm cache clean, and then ran npm install. That should have taken care if it, correct?

[nullism]

I had to re-webpack as well.

[snarlynarwhal]

What do you mean exactly?

[nullism]

Sorry for the confusion. Well, if you're not bundling the CSS, you'll need to load the 0.16.9 CSS instead of the unpkg default which is (as of a few hours ago) returning the 0.17.0 version.

e.g use https://unpkg.com/[email protected]/dist/vuetify.min.css instead of https://unpkg.com/vuetify/dist/vuetify.min.css

[snarlynarwhal]

Ahhhh, thank you sooo much!

[jvillego]

How can I to repare it my layout? all your documentation about layout is now wrong. See your example of predefined layouts (dark)

https://vuetifyjs.com/examples/layouts/dark

I want to use new version.

[jrast]

@frapa, just apply the changes as described in the release notes.

I fixed your pen: https://codepen.io/jrast/pen/yPXzZq?editors=1010

Edit:
I also removed the dupplicate v-app container, not shure if this had some effect.

[johnleider]

This is covered under the breaking changes section of the release notes.

If you have any additional questions, please direct them to the official Discord server.

[toblender]

Have the same issue with the styling for input fields. The errors were not highlighting and animating.

<link href="https://unpkg.com/[email protected]/dist/vuetify.min.css" rel="stylesheet">
Fixes the problem.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. Please direct any non-bug questions to our Discord