<ix-tabs> active tab scrolls out of view in smaller dialogs (works fine in full-width modals)

[GautamLalit]

Prerequisites

• I have read the Contributing Guidelines.
• I have not leaked any internal/restricted information like screenshots, videos, code snippets, links etc.

What happened?

When I click on first tab — the active tab scrolls out of the visible area, and it scrolls right unexpectedly.
The behavior seems fine when the same tabs are used inside a full-width modal — the active tab stays visible as expected.
Steps to Reproduce:
Create a modal/dialog with around 600px width.
Add several elements inside (enough to enable horizontal scrolling).
Click on the first tab or the one next to it.
Notice that the active tab scrolls away and becomes hidden.
Expected Behavior:
The active tab should remain visible after being clicked.
The scroll should automatically adjust so the active tab stays in view.

What type of frontend framework are you seeing the problem on?

Angular (Standalone)

On which version of the frontend framework are you experiencing the issue?

@angular/core@20.0.0

Which version of iX do you use?

v3.2.0

Code to produce this issue.

Not Available

[AndreasBerliner]

Hi @GautamLalit
Thanks for reaching out.
To help us reproduce the issue, a Stackblitz or code example would be much appreciated. Thank you.

[GautamLalit]

Hi AndreasBerliner,
Sharing below the code for your ref.

HTML file

Show modal size 600 Show modal size full-width

<ng-template #customModal let-modal>

Tab 1 Tab 2 Tab 3 Tab 4 Tab 5 Tab 6 Tab 7 Tab 8 Tab 9 Tab 10 Tab 11 Tab 12

Content Tab 1

Content Tab 2

Content Tab 3

Content Tab 4

Content Tab 5

Content Tab 6

Content Tab 7

Content Tab 8

Content Tab 9

Content Tab 10

Content Tab 11

Content Tab 12

TS code
import { Component, TemplateRef, ViewChild } from "@angular/core";
import { IxButton } from "@siemens/ix-angular/standalone";

import { IxModalSize, ModalService } from "@siemens/ix-angular";
import { IxTabs, IxTabItem } from "@siemens/ix-angular/standalone";

@component({
selector: "app-example",
imports: [IxButton, IxTabItem, IxTabs],
styleUrls: ["./modal-sizes.css"],
templateUrl: "./modal-sizes.html",
})
export default class ModalSizes {
@ViewChild("customModal", { read: TemplateRef })
customModalRef!: TemplateRef;

constructor(private readonly modalService: ModalService) {}

async open(size: IxModalSize) {
await this.modalService.open({
content: this.customModalRef,
data: size,
size: size,
closeOnBackdropClick: true,
});
}

selectedTab = 1;

changeTab(tabIndex: number) {
this.selectedTab = tabIndex;
}
}

CSS file
.modal-sizes {
display: flex;
flex-direction: column;
align-items: center;
}

.modal-sizes > ix-button {
width: auto;
margin: 0.25rem;
}

[github-actions]

🤖 Hello @GautamLalit

Your issue will be analyzed and is part of our internal workflow.
To get informed about our workflow please checkout the Contributing Guidelines

JIRA: IX-3664