Quantcast
Channel: Active questions tagged flexbox - Stack Overflow
Viewing all articles
Browse latest Browse all 1675

MudBlazor scrollable content with pinned ToolBar

$
0
0

I want to achieve the following result using the MudBlazor library:

  1. The (A) element: I want it to be a MudToolBar with secondary color pinned in the top of the container
  2. The (C) element: I want it to be a MudToolBar again stuck in the bottom of the container
  3. The (B) element: I want it to be a scrollable container with whatever I put inside. When I scroll it, the elements A && C MUST not scroll along with the content.

All of that is diplayed inside a Drawer's main content

<MudMainContent><MudPaper Class="d-flex flex-grow-1 gap-4" Elevation="0"><MudLayout>                // Here i will write the whole component</MudLayout></MudPaper></MudMainContent>

Up to now i have done the following

<div class="d-flex flex-grow-1 flex-row"><MudPaper Elevation="25" Class="flex-grow-1"><MudToolBar>             A-Element</MudToolBar><div class="d-flex flex-column" style="max-height:100vh;min-height:100vh; overflow:scroll;">            // Here there will be a ForEach loop creating elements B-Element</div><MudPaper Elevation="25" Class="d-flex flex-row px-2 mx-4" Style="">         C-Element</MudPaper></MudPaper></div>

How can i do that?

enter image description here


Viewing all articles
Browse latest Browse all 1675

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>