diff --git a/src/BootstrapBlazor/Components/Layout/Layout.razor.scss b/src/BootstrapBlazor/Components/Layout/Layout.razor.scss index 1d5b9895cfe..91db68349db 100644 --- a/src/BootstrapBlazor/Components/Layout/Layout.razor.scss +++ b/src/BootstrapBlazor/Components/Layout/Layout.razor.scss @@ -137,6 +137,11 @@ position: relative; flex: 1; + > .tabs:fullscreen { + --bb-layout-header-height: 0px; + --bb-layout-footer-height: 0px; + } + .tabs.tabs-border-card { box-shadow: none; } @@ -275,8 +280,7 @@ .layout-main > .tabs { height: calc(var(--bb-layout-height) - var(--bb-layout-header-height) - var(--bb-layout-footer-height)); - .tabs-body { - height: calc(100% - var(--bb-tabs-item-height)); + > .tabs-body { overflow: auto; } } diff --git a/src/BootstrapBlazor/Components/Tab/Tab.razor.scss b/src/BootstrapBlazor/Components/Tab/Tab.razor.scss index f18d6bb2438..55c3799230f 100644 --- a/src/BootstrapBlazor/Components/Tab/Tab.razor.scss +++ b/src/BootstrapBlazor/Components/Tab/Tab.razor.scss @@ -14,6 +14,26 @@ display: flex; flex-flow: column; + &:fullscreen { + > .tabs-body { + overflow: auto; + } + } + + &:not(:has(> .tabs-header)) { + > .tabs-body { + --bb-tabs-item-height: 0px; + } + } + + > .tabs-body { + background-color: var(--bs-body-bg); + padding: var(--bb-tabs-body-padding); + flex: 1; + height: 1%; + min-height: 0; + } + .tabs-body-content { background-color: var(--bs-body-bg); @@ -203,16 +223,6 @@ } } -.tabs .tabs-body { - background-color: var(--bs-body-bg); - padding: var(--bb-tabs-body-padding); - flex: 1; -} - -.tabs .tabs-content { - position: relative; -} - /*Card*/ .tabs.tabs-card, .tabs.tabs-border-card {