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.

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
Disable scrolling in VerticalSplitPanel
Hi everyone,
let's say I have the following simple application:
@Theme("mytheme")
public class MyUI extends UI {
@Override
protected void init(VaadinRequest vaadinRequest) {
VerticalSplitPanel panel = new VerticalSplitPanel();
panel.setHeight(100, Unit.PIXELS);
VerticalLayout vlayoutFirst = new VerticalLayout();
vlayoutFirst.setHeight(500, Unit.PIXELS);
VerticalLayout vlayoutSecond = new VerticalLayout();
vlayoutSecond.setHeight(500, Unit.PIXELS);
panel.setFirstComponent(vlayoutFirst);
panel.setSecondComponent(vlayoutSecond);
setContent(panel);
}
@WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
@VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
public static class MyUIServlet extends VaadinServlet {
}
}
I am using a VerticalSplitPanel and set VerticalLayouts as first and second components. The VerticalSplitPanel has a fixed height of 100 pixels. Both VerticalLayouts have a fixed height of 500 pixels, which means, that you will see a scrollbar in the first and second part of the VerticalSplitPanel.
Now my question is: Is it possible to hide this scrollbar (disable scrolling) for only the first part of the VerticalSplitPanel but leave it like it is for the second part?
Just adding some information to make my intention clear. :)
The following HTML gets generated with the above code:
<div style="position: relative; width: 100%; height: 100%;">
<div class="v-splitpanel-first-container v-scrollable" style="width: 100%; height: 50px;"> ... </div>
<div class="v-splitpanel-vsplitter" style="position: absolute; width: 100%; left: 0px; top: 50px;"> <div></div> </div>
<div class="v-splitpanel-second-container v-scrollable" style="position: absolute; width: 100%; height: 49px; top: 51px;"> ... </div>
</div
What I want is to remove the CSS class "v-scrollable" next to "v-splitpanel-first-container"
Ok, so I found a solution for this.
You can hide the scrollbar for the first container by simply setting this in your CSS:
.v-splitpanel-first-container {
overflow: hidden;
}
Of course you have to make sure, only to use this for VerticalSplitPanels where you need it.