Tree table not showing horizontal scrollbar

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.
22319.java (5.03 KB)

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.

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;
}