MudBlazor scrollable content with pinned ToolBar - html

I want achieve the following result using the MudBlazor library.
The (A) element i want to be a MudToolBar with secondary color pinned in the top of the Container
The (C) element i want it to be a MudToolBar again stuck in the bottom of the Container
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??

Try this :
<div class="d-flex flex-column" style="height:100vh; overflow-x:auto;">
// Here there will be a ForEach loop creating elements B-Element
</div>

with the same Condition
I found this solution useful:
<MudPaper Class="d-flex flex-column overflow-x-auto " Height="100vh">
Your Content
</MudPaper>
for more information you can read these:
Enable Flexbox in MudBlazor
Flex Direction in MudBlazor
Overflow in MudBlazor
I read this answer and then I wrote my solution based on it.

The answer is now in documentation:
<MudDialog>
<DialogContent>
<MudContainer Style="max-height: 300px; overflow-y: scroll">
</MudContainer>
</DialogContent>
</MudDialog>
From: https://mudblazor.com/components/dialog#scrollable-dialog

Related

Using flexbox grow but allow the content to overflow

I'm a bit new to using flexbox and I've ran into one problem I can't seem to fix.
What I want:
I want to have a container taking the available height, but whenever the content inside it takes up more space than the containers height, apply overflow:scroll
Context:
Ref image:
container image
As you see on the image, everything inside of the red brackets are covered inside of a div with flex-grow:1, I want this because the images might be different sizes so therefore I need the div to take the reamining space.
As for the white container, that is also using flex-grow:1 so that the button can be on the bottom of the div.
Now, what I would like is for the content inside of the blue brackets to be taking the available height, but if there is more content than the available height, then I want it to be scrollable.
The thing that happens now if I add a lot more content to the container inside of the blue brackets, it pushes everything below it further down, meaning the overflow isn't working.
E.g Like so
As you see in the image, everything is just pushed further down and the div is being stretched.
Here is the code I have so far:
<div class="flex flex-col grow overflow-y-auto w-3/4 my-2 mx-auto bg-white max-h-full">
<!-- img -->
<div>
<img [src]="currentUser.photoURL" class="w-full mx-auto">
</div>
<!-- information -->
<div class="flex flex-col text-black grow">
<!-- Info -->
<div class="flex flex-col p-2 divide-y grow overflow-y-auto">
<div class="flex flex-col">
<p class="font-bold">{{currentUser.displayName}}</p>
<p class="font-thin">{{currentUser.email}}</p>
</div>
<div class="p-2 overflow-y-auto max-h-[90%]">
<div class="h-full grow-0 overflow-y-auto">
<p>
some information about {{currentUser.displayName}}
</p>
<ul>
<li>
Some values are
</li>
<li>
Some experience are...
</li>
<li>
Why im helping people...
</li>
</ul>
</div>
</div>
</div>
<!-- Message -->
<div class="shrink-0 p-2 text-center w-full bg-blue-500">
<button>Send melding</button>
</div>
</div>
</div>
I'm using tailwindCSS for this project, but will happily take suggestions in normal css as well.
I think the simplest solution for this would be to set the div you want to be a scrollable as "display: block" (or at least some version of block) with a fixed height. Once you apply that fixed height, your overflow content ought to be scrollable.

How to fit word length and height to fit container

I am trying to fit some text while designing on html and css, and I can't seem to find a way to do it.
I currently have this
and the objective is to have as it is here
what seems the best way to do this?
<div class="container h-100">
<div class="row h-100 align-items-center justify-content-center text-center">
<div class="col-lg-10 align-self-end">
<h1 class="text-uppercase text-white font-weight-bold adjust">Ignition<br>Dimension</h1>
</div>
</div>
</div>
This is not possible with just CSS. You need JavaScript to adjust the text size depending on its parent container. See https://css-tricks.com/fitting-text-to-a-container/
There is a proposal for CSS Container Queries but this has only been implemented in Chrome behind a flag
Except your parent container has the same width and height as your viewport. In that case, you could use vh/ vw to adjust the size based on the viewport

What is the issue having a different child for rows than col on a bootstrap grid?

