Search code examples
jqueryhtmldrag-and-dropdroppablejquery-ui-droppable

Dragging and dropping one dialog box into another box adding unnecessarily scrollable bar


When one dialog box i.e 'Iteration 1' dragged and dropped into another dialog box i.e Release 1 works perfectly but adding unnecessarily scrollable bar to other dialog box i.e 'Release 1'.I want to see my dialog box i.e 'Iteration 1' at the top left corner itself.

$(document).ready(function() {

    $( "#dialogRelease").dialog({

        autoOpen: false,
        modal: false,
        show:  {effect: 'fade', duration: 2000},
        hide: "size",
        resizable:false,
        draggable:true,
        height: 360,
        width: 450,
        position: [1300,500]
    });

});

Do i've to change something here?

Demo code here [http://jsfiddle.net/coolanuj/7683X/14/]


Solution

  • 
        #dialogIteration {
            overflow:hidden;
        }
    
    

    This fixes the scroll bar although I think you are looking for something else. Try focusing on setting up your css correctly before attempting to use jQuery plugins. This is a style issue not a jQuery issue.

    Check the documentdation for drag and drop there may be an overflow option somewhere, also make sure all the elements in your dialogs have the correct styles or you will get very erratic behavior.