I have a very large table with a position:fixed header that stays at the top of the page when you scroll down the page.
I've been trying to enhance this by putting the table inside of a reasonably-sized width container with overflow:auto but the fixed container extends outside the div.
Here is a simplified JS fiddle
The problem with overflow stems from your position fixed property for the header element, furthermore the horizontal scroll on the container (unless intentional) should be fixed by adding the overflow-x: hidden property to your container element.
.container {
width: 400px;
height: 400px;
background: #ccc;
overflow-x: hidden;
}
.header {
width: 600px;
height: 100px;
background: #ddd;
}
.content {
width: 600px;
height: 600px;
background: #eee;
}
Let me know if this is not the answer you're looking for, we can discuss further.
Related
I've been trying to add a scrollbar to my page when a fixed element (main in the example below) is higher than the viewport. This is problematic in mobile as it doesn't show the entire element
I've tried to add overflow-y: scroll to the element itself, the wrapper, the body etc. with no results.
section {
background-color: lightblue;
width: 100%;
height: 100%;
}
header {
height: 60px;
}
main {
position: fixed;
top: 50px;
border: 3px solid blue;
background-color: tomato;
height: 400px;
width: 400px;
}
<section>
<header>
Header
</header>
<main>
Main - When this element overflows the viewport, I cant see the rest
</main>
</section>
I fixed by adding a wrapper containing the fixed and overflow properties as well as a height of 80% so I can scroll all the way down
section {
background-color: lightblue;
width: 100%;
height: 100%;
}
header {
height: 60px;
}
.mainWrapper{
overflow: auto;
position: fixed;
top: 40px;
height: 80%;
}
main {
border: 3px solid blue;
background-color: tomato;
width: 400px;
}
<section>
<header>
Header
</header>
<div class="mainWrapper">
<main>
Main - When this element overflows the viewport, I cant see the rest
Main - When this element overflows the viewport, I cant see the rest
Main - When this element overflows the viewport, I cant see the rest
Main - When this element overflows the viewport, I cant see the rest
Main - When this element overflows the viewport, I cant see the rest
Main - When this element overflows the viewport, I cant see the rest
Main - When this element overflows the viewport, I cant see the rest
</main>
</div>
</section>
I have tried a lot of things and searched online but I cannot figure out the solution to this problem.
I have a div container which has a max-height, min-height and also overflow: auto. When the inner content is larger than the max-height, a scrollbar appears as expected. But, inside the content there is a dropdown, which when clicked, the menu expands, and instead of being displayed outside the parent container, it is like changing the inner content height.
The only solution I found online and made sense to me, is to wrap the container to div with relative positioning and make the dropdown absolute, but there is a big drawback now, the dropdown stays fixed on scroll, as it is absolute positioned relative to the wrapper and not the content. Is there any common way to fix this or any other solution ?
I didn't post any code because I do not want the answer to rely on my code.
I just want a minimal example if possible with these properties:
Container has a max-height
If content is larger than the container's max-height then the container should display a scrollbar.
The content has a dropdown which should scroll with every other element of the content.
The menu options of the dropdown element are escaping the container / are displayed outside the boundaries of the container.
To illustrate on my comments on the question, here's an MCVE:
.scroll-container {
border: 3px dashed #eee;
height: 400px;
padding: 10px;
overflow: auto;
width: 400px;
}
.content {
background-color: #f0f0f0;
height: 600px;
position: relative;
}
.dropdown {
background-color: orange;
position: absolute;
height: 300px;
width: 300px;
left: 300px;
}
<div class="scroll-container">
<div class="content">
<div class="dropdown"></div>
</div>
</div>
As you can see, with absolute positioning based on the relative position of div.content the orange div.dropdown creates a horizontal overflow, which is what you don't want. To fix this scenario, you need to remove position: relative from div.content and use transform: translateX(300px); instead of left: 300px;:
.scroll-container {
border: 3px dashed #eee;
height: 400px;
padding: 10px;
overflow: auto;
width: 400px;
}
.content {
background-color: #f0f0f0;
height: 600px;
}
.dropdown {
background-color: orange;
position: absolute;
height: 300px;
width: 300px;
transform: translateX(300px);
}
<div class="scroll-container">
<div class="content">
<div class="dropdown"></div>
</div>
</div>
I want to create a left navigation bar with the position: fixed attribute so that it stands in place as we scroll down.
I have .fullPage div with display: flex to show these divs horizontally.
When I add position: fixed attribute to the left-navbar, second div container-fluid-center takes 100% of browser's width instead of 100% of available space.
<div class="fullPage">
<div class="left-navbar">
</div>
<div class="container-fluid-center">
</div>
</div>
.fullPage {
width: 100%;
height: 100%;
position: relative;
}
.fullPage .left-navbar {
width: 88px;
height: 100vh;
background: #fff;
border-right: 1px solid #e4e4e4;
position: fixed;
}
.fullPage .container-fluid-center {
width: 100%;
height: 100vh;
}
As per MDN documentation, with position set to fixed "The element is removed from the normal document flow, and no space is created for the element in the page layout.".
In order to fix your issue, you can give to .container-fluid-center a margin-left: 88px;, so that it will not "overlap" with .left-navbar
When you give position:fixed to the .left-navbar
A position:fixed element does not leave a gap in the page where it would normally have been located.
So You need to .fullPage .container-fluid-center give width like this
.fullPage .container-fluid-center {
width: calc(100% - 88px);
height: 100vh;
}
So it is worked as you need
I have a fixed bottom div using top: 50%; bottom: 0px;. I want a scroller to appear when text overflows the inner content div. If text doesn't overflow I want to hide the scroller.
http://www.w3schools.com/cssref/pr_pos_overflow.asp
div.scroll {
background-color: #00FFFF;
width: 200px;
height: 200px;
overflow: auto;
}
<div class="scroll">You can use the overflow property when you want to have better control of the layout. The default value is visible.</div>
Use:
.myScrollableDiv {
overflow: auto;
}
...on your scroller div. Without seeing what your code is, we can't help you with your CSS specifically.
.className {
max-height: 500px;
overflow-y: auto;
}
I am trying to build a digital restaurant menu… I designed it like a popup, so it sits in a fixed container on top of a gray transparent overlay. Since there are more dishes than fitting into this container, I wanted the container to be scrollable, which I achieved with overflow-y: scroll. At this point
it still worked perfectly.
But on the bottom of the container I wanted fixed footer with a white-to-transparent gradient containing a button to close the whole menu popup. Since the stuff that I thought of didn't work, I placed it inside of another container on top of the popup… Now it looks as I wanted it, but the menu in the background is not scrollable anymore.
I guess there must be another way… How can I place the container with the close button on the bottom of the menu container while still being able to scroll?
Here is a jsFiddle…
Your container for the button at the bottom is overlaying the scrollable container, so when you try and scroll the text, you're actually trying to scroll inside of the bottom-container as its over the top. I have made a JS fiddle, with an example of what you're trying to achieve.
https://jsfiddle.net/8ydb2h2m/
body {
background: #ccc;
}
.box {
width: 100%;
height: 100%;
max-width: 80%;
max-height: 80%;
left: 0;
top: 0;
margin: 5% 10%;
position: fixed;
background: #fff;
overflow: hidden;
}
.top-section {
height: 20%;
background: #c00;
}
.scroll-section {
height: 70%;
overflow-y: scroll;
}
.bottom-section {
height: 10%;
}
.button {
background: #c00;
height: 30px;
width: 100px;
margin: auto;
text-align: center;
}