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.
Related
I'm creating a page using Bootstrap's Nested nav ScrollSpy.
I have two problems that I cannot figure out.
In the first problem, I would like the Nav at the side to be narrower. There are two columns for this feature (one being the "contents" side navbar, and the other being the scrollable content itself). The columns are currently assigned col-sm-4 and col-sm-8 , however when I change this to col-sm-3 and col-sm-9 nothing happens. Well, nothing happens when I keep position-fixed up there. If I remove this then the columns do get narrower, however then the navbar doesn't remain fixed.
In the second problem, when I make the screen smaller there is overlap between the contents sections and the navbar on the side. I have shown this overlap in the two pictures below:
No overlap, full screen:
https://i.imgur.com/7GvQ3v6.png
Overlap, reduced screen size:
https://i.imgur.com/nPAwU5C.png
I have tried:
setting different column sizes
setting manual widths and max widths
setting margins for the contents column
removing the position-fixed and creating a separate CSS for position: sticky
a few other things I've forgotten.
Here's my abridged code:
<div class="row">
<div class="col-sm-4 d-none d-sm-none d-md-block d-lg-block d-xl-block d-xxl-block" style="font-size: 0.9em;">
<nav id="navbar-example3" class="h-100 flex-column align-items-stretch pe-4 border-end position-fixed">
<nav class="nav nav-pills flex-column">
<a class="nav-link" href="#content">Content</a>
</nav>
</nav>
</div>
<div class="col-sm-8 d-none d-sm-none d-md-block d-lg-block d-xl-block d-xxl-block">
<div data-bs-spy="scroll" data-bs-target="#navbar-example3" data-bs-offset="0" tabindex="0" class="scrollspy-example">
<div id="content">
...
</div>
</div>
</div>
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
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
I am using bootstrap 4. Below is my html
<div class="container">
<div class="row text-center ">
<div class="col-lg-6">A</div>
<div class="col-lg-6">B</div>
</div>
</div>
This code works fine on the website. However, on mobile or when I resize the browser to be very narrow, the 2 classes col-lg-6 stack on top of each other with quite a lot vertical space between them. I wonder is there any way to reduce that space?
space could be caused by either margin or padding... to set:
padding bottom to zero, use class pb-0
padding top to zero, use class pt-0
margin bottom to zero, use class mb-0
margin top to zero, use class mt-0
this is the bootstrap way... more info here
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!