Draggable broke layout

[Robero]

Hi Guys,

 

I'm trying for the first time the Draggable plugin, as you can see in the Codepen below. 

I want to create a slider, and allow user to swtich slide dragging them. I don't know why, but the plugin add some extra padding to the div inside ".slides", which completly broke the layout, because images should be 500px wide and not a couple of pixels.

 

Can you help me to understand what I'm doing wrong?

Thank you all!!

See the Pen mBgGvQ by robyy94 (@robyy94) on CodePen

[Carl]

Hi and welcome to the GreenSock forums,

 

Sorry to see you ran into some trouble. Thanks a bunch for the demo! Very helpful.

 

I have a partial answer for you at the moment.

 

Since you are using scrollTop as your type, Draggable needs to wrap the stuff you are dragging (the contents of ".slides") in another div to accomodate overscrolling and the edgeResistance. Basically the browser is only going to let an element scroll based on the width or height of the content. But since folks were so fond of the overscrolling / bounceback behavior introduced on mobile devices.. in order to mimic that with Draggable that used scroll, we needed a way to make the content longer than normal.

 

If you inspect the DOM you will see the wrapper div as the first child of ".slides".

 

<div class="slides" style="overflow-y: auto; overflow-x: hidden; cursor: move; touch-action: pan-x; user-select: none;">
  <div style="display: block; width: 100%; padding-right: 3618px; position: relative; overflow: visible; vertical-align: top; transform: translate3d(0px, 0px, 0px);">
        <div>
        <article class="slides__box active" style="margin-left: 527.5px;">
            <img src="https://placehold.it/600x350">
        </article>
        <article class="slides__box" style="margin-left: 300px;">
            <img src="https://placehold.it/600x350">
        </article>
        <article class="slides__box" style="margin-left: 300px;">
            <img src="https://placehold.it/600x350">
        </article>
        <article class="slides__box" style="margin-left: 300px;">
            <img src="https://placehold.it/600x350">
        </article>
        <article class="slides__box" style="margin-left: 300px; margin-right: 527.5px;">
            <img src="https://placehold.it/600x350">
        </article>
    </div>
    </div></div>

 

This is the first time I've seen that wrapper div have this sort of negative impact on the layout. I have to suspect that maybe that "padding-right:3618px;" is perhaps being mis-calculated for some reason. Not really sure. We will look into it more and get back to you.

 

 

 

[Robero]

Hi Carl,

 

Thank you very much for your reply.
At the moment I have solved writing my own drag function, but I will really like to replace it with Draggable.

 

Let me know if you will find a solution.

Thank you again

 

[OSUblake]

What's supposed to be going on here? Why do you have scrollTop for the draggable? That doesn't make any sense. Nor does the layout. Are you trying to make it horizontal? 

 

See the Pen ?editors=0110 by osublake (@osublake) on CodePen

 

 

[GreenSock]

For the record, I think the issue had to do with some of the foundation CSS you were loading that was affecting the box-sizing. If you add this CSS, it resolves things, right?: 

*, :after, :before {
        box-sizing: content-box;
}

 

Like @OSUblake, I'm not quite sure what you were trying to do exactly so I can't say if it's producing the results you were after. 

[Robero]

Thank you @OSUblake and @GreenSock for your help.

Yes Osublake, I was trying to make it horizontal.. I know at the moment the layout it doesn't make sense, but it will

I have one last question. How can I hide the horizontal scrollbar? Using overflow-x: hidden on the container div "c-ingrediente" doesn't work, because it is overwritten to overflow-x: auto of Draggable.

 

edit:  codepen here: 

See the Pen LOYabz by robyy94 (@robyy94) on CodePen

 

Thank you!

[OSUblake]

You can't scroll something if the overflow is hidden, but you can hide a scrollbar like here...

 

But do you even the container to be scrollable?