Draggable object issue with overflow

[nuratic]

Hi All!

 

I have this code, largely based on an example by OSUblake. I am having an issue with the blocks overflowing the element. I have defined a height (and max-height) each with a value of '37rem' and have set overflow-y to 'scroll':

<section class="listContainer w-1/2" style="height:37rem; max-height:37rem; overflow-y: scroll">
... list items ...
</section>

 

In the image below, there are 9 items. the height of '37rem' will mean that only the first 6 blocks will show, and any more than that would mean that the parent block is scrollable. However, as shown in the image below, this isn't what happens. There is a scroll bar but the blocks still overflow the parent element.

 

Admittedly, I'm not the best but to the best of my knowledge, this should work. I'm sure this is an issue with me not currently fully understanding how the JS behind it works (I am working on this ). If you need any more info, please let me know!

Thank you in advance for any help on this issue!

See the Pen MWZyLWY by nuratic (@nuratic) on CodePen

[Rodrigo]

Hi @nuratic and welcome to the GreenSock forums!

 

The issue is that the child elements have an absolute position but their parent is not positioned, so the elements are taken out of the flow.

 

This seems to solve it:

.listContainer {
  position: relative;
  cursor: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/106114/cursor.png),
    move;
  cursor: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/106114/cursor.png)
    32 32,
    move;
}

Finally you are using old GSAP syntax and very old versions of GSAP's Core and Draggable. Any particular reason for that? I strongly recommend you to use the latest versions and check the migration guide:

 

Hopefully this helps.

Happy Tweening!

[nuratic]

Hi @Rodrigo,

 

This did help, Thank you!

 

As mentioned the code is based off an example which I pretty much just did a copy and paste and then started adapting to my needs. I didn't consider that the code may need to be updated, this is now done