Contact us
Get started
Loading...
Important Notice - Forums is archived

To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Product icon
TUTORIAL

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.

Calling javascript synchronously by Enver Haase, 1 week ago
Recent Posts
Vaadin Forum1. Vaadin Flow - Java

Tree table not showing horizontal scrollbar

aditya shah
7 years ago Nov 25, 2015 4:41pm

Problem:
Whenever a new item gets added to a tree table and if the content size is more than the tree table width the horizontal scrollbar is not showing up automatically. Attached sample code.
I tried following solutions but none of them worked:

  1. Adding style overflow:auto !important; to div with class v-scrollable v-table-body-wrapper v-table-body because this has an inlinle style for overflow:hidden; whcih is overriding the v-scrollable style.
  2. Adding style to div with class v-table-table

It shows the scrollbar only when i refresh the window or hide and show the tree table.
In both cases it is remove the inline style of overflow:hidden. Not sure if that is causing the problem.

Please let me know if anyone is facing similar problem and if they have solved it.

Joacim Päivärinne
7 years ago Jan 12, 2016 1:22pm

Hey Aditya,

If you check v-table-cell-content you'll see that it's got inline (calculated) width. I'm not sure how to force that to be recalculated. I tried JavaScript.getCurrent().execute("vaadin.forceLayout()"); but to no success.

Joacim Päivärinne
7 years ago Jan 12, 2016 1:58pm

You could try the following, but please note that I haven't had the time to try it out thoroughly yet. It's a very "hacky" solution.

.v-treetable {
  .v-table-cell-content,
  .v-table-cell-wrapper {
    width: auto !important;
  }

  .v-table-table {
    width: 100%;
  }
}

.v-scrollable.v-table-body-wrapper.v-table-body {
  overflow: auto !important;
}