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!
Related
This is the demo of my problem.
And this is the outline of my HTML:
<div class="container">
<div class="f1">
TITLE
</div>
<div class="f2">
<div class="f2-child">
<img/>
</div>
</div>
</div>
Basically it's a flex container which contains two flex items. The first flex item(f1) is the title, which takes up some fixed height. And the second flex item(f2) fill the rest of the height. So far so good.
And I put another flex container(f2-child) inside of f2, just to create some margin space. And I want an image to fit inside f2-child. The image should be as wide as f2-child, but its maximum height should be the same as f2-child.
It works fine when the viewport's width is low, but when the width gets higher, the image would overflow. I tried setting f2 and f2-child's max-height to 100%, but it does not work.
To solve the issue of the image overflowing, you can try setting the max-width property of the image to 100% and the width property to auto. This will ensure that the image's width is equal to the width of the parent container (f2-child) and its height is proportional to its width, preventing overflow.
You can also add overflow: hidden to the f2-child container to clip any content that exceeds its boundaries.
Here's the updated code:
<div class="container">
<div class="f1">
TITLE
</div>
<div class="f2">
<div class="f2-child" style="overflow: hidden;">
<img style="max-width: 100%; width: auto;" />
</div>
</div>
</div>
Add the two tailwind classes h-full object-cover to your image tag.
<img src="https://source.unsplash.com/04X1Yp9hNH8/1600x900" alt="img" class="w-full h-full object-cover"/>
I've figured out myself by learning more about how flexbox works.
This is my final outcome: codepen link. I use tailwind so you need to know a little bit about it.
Now my layout looks like this:
<div class="container">
<div class="f1">
TITLE
</div>
<div class="f2">
<img/>
</div>
</div>
I removed f2-child from the last version.
The flex direction of the container is column, so after determining the height of f1, f2 would stretch itself. f2 is also a flex container, but with row flex direction. The image is its flex item.
Notice how f2 has multiple tailwind classes. flex items-center justify-center make sure image is horizontally and vertically aligned in f2.
And f2's grow-0 shrink-1 basis-auto h-full min-h-0 plus img's max-h-full make sure that when the view port is wider, the content won't overflow.
For more details you could see this post: Prevent flex items from overflowing a container
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.
I used Bootstrap 4 (4.4.1) to make a basic grid structure. It consists of two columns (each 50% width), where the left column has two rows (each 50% height). The upper left grid area should contain a video inside of it, without squeezing or squishing it. The rest that overflows should simply be hidden. I basically managed to do all of this except that the video spans over the whole left column, while I want it to be only in the first row of the column (which spans 50% of the columns height).
Relevant HTML snippet:
<div class="container-fluid d-flex h-100 flex-column">
<div class="row flex-grow-1">
<div class="col">
<div class="row h-50" id="video_wrapper" style="background-color: magenta;">
<video id="video" autoplay muted></video>
</div>
<div class="row h-50" style="background-color: lime;">
bottom left
</div>
</div>
<div class="col" style="background-color: aqua;">
<div>
right side
</div>
</div>
</div>
</div>
Relevant CSS:
#video_wrapper {
overflow: hidden;
}
#video {
/* Make video to at least 100% wide and tall */
min-width: 100%;
min-height: 100%;
/* Prevent the browser from stretching or squishing the video */
width: auto;
height: auto;
/* Horizontally flip the video */
position: absolute;
transform: scaleX(-1);
}
I tried a lot of stuff, but nothing would work. I have a JSFiddle below. It will use your webcam as the video – turn the webcam off to see the grid structure, the video should be inside the pink area. Unfortunately it also goes into the green area which should stay free. You can see this behavior when enabling your webcam.
JSFiddle: https://jsfiddle.net/matzewolf/zxbtq569/3/
Any help is really appreciated. Btw, I'm a newbie to web dev and Bootstrap, so please bear with me :)
Add position:relative to the parent of the video (class position-relative will do).
Explanation: When you use...
position: absolute;
/* top | bottom | left | right | width (%) | height (%) |
min-width (%) | max-width (%)... and there might be a few others */
...the element is sized/positioned relative to the reference parent, which is the closest positioned parent (or to <body> if none closer). Which means the closest parent with a set position other than static (which is the default value).
See it working.
A good article on CSS positioning.
Notice I also added classes d-flex justify-content-center align-items-center to the parent, which make your absolutely positioned elements be horizontally and vertically centered, responsively.
I'm working on an application in Angular. One of my components has the following template HTML:
<div class="panel panel-primary">
<div class="panel-heading">Info</div>
<div class="panel-body">
<ul class="nav nav-tabs">
<li class="active"><a>Data</a></li>
</ul>
<br>
<div class="dataModel">
<!--This div is creating a horizontal scrollbar -->
</div>
</div>
</div>
The css associated with dataModel class is as follows:
.dataModel{
height:400px;
overflow-y:scroll;
overflow-x: hidden;
}
When the height of this div is below 50px, I do not get a horizontal scrollbar, however, any value above 50px creates a horizontal scrollbar, which is unexpected, since the width is untouched.
I though of setting height to auto, but that would defeat the purpose of overflow-y
I suspect that the bootstrap classes are maintaining an aspect ratio on the div, which may be why changing the height affects the width. Is that the case ?
Please advise. Thanks
I fixed this problem by doing the following change:
<div class="row-fluid panel panel-primary">
in the first line of the component html. The rest remains the same.
I have added content div in which having two column div as col-md-3 and as col-md-9
In <div class="col-md-3"> in between having tabular panel menu and in tabular menu have one accordion with scroll effect.
With having min-height: 329px !important
When i check on browser with 1366*768 it looks good with same height
for <div class="col-md-3"> and for 2nd div` with same height
but when i change resolution of pc it conflicts
I want same height as per 2nd div having class .col-md-9
please give me solution on that.
display:flex is the correct solution for you apply this property in parent div like this
HTML
<div class="parent">
<div class="col-md-3">
// you content here
</div>
<div class="col-md-9">
// you content here
</div>
</div>
CSS
.parent{
display:flex;
}
This will make equal height of elements in .parent.
You can add another class on the divs like this class="col-md-3 sameheight" and class="col-md-9 sameheight" and than style it giving a static height if this is what you want.
.sameheight
{
height: 300px //for example
}
For the responsivnes than you can work with media queries. But also the display: flex for the parent of 2 divs is a good solution if it is applicable to you.