When I use the following:
body {
overflow: hidden;
}
The element that is overflowing is clipped, when I do the following:
body {
overflow: auto;
}
It's not clipped but now there's a scrollbar where it's going over.
I'd like to make the element not clip but also to not show the scrollbar or be scrollable
So basically, you don't want to control overflow, since you don't want the element to overflow. You want its parent container to adapt to whatever the size of the element.
It can be done in multiple ways. One of the best being, not doing anything since most HTML elements won't clip whatever's inside them.
Except for window, which is the boundaries of your browser. And it can't be skinned anyway.
I don't have much informations, but a wild guess would be to believe that you are trying to have an iframe behave like a regular HTML element.
Related
https://jsfiddle.net/rafaelfndev/h63r4mye/
Is it possible to show a tooltip over a container with overflow set to hidden?
I know that is possible using position: fixed (green container has property overflow: hidden).
I made 2 examples, the problem is when scrolling...first the button scrolls together with the frame, and second, the tooltip scrolls together with the frame.
I need put these boxes inside the container with overflow: hidden and show the tooltip when hovering (however, the tooltips are hidden by the overflow: hidden of the container).
Is it possible do this using only CSS?
The way to do that is to set it's parent position="absolute" not relative. so the tooltip won't be positioned relative to it's parent and can exceed the container.
But for your case it will take your design down so i suggest you to do one of these:
easily add a padding-top: 40px; to the container so the tooltip can show up at top. and it's better to set a padding-bottom: 40px; as well to make it asymmetric.
OR don't put the tooltip above the items, put them next to them at left which i also recommend you.
I am blocking out a new page for my site that is going to be responsive with a sliding divide separating 2 columns. On the left column I have a couple vertically stacked divs, the bottom of which I want to scroll its contents when it overflows. I want only the div to scroll and not the entire page.
I have already set the overflow-y to scroll and while this does produce the scroll-bar it still expands the entire page rather than recognizing the edge of the window. I have a feeling it has to do with the parent containers size not being fixed and I thought setting it to max-height: 100%; would resolve this but it has not.
here is the jfiddle
jfiddle
It is basically just a grab from my sandbox site wtb.dsdcs.com but it seems to behave the same in the jfiddle so it should suffice.
Just a disclaimer: there is a video the autoplays in both the website and jfiddle that I left intact in-case its container is part of the issue, so may need to turn down speakers.
Clarification: #PlayList is the element I wish to be able to scroll.
You need to give your Playlist class a height - (e.g 400px). Then, as you add more a items you should get a scrollbar. You can remove max-height as that won't be needed.
If you want a dynamic height of the playlist, that always takes up the remainder of the height, you could add a jQuery script:
var h1 = $(window).height();
var h2 = $('.videowrapper').height();
$('.playlist').height(h1-h2);
Since your videoWrapper is set to take up 50% of the height, the other approach could be to set your playlist to have the other 50%. So set it to height: 50%.
.playlist {
padding: 10px;
font-size: 12px;
overflow-y: scroll;
height: 50%;
position: relative;
}
EDIT 17 Oct:
The reason the above might not work with all browsers is probably because of your implementation. Like I said in the comments below, you shouldn't be using table-type display properties because they don't support overflow very well.
The W3C even say that the overflow property only applies to block-type elements LINK.
The MDN suggests the same LINK.
As such, implementing overflow on any table-type element will always be a tricky and risky approach as browser support issues or browser display inconsistencies should be expected. To get a fully supported solution, I'm afraid you'd have to try other display properties such as flex or block.
Unfortunately, there is no way to get a fully supported solution for overflow on table elements, and therefore such answer cannot be provided. The only real "solution" here that would actually solve your problem would be a complete (or partual) overhaul of your entire site.
However, I hope the above gave you hint of direction of what to do next and as such being an acceptable answer for you.
Good luck!
Is there a way to make an element not contribute to parent overflow, but keep it visible? Let me clarify
There is a watermark-like logo to be applied to a page in the manner below. It is supposed to be positioned partly outside the main content (dashed blue line)
I'm not aware of the option to set an element background in such a manner that it would persist as the browser window is resized horizontally, so I've just added a <div> with the logo as its background and position:absolute with the necessary offset relative to main content container.
Previously, the page would not get a horizontal scrollbar as long as the browser was wider than W1. Now, with an additional "watermark" element added outside of the main content box, the scrollbar would appear whenever the browser is narrower than W2
Is there something obvious I'm missing? A background setting, or possibly a neat margin workaround/
Update:
I've added a rough jsfiddle to illustrate the issue
Unfortunately, just because you nested the "watermark" div and positioned it absolutely doesn't make it outside of the document. If you put it outside of the document, the page will scroll (as you see).
To me, the first solution I think of is to move the watermark outside of the "content" div and apply the watermark to its parent container. I'm guessing you haven't done that because you need it to be relative to the "content" div, but it's something to try.
Also, the reason it scrolls is because the document has been overflow. The quick fix, yet not recommended, is to use "overflow-x: hidden;" on the parent container of the "content" div.
It's harder to give you a solution since you've stripped the rest of your HTML, and some "fixes" may not be as applicable if your structure is complicated in certain ways.
Remember that the width of your elements is greater than the actual "width" it includes padding & margins, if you have padding on your div reduce the "width" by the equivalent amount.
does that make sense? if you post the actual css & html it might be easier to give you a more detailed answer
additionally could you not assign the image as the background of the actual body element and set it to centered?
I've had a play with the code and come up with a possible solution for you.
set
body{overflow-x:hidden;}
then add
#media all and (max-width: 400px)
{
body{overflow-x:auto; }
}
as soon as your screen is smaller than 400px (the width of the div) your overflow:hidden will be overridden and you'll be given you scroll bars.
at this point you may also want to reduce the width of your watermark.
I want to add div to my website which has variable width, and that it will display scroll bars when the width is smaller than the longest line.
I tried wrapping such a fixed width element, in a variable width (100%) but that didn't work. I got the scroll bars on the entire page.
Any thoughts?
Thanks
Yaron
You can apply the overflow CSS property to the problematic div:
#problematic-div {
overflow: hidden;
}
This defines what happens to content that overflows the content area of an element. For the value scroll, user agents are supposed to provide a scrolling mechanism whether or not it is actually needed; thus, for example, scrollbars would appear even if all content can fit within the element box.
You can try some examples here.
Hope it helps.
Is there a way to target html elements that I don't want to affect the width of the page?
In other words, those elements wouldn't trigger the horizontal scrollbar, if they were to leave the browser box.
You could use the CSS overflow: hidden to keep them from affecting your layout.
You can use overflow:hidden on the elements you don't want the scrollbar on.
You can also use overflow-x:hidden or overflow-y:hidden Reference
Checking other sites structures, the solution seems to be pretty simple:
Wrapping everything in a relative positioned container(with overflow:hidden) lets the container grow with the contents of the page, while not letting the elements show out of it's borders.
Example:
http://jsfiddle.net/LnNQJ/1/