Checkbox absolute positioning conflicts with ix-content when scrolling

[raphaelgodart]

Prerequisites

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

What happened?

When using a scrollable list of checkboxes in combination with ix-content, after scrolling and checking a checkbox that is at the bottom of the list, the content jumps up. The top part of the content is not visible anymore. Steps to reproduce:

• Scroll to the bottom of the list of checkboxes
• Uncheck the bottom checkbox. Bug: the content jumps up and the top of the content is not visible anymore.

This StackBlitz illustrates the problem: https://stackblitz.com/edit/checkbox-positioning-conflict

The problem seems related to the position:absolute that is being set to checkboxes in siemens-ix.css. In the StackBlitz you'll see a red and green examples.

• Bug repro (red): illustrates the bug.
• Workaround 1 (green): counters the bug by forcing position:relative on the checkboxes (padding: 0 was added to have the same layout as with position:absolute).
• Workaround 2 (green): sets position:relative on the parent of the checkboxes

The checkboxes should not have absolute positioning.

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

Angular

Which version of iX do you use?

v2.1.2

Code to produce this issue.

https://stackblitz.com/edit/select-positioning-conflict

[github-actions[bot]]

🤖 Hello @raphaelgodart

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-1323