Yesterday I was doing a review of our HTML structures and found out we have containers used as row child's like this
<section class="row graySeccion">
<div class="container py-5 graySeccion">
<div class="row mb-5">
<div class="col py-2 text-center">
<h1>WELCOME TO STEAM SCHOOLS</h1>
</div>
</div>
But looking at the oficial documentation I can see this note.
In a grid layout, content must be placed within columns and only columns may be immediate children of rows.
How wrong is it that we have this row->container->row, and what things we could be breaking?
Should we start refactoring our HTML structures?
Yes, Ideally you should follow a proper grid layout structure.
row class contains following property:
.row {
margin-right: -15px;
margin-left: -15px;
}
Due to this property of row horizontal scrollbar occurs on the page for some resolutions. To avoid this we need to follow the official documentation of bootstrap (container->row->col).

horizontal scrolbar only appearing at bottom of page using bootstrap

I am trying to make a page where data from a database is displayed, because I want to make it accessible on smaller devices where not all data fits on to the screen, so the user should be able to scroll from left to right. But the problem I am having now is that the scrollbar only appears when you are at the bottom of the page. Picture when the page is at bottom, The page when i scroll even up a little. So what I want as a result is to have the scrollbar always there(except when the page is large enough to display all the data.)
I have tried the answer of this post: Horizontal scrollbar only appearing at bottom of page, but unfortunetly it did not work.
My code:
<div class="container-fluid w100 h-100 mt-5">
<div class="row">
<nav style="position: fixed; "class="col-md-2 pt-5 sidebar h-100 w100">
....
</nav
<main role='main' style='background: white;' class='col-md-10 ml-auto col-lg-10 ';>
<h2 class='d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center
pt-3 pb-2 mb-3'>Afspraken:</h2>
<div class='table-responsive'><table class='table table-sm table-striped'><thead
align='left'><tr><th>Naam:</th><th>Reparatie</th><th>Telefoonnummer</th>
<th>Email</th><th>Status</th><th>Datum</th><th>Datum</th></tr></thead><tbody>```
The problem is, that you only enable the overflow-x on your table and the overflow-y on the body. My recommendation is, that you use overflow-y on your table and set a fixed height on your div with the class table-responsive.
Another option would be to add overflow-x to your body and display the whole width of the table on your body.

Overflow causing entire page to scroll

I am trying to create a page that doesn't scroll. Certain child elements on the page can scroll, but I'm trying to prevent the page as a whole from scrolling. I have a very nested child element that, when overflowed, receives a scroll bar, but also causes the main document to grow and receive a scroll bar as well.
This is the heart of the issue, but there are a few more nested levels that may be a factor.
<div class="h-100 d-flex flex-column">
<div class="d-flex align-items-center justify-content-center bg-red" style="height: 7%">
</div>
<div class="d-flex align-items-center justify-content-center bg-red" style="height: 3%">
</div>
<div class="bg-green" style="max-height: 75%; height: 75%; overflow-y: auto;">
<div class="bg-gray m-4" style="height: 2000px;">
The height of this content causes BOTH scroll bars to appear. I only want a bar on the
'green section'
</div>
</div>
<div class="bg-red flex-grow-1">
</div>
</div>
This code pen demonstrates how my app is set up. The overflowing element is nested deep within many flex displays (coming from bootstrap 4 utility classes).
https://codepen.io/averyferrante/pen/YMdNpO
I want only the green section from the code pen to scroll, not the entire document to grow/scroll as well.
The problem is that a couple of your containers are missing height definitions. As a result, the children of those containers ignore the percentage heights applied to them.
Add this to your code:
<div class="flex-grow-1" style="height: calc(100% - 48px);">
This height rule gives the container a defined height while compensating for the height of its sibling.
Another height rule was missing three levels down:
<div class="d-flex flex-column w-100" style="height: 100%;">
revised codepen
More detailed explanations:
Working with the CSS height property and percentage values
Chrome / Safari not filling 100% height of flex parent
Did you try playing with position: absolute? You can then set width and height as needed and the red box will see its scrollbar disappear!