Add Fixed Footer to Scrollable DockManager Content Pane

Environment

Product

DockManager for Blazor

Description

I want to add a footer below the content block in the DockManagerContentPane 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.

<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