March 12, 2012

Added overflow-y but now have new side effect

Question by santa

I have a web-based tool where there are divs with content are placed in a column on the left side of the page. Normally there are just a few of them and the page does not have a scroll, however if there are too many of them the entire page scrolls down.

I need to add an overflow for just the left column containing those divs to keep the rest of the page static.

So, in the original page I had the following:

<td id="launchPad" class="ui-droppable">&nbsp;</td>

In order to add scrollable area I modified it to:

<td id="launchPad"><div id="launchPadY" class="ui-droppable" style="overflow-y:auto;overflow-x:hidden;width:290px;height:500px">&nbsp;</div></td>

It works but added some side effect. Here’s a DEMO of the original behavior. And here’s a new DEMO with added overflow div.

Try dragging one of the divs from the left side to the yellow field in both pages. The new one now has some odd horizontal scroll.

How can I get rid of it?

Answer by Starx

Make some changes on your dragdrop-client.js

newCard.draggable({
    handle: ".card",
    stack: ".card",
    revert: "invalid",
    scroll: "false",
    start: function() {
        $(this).effect("highlight", {}, 1000);
        $(this).css( "cursor","move" );
    },
    stop: function() {
         $(this).css("cursor","default");
    }
}); 

Author: Nabin Nepal (Starx)

Hello, I am Nabin Nepal and you can call me Starx. This is my blog where write about my life and my involvements. I am a Software Developer, A Cyclist and a Realist. I hope you will find my blog interesting. Follow me on Google+

...

Please fill the form - I will response as fast as I can!