Split Panel Margin

I have a split panel with a View in each panel.
Using two navigators, driven by a menu. One navigator runs the left. The other navigator runs the right.
Works great …

The View is packed right to the edge of the split panel.

How do I set a gap between the split panel and the view?


i dunno if this is the most effecient way but it works!

I just increaed the width of the splitter from 1px to 30 using css

.v-splitpanel-horizontal > div > .v-splitpanel-hsplitter {
    width: 30px;


The split panels have two containers; first and second. You could add padding to those, or to their first children instead.

So, if you do something like this:

HorizontalSplitPanel hsp = new HorizontalSplitPanel();
hsp.setFirstComponent(new CssLayout(...));
hsp.setSecondComponent(new CssLayout(...));

Then you add padding to the layouts with:

.v-splitpanel-second-container {
  > .v-layout {
    padding: 20px;

You could also use a Vertical or a HorizontalLayout instead of a CssLayout as the content for each split view, and then call setMargin(true) for the layouts.