HorizontalSplitPanel Overflow

Hi Everyone,

I am having trouble with the HorizontalSplitPanel not adjusting it’s height to the component on the right-hand side (setSecondComponent()), which is a Table. The Panel adjusts its height if the first component expands, but displays scroll bars if the second component overflows.

The desired result for my application would be for the panel to adjust its height to match whichever component is larger.

I’ve found a few threads and tickets on this, but it doesn’t seem to be resolved and the threads were quite old. Can anyone point me to a css property or workaround for this? I’d appreciate it.


The solution to your issue is to have the height of all three components as undefined; this should instruct the splitpanel to behave like you want to. If you have a dynamic height in there, it won’t work.

If all of them are undefined, and it still doesn’t work, then it is a bug; you can report it at
. Please attach a simple snippet of code to illustrate the bug if you do.

Hello All,
Im also facing same situation, Im using HorizontalSplitPane, and I need to keep right and left panels undefined as it should grow with the contents, and issue here as “Bryson” reported, the splti pane grows with the first components size, but not the second, so I hope this is a simple bug and can be fixed by vaadin team asap.
As we can see there is no fix to this issue, can anyone suggest us an alternative to this component which is having undefined heigh? so that we can have a workaround please…

Hi Manu,

Here’s a workaround you could try:

.v-splitpanel-second-container {
  position: static !important;
  display: inline-block;
  margin-left: 7px; /* Match to the width of the splitter element */
  vertical-align: top;

.v-splitpanel-first-container {
  display: inline-block;
  vertical-align: top;

IMO this should be the default styling of the component. I’ll try and remember to make a ticket about it.