Skip to content

Zoneless: Splitter is not positioned correctly #17319

@viktorkombov

Description

@viktorkombov

Description

When the application is running in a zoneless change detection environment, the Splitter component is not positioned correctly.

Depending on the Splitter orientation, the splitter bar is rendered in the wrong place:

  • When the Splitter type is typeHorizontal, the splitter bar is displayed in the right corner.
  • When the Splitter type is typeVertical, the splitter bar is displayed at the bottom.

This appears to be related to zoneless change detection, as the component layout is not calculated/applied correctly in this environment.

I have created a sample that reproduces the behavior:
https://stackblitz.com/edit/tyacnprm-wrestiuu?file=src%2Fapp%2Fapp.config.ts,package.json

Framework

Angular

Angular Version

21.2

Ignite UI for Angular Version

21.2.0

Component / Area

Splitter

Browser

Chrome

Operating System

Windows

Command Not Working

Steps to Reproduce

  1. Open the following sample: https://stackblitz.com/edit/tyacnprm-wrestiuu?file=src%2Fapp%2Fapp.config.ts,package.json
  2. Observe the position of the splitter bar.

Actual Result

The Splitter component is not positioned correctly. For typeHorizontal, the splitter bar is displayed in the right corner. For typeVertical, the splitter bar is displayed at the bottom.

Expected Result

The Splitter should be positioned correctly according to its orientation in a zoneless change detection environment.

Reproduction URL

https://stackblitz.com/edit/tyacnprm-wrestiuu?file=src%2Fapp%2Fapp.config.ts,package.json

Attachments

No response

Metadata

Metadata

Assignees

Type

No fields configured for Bug.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions