Vuetify: [Enhancement] Controls within tab-items are not respecting fill-height

[SGarno]

Versions and Environment

Vuetify: 1.4.0-beta.0
Vue: 2.5.17
Browsers: Chrome 71.0.3578.98
OS: Windows 10

Steps to reproduce

Notice when it first opens, the content is larger than the treeview. Expand the All Objects item in the treeview and it will create a page level scroll bar.

Expected Behavior

This codepen shows how it should operate (but obviously without the CSS calcs)

Actual Behavior

The treeview does not take up the full height and when collapsed. When expanded, it goes beyond the page and creates a page-level scrollbar.

Reproduction Link

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

Other comments

Should/is this pervasive to other objects as well? Especially expansion panels, data tables, lists etc.?

[SGarno]

A little more digging into the generated code...it seems that v-window and v-window__container within v-tabs are not being sized properly. They appear to have a height of 100vh even though the v-tabs__bar takes up space within the same window.

[SGarno]

Just a note: v-data-table could really benefit from this as well....locked top and bottom header and footer positions with scroll bar for the data rows.

[parthibd]

Any updates on this ?

[johnleider]

No updates. I'm not entirely sure how I want to proceed with this. Accepting suggestions.

[KaelWD]

I'd call this working as intended. fill-height just means 100% of the parent height, not some weird 100vh thing. VTabs doesn't have anything to do with this, it would happen anywhere.

There's #2132 which looks similar to this, and you've shown that it's very easy to do with custom css.

[SGarno]

The problem is that it goes against the grain of vuetify in that components can be placed in other components and the CSS tags still work. This is one case where it breaks the continuity. It also requires CSS calcs that now prevent the component from being reusable.

There are always solutions to problems, but the answer lies more within following a methodology than "is there a workaround". My understanding is that vuetify's charter is to take the CSS pain out of components and let you focus on building the apps (which it is amazingly effective at). For the first time in my 30 years of programming in 40+ languages does it make html app development appealing. I dispise coding in proxy languages that generate other languages under the covers. Vue + Vuetify are the breath of fresh air we needed for so long. Now, if JS was only multitheaded...

[johnleider]

Kael is right though, all fill-height does is apply a class that gives an element 100% height. In the case of the above reproduction, there are quite a few elements that would need to expand to 100% height for it to work, which _is_ accomplish-able through CSS. I've marked this as a help wanted if someone wants to tackle a PR in an elegant way but I'm personally not convinced that this particular use-case needs to leave userland.

[DarthGandalf]

My issue is with fixed FAB in a tab content. Note how it jumps around when the tab is changed: https://codepen.io/anon/pen/jJwoWQ

It works statically, but not during the animation, and animation comes from v-tabs. So I think v-tabs should provide some way to achieve having a filled height for tab content. Any suggestions how to fix this in CSS?

P.S. Or should I open a separate issue?