diff --git a/.changeset/nervous-badgers-count.md b/.changeset/nervous-badgers-count.md
new file mode 100644
index 00000000000..fc0da87ffaa
--- /dev/null
+++ b/.changeset/nervous-badgers-count.md
@@ -0,0 +1,5 @@
+---
+'@siemens/ix': major
+---
+
+fix(core/pane-layout): remove absolute positioning
diff --git a/packages/core/src/components/pane-layout/pane-layout.scss b/packages/core/src/components/pane-layout/pane-layout.scss
index ab58db915c9..37b6b742038 100644
--- a/packages/core/src/components/pane-layout/pane-layout.scss
+++ b/packages/core/src/components/pane-layout/pane-layout.scss
@@ -27,7 +27,7 @@
:host {
@include ix-component;
display: flex;
- position: absolute;
+ position: relative;
width: 100%;
height: 100%;
diff --git a/packages/core/src/components/pane-layout/pane-layout.tsx b/packages/core/src/components/pane-layout/pane-layout.tsx
index 59c75bd83aa..d7ddb268d49 100644
--- a/packages/core/src/components/pane-layout/pane-layout.tsx
+++ b/packages/core/src/components/pane-layout/pane-layout.tsx
@@ -31,7 +31,7 @@ import { matchBreakpoint } from '../utils/breakpoints';
shadow: true,
})
export class Panes {
- @Element() hostElement: HTMLIxPaneLayoutElement;
+ @Element() hostElement!: HTMLIxPaneLayoutElement;
/**
* Choose the layout of the panes.
@@ -59,7 +59,7 @@ export class Panes {
floating: boolean;
}> = [];
- private observer: MutationObserver;
+ private observer?: MutationObserver;
get currentPanes() {
return this.hostElement.querySelectorAll('ix-pane');
@@ -179,30 +179,30 @@ export class Panes {
if (isLeft) {
if (leftCount) {
- pane.slot = undefined;
+ pane.slot = '';
return;
}
leftCount++;
} else if (isRight) {
if (rightCount) {
- pane.slot = undefined;
+ pane.slot = '';
return;
}
rightCount++;
} else if (isTop) {
if (topCount) {
- pane.slot = undefined;
+ pane.slot = '';
return;
}
topCount++;
} else if (isBottom) {
if (bottomCount) {
- pane.slot = undefined;
+ pane.slot = '';
return;
}
bottomCount++;
} else {
- pane.slot = undefined;
+ pane.slot = '';
return;
}
diff --git a/packages/core/src/tests/panes/layout-responsive/index.html b/packages/core/src/tests/panes/layout-responsive/index.html
new file mode 100644
index 00000000000..126ca4c241f
--- /dev/null
+++ b/packages/core/src/tests/panes/layout-responsive/index.html
@@ -0,0 +1,60 @@
+
+
+
+
+
+
+
+ Stencil Component Starter
+
+
+
+
+ This is the left pane.
+
+
+ This is the top pane.
+
+
+ This is the right pane.
+
+
+ This is the bottom pane.
+
+
+
+ Toggle Variant
+ Toggle Layout
+
+
+
+
+
+
+
diff --git a/packages/core/src/tests/panes/panes.e2e.ts b/packages/core/src/tests/panes/panes.e2e.ts
index c3948e7159c..31497b83ad4 100644
--- a/packages/core/src/tests/panes/panes.e2e.ts
+++ b/packages/core/src/tests/panes/panes.e2e.ts
@@ -142,6 +142,13 @@ regressionTest.describe('pane', () => {
await expect(page).toHaveScreenshot();
});
+ regressionTest('layout, inline, collapsed, responsive', async ({ page }) => {
+ await page.goto('panes/layout-responsive');
+ await page.waitForTimeout(1000);
+
+ await expect(page).toHaveScreenshot();
+ });
+
regressionTest(
'slot, correctly toggles while being collapsed through content click',
async ({ page }) => {
diff --git a/packages/core/src/tests/panes/panes.e2e.ts-snapshots/pane-layout-inline-collapsed-responsive-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/panes/panes.e2e.ts-snapshots/pane-layout-inline-collapsed-responsive-1-chromium---theme-classic-dark-linux.png
new file mode 100644
index 00000000000..4292f4813e5
Binary files /dev/null and b/packages/core/src/tests/panes/panes.e2e.ts-snapshots/pane-layout-inline-collapsed-responsive-1-chromium---theme-classic-dark-linux.png differ
diff --git a/packages/core/src/tests/panes/panes.e2e.ts-snapshots/pane-layout-inline-collapsed-responsive-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/panes/panes.e2e.ts-snapshots/pane-layout-inline-collapsed-responsive-1-chromium---theme-classic-light-linux.png
new file mode 100644
index 00000000000..c72970fc52c
Binary files /dev/null and b/packages/core/src/tests/panes/panes.e2e.ts-snapshots/pane-layout-inline-collapsed-responsive-1-chromium---theme-classic-light-linux.png differ