diff --git a/src/components/container/container/container.scss b/src/components/container/container/container.scss
index 8041469ca0..237a9848c2 100644
--- a/src/components/container/container/container.scss
+++ b/src/components/container/container/container.scss
@@ -16,6 +16,8 @@
}
.sbb-container {
+ @include sbb.ignore-children-margin;
+
background-color: var(--sbb-container-background-color);
// In order to support nested sbb-containers (e.g. if used in an overlay), we need to explicitly set background color to transparent.
@@ -25,15 +27,6 @@
background-color: transparent;
}
- // Placing content before and after the container stops the margin of inner elements from overflowing
- &::after,
- &::before {
- content: '\a0';
- display: block;
- visibility: hidden;
- height: 0;
- }
-
:host(:not([expanded])) & {
@include sbb.page-spacing;
}
diff --git a/src/components/core/styles/mixins/helpers.scss b/src/components/core/styles/mixins/helpers.scss
index 04fc25246b..ea8049f779 100644
--- a/src/components/core/styles/mixins/helpers.scss
+++ b/src/components/core/styles/mixins/helpers.scss
@@ -33,6 +33,17 @@
}
}
+// Placing content before and after the container stops the margin of inner elements from overflowing
+@mixin ignore-children-margin {
+ &::after,
+ &::before {
+ content: '\a0';
+ display: block;
+ visibility: hidden;
+ height: 0;
+ }
+}
+
@mixin invisible-container-overlay {
position: absolute;
opacity: 0;
diff --git a/src/components/tabs/tab-group/tab-group.scss b/src/components/tabs/tab-group/tab-group.scss
index ce37e4df53..e90fbefb99 100644
--- a/src/components/tabs/tab-group/tab-group.scss
+++ b/src/components/tabs/tab-group/tab-group.scss
@@ -18,6 +18,8 @@
}
.tab-content {
+ @include sbb.ignore-children-margin;
+
margin-block-start: var(--sbb-spacing-responsive-m);
transition: height var(--sbb-tab-group-animation-duration) var(--sbb-animation-easing);
@@ -26,6 +28,10 @@
opacity: 0;
height: 0;
overflow: hidden;
+
+ // If e.g. a block link with an absolute positioned element is slotted, there would be an visible space
+ // below the tab content. Setting position:relative removes the unwanted whitespace.
+ position: relative;
}
::slotted(*[active]) {
diff --git a/src/components/tabs/tab-group/tab-group.stories.ts b/src/components/tabs/tab-group/tab-group.stories.ts
index 3aea79340f..beac4ec72c 100644
--- a/src/components/tabs/tab-group/tab-group.stories.ts
+++ b/src/components/tabs/tab-group/tab-group.stories.ts
@@ -16,8 +16,9 @@ import { sbbSpread } from '../../../storybook/helpers/spread.js';
import readme from './readme.md?raw';
import { SbbTabGroupElement } from './tab-group.js';
-import '../tab-title.js';
+import '../../link.js';
import '../../title.js';
+import '../tab-title.js';
const firstTabTitle = (label: string, args: Args): TemplateResult => html`
${label}
@@ -41,6 +42,7 @@ const tabPanelTwo = (): TemplateResult => html`
Diam maecenas ultricies mi eget mauris pharetra et ultrices neque ornare aenean euismod
elementum nisi quis eleifend quam adipiscing vitae proin sagittis nisl rhoncus mattis rhoncus
urna neque viverra justo nec.
+ Visit sbb.ch
`;