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;
}
Related
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 know there are tons of duplicates of this question, but none of these worked so far.
I have a div with unknown width which uses overflow-y: scroll, but I want to hide the scrollbar and keep it still scrollable. Its centered in the middle of the screen, how do I do that?
.content-middle {
margin: 0 auto;
text-align: center;
max-height: 81vh;
overflow-y: scroll;
}
<div class="content-middle">
<p>My content is here</p>
</div>
Basically what you want to do is put the scrollable element inside another element and position it absolute to the right. (with negative value)
Then just focus on the content of the scrollable element.
body {
overflow: hidden;
}
.content-middle {
margin: 0 auto;
text-align: center;
max-height: 81vh;
overflow-y: scroll;
position: absolute;
width: 100%;
right: -17px;
}
<div class="content-middle">
<p>My content is here</p>
</div>
#parent{
height: 100%;
width: 100%;
overflow: hidden;
}
#child{
width: 100%;
height: 100%;
overflow-y: scroll;
padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */
}
This works look at this, you can scroll, but no scroll bar visible :)
all you would have to do is add a div outside of the one you already have.
http://jsfiddle.net/5GCsJ/2125/
div { overflow: visible | hidden | scroll | auto | inherit }
I am not sure if you can hide it, AND keep it scroll-able. I think this will work though.
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.
This is my code (see fiddle here):
img {
width: 200px;
height: 200px;
}
.image-container {
width: 600px;
height: 200px;
overflow: hidden;
}
I have lots of images, all 200px squared, in an image-container. The overflowing images are hidden.
When I slide the images to the left, the left-most image disappears in a smooth fashion.
When I slide the images to the right, the right-most image does not disappear in a smooth fashion. Instead, it disappears in a flash.
Why is there a discrepancy between the left and right behaviour? How can I have a smooth animation on both sides?
What's because your image container isn't wide enough, and the images are dropping down to the next line but the overflow is hiding that.
See this jsFiddle example.
Wrap your image container in a wrapper with the CSS you currently have on your image container, and make your image container as wide as all your images combined (4000px for kicks in my example).
.image-container {
width: 4000px;
height: 200px;
}
#wrapper {
width: 600px;
height: 200px;
overflow: hidden;
}
I'd suggest white-space:nowrap
img {
width: 200px;
height: 200px;
}
.image-container {
white-space:nowrap;
height: 200px;
}
#wrapper {
width: 600px;
height: 200px;
overflow: hidden;
}
see demo here: http://jsfiddle.net/pavloschris/bsjnq/3/
First of all, take a look at this: http://jsfiddle.net/Udvgm/
HTML:
<div id="container">
<div id="tooWide">
<p>This is just way too wide! We should clip it.</p>
</div>
<div id="relativeParent">
<div id="absoluteChild">
<p>text</p>
</div>
</div>
</div>
<div id="container2">
<p>This is some text which should be overlapped.</p>
</div>
CSS:
#container {
background: grey;
width: 450px;
}
#relativeParent{
height: 40px;
width: 400px;
position: relative;
background: green;
}
#absoluteChild{
position: absolute;
width: 100px;
height: 60px;
top: 0px;
left: 10px;
z-index: 2;
background: blue;
}
#tooWide {
background: red;
width: 600px;
}
I am wondering if it is possible for the blue box (#absoluteChild) to overflow outside the grey box (#container), but the overflowing parts of the red box (#tooWide) to be hidden.
Before you suggest it, using overflow: hidden; overflow-y: visible; (or overflow-x: hidden; overflow: visible;) causes the browser to throw in some unwanted scrollbars.
Unfortunately, it's not possible in your circumstances.
Before you suggest it, using overflow: hidden; overflow-y: visible;
(or overflow-x: hidden; overflow: visible;) causes the browser to
throw in some unwanted scrollbars.
From the spec:
The computed values of overflow-x and overflow-y are the same as
their specified values, except that some combinations with visible
are not possible: if one is specified as visible and the other is
scroll or auto, then visible is set to auto.
A helpful page with examples and a better explanation: http://www.brunildo.org/test/Overflowxy2.html
When you have a block with overflow: hidden and a block with position: absolute inside of it, until block with overflow and all parents of absolute positioned block have position: static, the absolute positioned block won't be hidden.
I don't know that you want to do with your code, but if you want to position some block from the block with overflow, you can move positioning context outside of the block with overflow, so absolute positioned block would be visible and could be positioned around.
Here is a fiddle: http://jsfiddle.net/kizu/Udvgm/3/