Can you set a default split layout theme in Vaadin 23

Hi there,

is it possible to set a theme for split layout that is used by every split layout?
Reason is that sometimes the splitter gets inaccessible in minimal theme and I want to make it larger respectively make the splitter always visible.

How do I have to adjust


to achieve this?

Thanks and Regards

Not sure I understood. Do you want to customize the styling of the minimal variant of SplitLayout globally in your app?

To make the split handle always visible for SplitLayouts with the minimal variant, you could do

  opacity: 1;

To make it wider and taller, you could do

vaadin-split-layout[theme="minimal"]::part(handle) {
  height: var(--lumo-size-xl);

vaadin-split-layout[theme="minimal"]::part(handle)::after {
  width: 8px;

Thanks @useful-whale this helps. The problem with my split layout is that if I pull the handle to the upper completely I cannot reach it anymore and therefore I want to make it visible for this theme variant. With small theme this is not the case although the handle is hard to reach. Is there a way to prevent this?

That’s strange – even in the minimal variant the handle is still 36x36px by default, even though it’s not visible until you hover over the splitter, so in the topmost position there should still be an 18px tall grabbable element visible.

Here’s a SplitLayout with minimal theme applied, where I’ve added a black border around the layout itself, and made the handle red: as you can see it’s definitely reachable:

(and it becomes visible when you hover over that red area)

Do you already have custom styling applied to the SplitLayout?

No not that I know of. But there are many nested layouts.