I have a container with overflow hidden and an element inside which is a select made with li's with absolute position but it is too long for the parent container, so I want this element to go out of the container, but the overflow hidden (the parent container has many other elements and it has horizontal scroll) doesn't allow this one to go out.
Below is the screenshot of this:
Set the width (not "auto") to your child container
<div id="pCont" style="overflow:auto; height: 200px; width: 200px;">
<div id="cCont" style="overflow:hidden; width: 200px;">
<ul>
<li>
</li>
</ul>
</div>
</div>
What you see is the expected behavior for an absolute positioned child of an element whose overflow is hidden. The only way around this is to make your fake select box dropdown a child of the <body> element, and position it by the fake select box, which breaks some of the HTML semantics.
The bigger question is, why do you need the overflow hidden to begin with? If removing overflow: hidden on the parent breaks something, that becomes the problem to solve. Otherwise, the answer to your current question is:
Overflow and absolute positioning is behaving as designed
Related
Is there some way I can prevent a child div from contributing to its parent div's scrolling? I want the parent div to scroll on overflow, but there is only one child element I don't want that to apply to.
<div style="height:200px; overflow-y:scroll;">
<div style="height:900px;" /> // don't cause parent to scroll on overflow
</div>
I basically want the overflow-y:hidden; functionality, but only for a certain child element.
I wish to have two slimscrolled div and be able to drag and drop elements between them. The latter is tested, and is working perfectly with the sortable method, but when I apply the slimscrolls, the two divs receive the overflow: hidden attribute, which makes the dragged elements disappear when moved outside of the div. As per documentation I saw no option to modify the slimscroll's overflow attribute, which I would like to change to overflow-x: visible and overflow-y: hidden, for obvious reasons. The CSS attribute is applied on element level, so workaround with CSS rules are not an option afaik.
I want the slimscroll to be functional, but I want to be able to drag and drop elements between the two slimscrolled divs. How to proceed?
EDIT
In hope of receiving answer I add a code example:
<div id="container1">
<ul><li>...</li></ul>
</div>
<div id="container2">
<ul><li>...</li></ul>
</div>
<script>
$('#container1').slimScroll({...});
$('#container2').slimScroll({...});
$('#container1').sortable({
connectWith: "#container2",
});
</script>
In the above example, elements from #container1 should be dragged to #container2, but due to the overflow:hidden property applied by the slimScroll(), the dragged element will disappear when dragged outside of the area of #container1. I wish to be able to drag the element and also see the element I am dragging.
The issue was a setting in jquery.slimscroll.js. In v1.3.8 starting from the 160th line I did the following;
// wrap content
var wrapper = $(divS)
.addClass(o.wrapperClass)
.css({
position: 'relative',
overflow: 'visible', // <--- change this from 'hidden' to 'visible' !!!
width: o.width,
height: o.height
});
After applying the above change, the problem I described ceased to exist.
Using Draw2d and the menu selection code from the demo but I don't get the expected result...
In the demo, the menu appears on the right side of the clicked element. In my version the menu appears way off to the top.
This seems to be caused by the fact that I have some HTML directly above the canvas (header, etc...). On the contrary if the canvas is at the very top of the page it works well.
Found a way to fix this.
It's all about where you append the menu's HTML and relative positionning
In the demo there isn't any HTML above the canvas (on the website it's an iframe so what you see above is not really there from the canvas perspective) so it works.
The demo is misleading because in the code they add the HTML menu in the body tag. They can do that simply because their page is composed of only two elements : the body and the canvas.
In my case and probably yours too, doing this results in adding the HTML menu far far far far away from the canvas itself resulting in a position that is wayoff !
What they do is :
$("body").append(this.overlay);
What you should do is append the HTML menu (this.overlay) as a sibling of the canvas. Do NOT add it in the canvas itself. If you do, you won't catch click events anymore.
Your HTML should look like this :
<div id="some-parent">
<div id="gfx_holder">THE CANVAS</div>
</div>
And the code updated to
$("#some-parent").append(this.overlay);
But it's not finished yet. As the menu is added using position: absolute you'll need your parent containers set to position: relative so the the child's absolute position would become relative to the parent and not web page. It's CSS... You know...
Also, the parent should be the exact same size as the child canvas !
So the HTML should evolve to this :
<div id="some-parent" style="position: relative; height: 800px">
<div id="gfx_holder" style="height: 800px">THE CANVAS</div>
</div>
And when the menu's HTML is added it should look like that at runtime :
<div id="some-parent" style="position: relative; height: 800px">
<div id="gfx_holder" style="height: 800px">THE CANVAS</div>
<div class="overlayMenu" style="top: 230px; left: 197.391px;">⊕</div>
</div>
See ? The overlayMenu has position: absolute which allows it to be rendered at a correct position...
hf
I have following setup:
<div class="wrapper">
<div class="element" id="first"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
...
</div>
so wrapper is set to overflow-x: auto and content that overflows it is horizontally scrollable. #first div has fixed position and more styling applied, but essentially it is always visible and other divs scroll behind it, like this:
issue here is that I'm using drag and drop functionality which works fine, but once I try to drop stuff on a fixed div and if it has content behind it, the drag and drop happens to that content. Basically feels like I'm interacting with stuff behind fixed div even though it is in front. I know fixed elements are out of the flow and maybe this is whats causing it? But I can't figure out how to make content behind that div stay behind it.
Well... It maybe because fixed elements are out of the flow.
You can try setting the element with id first as absolute and giving it a high z-index value. A high value of z-index will make it stay on top of other elements.
So when others scroll it will remain at that position.
Try plaing with ay pointer-events: none; in CSS
I have a nested div with text. Text overflows from child to parent div by design.
<div style="position:absolute;width:300px;background:yellow">
<div style="position:relative;height:20px;width:150px;left:0;
background:red;overflow:visible;white-space:nowrap">
this text will overflow into the parent div!
</div>
</div>
My question : Is there a way to change color of the text starting at the border of the child inside the parent div with css? Right now color is the same as text overflows to the parent div.
Kind of cheating, but this would work:
<div style="position:absolute;width:300px;background:yellow">
<div style="position: absolute; top: 0; color: pink;">
this text will overflow into the parent div!
</div>
<div style="position:relative;height:20px;width:150px;left:0;
background:red;overflow:hidden;white-space:nowrap">
this text will overflow into the parent div!
</div>
</div>
Proof: http://jsfiddle.net/8m6v2/
http://jsfiddle.net/JpSEv/
<div style="position:absolute;width:300px;background:yellow;color:red">
this text will overflow into the parent div!
<div style="position:absolute;top:0;height:20px;width:150px;left:0;
background:red;overflow:hidden;white-space:nowrap;color:yellow">
this text will overflow into the parent div!
</div>
</div>
:)
Try wrapping it with a span tag and styling it that way.
I don't believe this is possible, since the text is a child of the inner div, the color of the inner div will take precedence.
A solution is to split the text across two elements and manually coloring each, although I concede that is not a nice solution.
The only way I can think of accomplishing this would be to place a partially transparent div over the part of the parent which is not part of the child. This will however also mess with the background-color of the parent and not allow you to select the text underneath the transparent div.