SplitterLayout: SplitterElement size not retained when resized

[vishnuvardhan-s]

Describe the bug

Our SplitterLayout has two SplitterElements.
By default the width of the Splitter is 1rem. But our application requirement is 4px. So, we have added a style to make the splitter 4px.

.splitterLayout > div[class*="Splitter-splitter"] {
    width: 4px;
    min-width: 4px;
    background-color: #dedede;
}

Since the drag button is still 1rem, it is draggle over that area. I have added a border to the drag button in the repro to show the area where its draggable.

Problem:
When the button is dragged from left side of the draggable area that is outside of the Splitter width, the SplitterElement is reset to its min size every time

Isolated Example

https://codesandbox.io/p/github/vishnuvardhan-sairam/ui5-webcomponents-splitter

Reproduction steps

1.Resize splitter from left side of the Splitter Button
2.Notice that the SplitterElement is resized to its min-width every-time

Expected Behaviour

It should retain the size of the SplitterElement

Screenshots or Videos

UI5.Webcomponents.Issue.mov

UI5 Web Components for React Version

1.26.0

UI5 Web Components Version

1.23.1

Browser

Chrome

Operating System

MacOS 14.3.1

Additional Context

No response

Relevant log output

No response

Organization

SAP

Declaration

• I’m not disclosing any internal or sensitive information.

[Lukas742]

Hi @vishnuvardhan-s

we moved to StackBlitz as our preferred web IDE/sandbox as it's not possible anymore to edit (fork) codeSandboxes with a free plan.

The Splitter is implemented according to our design guidelines and customizing it is not supported.
If you still want to change it you can probably overwrite the value of the internal CSS variable --_ui5wcr-SplitterSize. When doing so, please keep in mind that internal styles are not subject to semantic versioning and can therefore change without notice.

[vishnuvardhan-s]

Hi @Lukas742

Thanks for the quick response. For some reason StackBlitz was not loading for me in office wifi but noted.

I understand that overriding the CSS is causing the issue. Is there anyway that the library can provide a way to customise the width of the Splitter and the Splitter icon size. Because, I see no other direct ways to fix this issue that we are facing.

Thanks,
Vishnu.

[Lukas742]

Hi @vishnuvardhan-s

the styling is not intended to be changed, the main reasons for this are i.a.

• Apps using different technologies (e.g. SAPUI5/React) should still have the same look and feel
• UX could suffer as some styles can look broken if CSS is changed, especially if the app supports different content density modes or theming.
• It could lead to problems for a11y, e.g. contrast ratio

Also, I mentioned a way for you to overstyle the size of the splitter:

If you still want to change it you can probably overwrite the value of the internal CSS variable --_ui5wcr-SplitterSize. When doing so, please keep in mind that internal styles are not subject to semantic versioning and can therefore change without notice.

Did you try that already?

[vishnuvardhan-s]

Thanks @Lukas742 . I understand. And yes, I had tried changing the CSS variable. It changed the style properly, but the issue still exists!

[Lukas742]

Did you check if the selector has a higher specificity? Otherwise it won't overwrite the css var of the component, because of injection order of css-modules.

https://stackblitz.com/edit/github-7x8sx6?file=src%2FApp.tsx,src%2Findex.css

[vishnuvardhan-s]

Hi @Lukas742 , sorry for getting back late. Yes, my styles are injected and the width is changed. However, the issue still exists in the stackblitz repro you provided and I understand its because of trying to change the default width of the Splitter.

Spliter.Resize.mov

Let me know if this can be fixed from your end in any way, because from my side, I don't see any solution :(

The issue happens when I grab from left side of the splitter icon, and it doesn't stay at the position dragged.

[Lukas742]

I tried to reproduce the behavior with different browsers, but unfortunately wasn't able to. Could you please provide information about your:

• OS
• Browser
• Screen Resolution
• Viewport size (dimensions of the window)

Also please check if this behavior occurs for all viewport sizes and when rendered outside of an iframe ("Open Preview in new Tab")