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"> </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"> </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");
}
});
