From 47b56e2f5ab453cb901f01121f9e7fd943134fc5 Mon Sep 17 00:00:00 2001
From: KB Bot <kb-bot@telerik.com>
Date: Wed, 8 Oct 2025 06:44:57 +0000
Subject: [PATCH 1/2] Added new kb article dockmanager-add-content-pane-footer

---
 .../dockmanager-add-content-pane-footer.md    | 93 +++++++++++++++++++
 1 file changed, 93 insertions(+)
 create mode 100644 knowledge-base/dockmanager-add-content-pane-footer.md

diff --git a/knowledge-base/dockmanager-add-content-pane-footer.md b/knowledge-base/dockmanager-add-content-pane-footer.md
new file mode 100644
index 000000000..18f02931f
--- /dev/null
+++ b/knowledge-base/dockmanager-add-content-pane-footer.md
@@ -0,0 +1,93 @@
+---
+title: How to Add a Footer to the DockManagerContentPane
+description: Learn how to add a fixed footer to the DockManagerContentPane.
+type: how-to
+page_title: How to Add a Fixed Footer to DockManagerContentPane in UI for Blazor
+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
+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>
+````
+
+## See Also
+- [DockManager Documentation](slug:dockmanager-overview)

From e24b225d0db6a7ea429aeef830e7ed938bd5adbf Mon Sep 17 00:00:00 2001
From: Hristian Stefanov <Hristian.Stefanov@progress.com>
Date: Mon, 13 Oct 2025 17:11:45 +0300
Subject: [PATCH 2/2] chore(DockManager): apply suggestions as per comments

---
 .../dockmanager-add-content-pane-footer.md    | 74 +++++++++----------
 1 file changed, 33 insertions(+), 41 deletions(-)

diff --git a/knowledge-base/dockmanager-add-content-pane-footer.md b/knowledge-base/dockmanager-add-content-pane-footer.md
index 18f02931f..9ad12b1cb 100644
--- a/knowledge-base/dockmanager-add-content-pane-footer.md
+++ b/knowledge-base/dockmanager-add-content-pane-footer.md
@@ -1,11 +1,11 @@
 ---
-title: How to Add a Footer to the DockManagerContentPane
-description: Learn how to add a fixed footer to the DockManagerContentPane.
+title: Add Fixed Footer to Scrollable DockManager Content Pane
+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
-meta_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 Fixed Footer to Scrollable DockManager Content Pane
 slug: dockmanager-kb-add-content-pane-footer
-tags: dockmanager, content, pane, footer, header, fixed
+tags: blazor, dockmanager, footer
 res_type: kb
 ticketid: 1700189
 ---
@@ -31,62 +31,54 @@ To add a fixed footer below a scrollable content in a `DockManagerContentPane`,
 ````Razor
 <TelerikDockManager Height="90vh">
     <DockManagerPanes>
-
-        <DockManagerSplitPane Orientation="@DockManagerPaneOrientation.Vertical" Size="40%">
+        <DockManagerSplitPane Orientation="@DockManagerPaneOrientation.Vertical">
             <Panes>
-
-                <DockManagerContentPane Size="55%" HeaderText="Pane 1.1">
-                    <HeaderTemplate>
-                        <div style="color: darkblue; font-weight: bold;">
-                            Custom Header for Pane 1.1
-                        </div>
-                    </HeaderTemplate>
+                <DockManagerContentPane Size="50%" HeaderText="Pane 1.1" Class="scrollable-pane">
                     <Content>
-                        <div style="display: flex; flex-direction: column; height: 100%;">
-                            <!-- Scrollable content -->
-                            <div style="flex: 1; overflow-y: auto; padding: 0.5rem;">
+                        <div class="pane-content-outer">
+                            <div class="pane-content-inner">
                                 @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 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>
-
-        <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>
+
+<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