Skip to content

Added new kb article dockmanager-add-content-pane-footer #3283

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Added new kb article dockmanager-add-content-pane-footer #3283

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
93 changes: 93 additions & 0 deletions knowledge-base/dockmanager-add-content-pane-footer.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
---
title: How to Add a Footer to the DockManagerContentPane
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
title: How to Add a Footer to the DockManagerContentPane
title: Add Fixed Footer to Scrollable DockManager Content Pane

description: Learn how to add a fixed footer to the DockManagerContentPane.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
description: Learn how to add a fixed footer to the DockManagerContentPane.
description: Learn how to add a fixed footer at the bottom of a scrollable DockManagerContentPane in a Telerik DockManager for Blazor.

type: how-to
page_title: How to Add a Fixed Footer to DockManagerContentPane in UI for Blazor
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
page_title: How to Add a Fixed Footer to DockManagerContentPane in UI for Blazor
page_title: How to Add Fixed Footer to Scrollable DockManager Content Pane

meta_title: How to Add a Fixed Footer to DockManagerContentPane in UI for Blazor
slug: dockmanager-kb-add-content-pane-footer
tags: dockmanager, content, pane, footer, header, fixed
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
tags: dockmanager, content, pane, footer, header, fixed
tags: blazor, dockmanager, footer

res_type: kb
ticketid: 1700189
---

## Environment
<table>
<tbody>
<tr>
<td>Product</td>
<td>DockManager for Blazor</td>
</tr>
</tbody>
</table>

## Description

I want to add a footer below the content block in the [`DockManagerContentPane`](slug:dockmanager-pane-types) component. The footer should remain fixed while the content block is scrollable.

## Solution

To add a fixed footer below a scrollable content in a `DockManagerContentPane`, define a `div` container with `display: flex; flex-direction: column;` and set the scrollable content and footer as separate sections.

````Razor
<TelerikDockManager Height="90vh">
<DockManagerPanes>

<DockManagerSplitPane Orientation="@DockManagerPaneOrientation.Vertical" Size="40%">
<Panes>

<DockManagerContentPane Size="55%" HeaderText="Pane 1.1">
<HeaderTemplate>
<div style="color: darkblue; font-weight: bold;">
Custom Header for Pane 1.1
</div>
</HeaderTemplate>
<Content>
<div style="display: flex; flex-direction: column; height: 100%;">
<!-- Scrollable content -->
<div style="flex: 1; overflow-y: auto; padding: 0.5rem;">
@for (int i = 1; i <= 30; i++)
{
<div>Scrollable content line @i</div>
}
</div>

<!-- Fixed footer -->
<div style="background: #f0f0f0; padding: 0.5rem; border-top: 1px solid #ccc;">
<strong>Custom Footer (Fixed)</strong>
</div>
</div>
</Content>
</DockManagerContentPane>

<DockManagerContentPane HeaderText="Pane 1.2">
<Content>
Second Content Pane in Split configuration
</Content>
</DockManagerContentPane>

</Panes>
</DockManagerSplitPane>

<DockManagerTabGroupPane>
<Panes>

<DockManagerContentPane HeaderText="Tab 2.1">
<Content>
First Tab Content
</Content>
</DockManagerContentPane>

<DockManagerContentPane HeaderText="Tab 2.2">
<Content>
Second Tab Content
</Content>
</DockManagerContentPane>

</Panes>
</DockManagerTabGroupPane>
</DockManagerPanes>
</TelerikDockManager>
Comment on lines +32 to +89
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • Better use styles from the current theme.
  • Remove irrelevant bits such as the HeaderTemplate and the TabGroupPane.
  • Improve the UI by moving the pane padding to the scrollable area.
Suggested change
<TelerikDockManager Height="90vh">
<DockManagerPanes>
<DockManagerSplitPane Orientation="@DockManagerPaneOrientation.Vertical" Size="40%">
<Panes>
<DockManagerContentPane Size="55%" HeaderText="Pane 1.1">
<HeaderTemplate>
<div style="color: darkblue; font-weight: bold;">
Custom Header for Pane 1.1
</div>
</HeaderTemplate>
<Content>
<div style="display: flex; flex-direction: column; height: 100%;">
<!-- Scrollable content -->
<div style="flex: 1; overflow-y: auto; padding: 0.5rem;">
@for (int i = 1; i <= 30; i++)
{
<div>Scrollable content line @i</div>
}
</div>
<!-- Fixed footer -->
<div style="background: #f0f0f0; padding: 0.5rem; border-top: 1px solid #ccc;">
<strong>Custom Footer (Fixed)</strong>
</div>
</div>
</Content>
</DockManagerContentPane>
<DockManagerContentPane HeaderText="Pane 1.2">
<Content>
Second Content Pane in Split configuration
</Content>
</DockManagerContentPane>
</Panes>
</DockManagerSplitPane>
<DockManagerTabGroupPane>
<Panes>
<DockManagerContentPane HeaderText="Tab 2.1">
<Content>
First Tab Content
</Content>
</DockManagerContentPane>
<DockManagerContentPane HeaderText="Tab 2.2">
<Content>
Second Tab Content
</Content>
</DockManagerContentPane>
</Panes>
</DockManagerTabGroupPane>
</DockManagerPanes>
</TelerikDockManager>
<TelerikDockManager Height="90vh">
<DockManagerPanes>
<DockManagerSplitPane Orientation="@DockManagerPaneOrientation.Vertical">
<Panes>
<DockManagerContentPane Size="50%" HeaderText="Pane 1.1" Class="scrollable-pane">
<Content>
<div class="pane-content-outer">
<div class="pane-content-inner">
@for (int i = 1; i <= 30; i++)
{
<div>Scrollable content line @i</div>
}
</div>
<div class="pane-footer">
Fixed Pane Footer
</div>
</div>
</Content>
</DockManagerContentPane>
<DockManagerContentPane HeaderText="Pane 1.2">
<Content>
Second Content Pane in Split configuration
</Content>
</DockManagerContentPane>
</Panes>
</DockManagerSplitPane>
</DockManagerPanes>
</TelerikDockManager>
<style>
.scrollable-pane .k-pane-content {
padding: 0;
}
.scrollable-pane .pane-content-outer {
display: flex;
flex-direction: column;
height: 100%;
}
.scrollable-pane .pane-content-inner {
padding: var(--kendo-spacing-4);
flex: 1;
overflow-y: auto;
}
.pane-footer {
background: var(--kendo-color-surface);
padding: var(--kendo-spacing-2) var(--kendo-spacing-4);
border-top: 1px solid var(--kendo-color-border);
font-weight: bold;
}
</style>

````

## See Also
- [DockManager Documentation](slug:dockmanager-overview)