Drawer div
Ok so basically imagine this. There are 2 different sized divs. One at top (200px x 50px), the other at bottom (200px x 200px).
The bottom div has a content in it, lets say a canvas.
What I want to know is, how can I make it so the bottom div could move up and down. But when it moves up, like a magic drawer the contents behind the top div shouldn't be visible. If I just did a basic translation, due to bottom being bigger, the contents will be visible from outside. I also can't really resize the bottom div due to its contents (in this case canvas, the drawing inside would get squeezed)
29 Replies
here is the full version of the problem btw. 2 Divs (top and bottom part) and bottom part should be able to "hide" behind the top part. This is from a project that I am working on, I don't think the details are important
I am not sure if I am misunderstanding your explanation or if this is a simple z-index problem.
It isnt. When bottom div goes behind the top one due to it being taller, it will still be visible from behind
You could wrap them in a container div and set overflow: hidden on that, but of course that may depend on the rest of the code.
https://codepen.io/cbolson/pen/KKjRLPN
If you could reproduce what you are trying to do in a codepen (or similar) it would make it much easier for somebody to help or make suggestions.
this is perfect, except the wrapper part but moving the
overflow: hidden to card works just as fine. I didn't know overflow worked this way with translation, tysm!
I was just able to get to my pc once again, at late night rush I was only able to write the question and answer from phone. I was planning to make a codepen but you were way faster, tysmyes, sorry, I had one too many wrappers on there. I have updated it.
I had to use
clip instead of hidden in my env but everything works perfectly!!! TYSM
I can tag this as solved!actually now I am noticing an issue with this. My main top div does have box-shadow. Which gets cutoff now due to overflow. Would it be possible to bypass the overflow for shadow only ?
No, but you could add some padding to the parent to allow for the drop-shadow. Everywhere that is except of the top.
hmm, I see that is unfortunate
There is probably a way to do this. But you will need to share some code otherwise it is just guesswork
By modifying your version, I made a demo. There you go https://codepen.io/TcePrepK/pen/poXVXKY
this is pretty much what I have
if possible I would like to have
box-shadow effect at top aswell
if not, I will find some other way (something like only having the shadow at right/bottom)OK, this is getting really hacky but anyway...
I have used pseudo elements on the top box to generate the shadow and to create a "white" above the shadow but behind the top box to hide the top overflow:
https://codepen.io/cbolson/pen/KKjRLPN
There is probably a much simpler way to do this but it is Sunday π
lmao I see
well, I kind of revisioned what I've been doing
and just completely got rid of the top/left shadows
but still, ty for trying lol
here is what they look like now
one solution I was able to think is having a wrapper for the canvas instead. And letting that wrapper do the overflow then instead of moving this wrapper up, make it get smaller while keeping the canvas same width/height and at the bottom of wrapper
this should in theory make it so basically canvas gets cut from top
@Chris sorry to bother you once again, but could you please help me with 1 more thing ?
those 2 white circles have an
after element with a size to increase their click-box basically. But when I have the overflow-y, they instantly become out of the game for some reason ?
actually it is better if I opened a new help box at this point π
If you want to see the actual thing (I can't recreate this as a small demo), it is here https://tceprepk.github.io/SDF_Designer/It is hard to make any suggestions as I really don't know what it is that you are doing or want to achieve.
Looking at the source code of the URL that you posted those white circles don't have an pseudo elements so I am probably miss-understanding something.
That said, have you tried adding some inline padding to allow for the overflow?
sorry, forgot to send this
isn't overflow on the base supposed to only effect y axis as it is
overflow-y: clip ? I really can not understand why it would be effecting the x axis aswell.
I tried something like overflow-x: visible but doing stuff like that doesn't change anything the issue is still presentI think that adding some inline padding to the parent "node" element is your best option.
You will need to adjust some styling to put things back to together though I am unsure why you have allo those absolute postioined elements within the node to create the borders around the node contents but that is a different matter.
(ok, I see that the various "port" elements are for the JS and places do "link" the circles)
I had to redesign the "node"s like several times so the css is a bit of a mess now π
I'll see if inline padding would work or not
I would be tempted to have a main node wrapper that does nothing more than the clip and the inline padding.
Within that another div that would then hold the "visible" parts and the slidedown canvas.
(this is technically another redesign but anyways...) Basically did this
I created a canvas wrapper
and put everything there instead
and this wrapper's height changes depending on the state instead of it moving up and down
this means I can get rid of every overflow (except the one in this wrapper)
I gave it a padding aswell to not kill the (new) shadows
final version
this actually fixed a lot of issues I had with the previous design aswell
due to me technically having a giant padding at the bottom of node, it was grabbable from there (which was not good) but this fixed that aswell