Vuetify: [Bug Report] VDataTable column headers wrap when inside VCard

[Dylan-Chapman]

Environment

Vuetify Version: 2.0.7
Last working version: 2.0.5
Vue Version: 2.6.10
Browsers: Chrome 76.0.3809.100
OS: Windows 10

Steps to reproduce

Nest a VDataTable within a narrow VCard and look at the column headers

Expected Behavior

Being inside a VCard doesn't change VDataTable's styling

Actual Behavior

VDataTable's header column text breaks mid-word

Reproduction Link

https://codepen.io/Dylan-Chapman/pen/JjPGZvo

Other comments

Looks like this was caused by #8380

[Dylan-Chapman]

This actually applies to all text within the table, not just the headers. This likely applies to other components within VCard as well.

[Teellcory]

I ran into this today as well. The card ensures it never overflows, even if that means making the column header/body text a single character wide. I don't mind "no overflow" being a new prop or the default, but I definitely need a way to allow overflow to scroll.

[Kotoriii]

Same here. On 1.x it overflowed and allowed to put more columns into the table.
I tried fixing it with CSS, but for now only getting rid of box-sizing: border-box seems to work, but that solution is not pretty.

[jacekkarczmarczyk]

Workaround is to add

.v-data-table {
  word-break: initial
}

But as #8380 may affect other components as well i'm not sure if that change shouldn't be just reverted and long words should be handled in userland same as they would be handled in any other component

[johnleider]

This is resolved as of the latest version: https://codepen.io/johnjleider/pen/ExVzzyQ

This Pull Request is being closed due to inactivity.

If you have any additional questions, please reach out to us in our Discord community.

[kosratdev]

Hi there,

Is there a way to apply text-no-wrap to the data table headers, in my situation I want to make horizontal scroll instead of wrapping header texts.