Drag and Drop Wrapper Area Extra Height ISSUE

Hi. I have a drag and drop wrapper in my project but when i put it to my main layout it’s coming with extra 10-12px height and giving this to my main layout. So there are scrolls that i don’t want vertical and horizontal.

Btw, vaadin forum is not helpful at all. That’s my second question and not even any help on the other.I hope you will help me out here…


could you provide some example code to reproduce the issue? I know I use the dnd wrapper quite extensively in multiple projects and have not seen such a height issue. Which vaadin version are you using?

In general, providing a code sample and as much detail as possible improves your chances of getting an answer.


Thanks for your concern…
I slightly solved the issue as mentioned here. http://dev.vaadin.com/ticket/6880
My vaadin version is 6.8.1 and can’t update it, because it’s really a big project.

Now i’ve got an another problem about drag drop…

At drop event i’m adding dragged pictures to my DnDWrapper which is inside a horizontalSplitPanel. I mean at left side i’m dragging pictures to right side and i’m getting a horizontal scrollbar inside the second container of horizontalSplitPanel.
Here’s a picture…

It’s so annoying…As you see there i dropped an image from left to right…Before it there wasn’t a scrollbar there.

Here’s the code that i used…

 final GridLayout rightSummerPicturesGrid = new GridLayout( 3, 2 );
        rightSummerPicturesGrid.setSpacing( true );
        rightSummerPicturesGrid.setMargin( false, false, false, true );

 final GridLayout leftSummerPicturesGrid = new GridLayout( 3, 2 );
        leftSummerPicturesGrid.setSpacing( true );
        leftSummerPicturesGrid.setMargin( false, false, false, true );
        Embedded embeddedImage_2 = new Embedded( "2", new ExternalResource( "http://eofdreams.com/data_images/dreams/hotel/hotel-08.jpg" ) );
        embeddedImage_2.setHeight( "64px" );
        embeddedImage_2.setWidth( "64px" );

        DragAndDropWrapper leftDragArea_2 = new DragAndDropWrapper( embeddedImage_2 );
        leftDragArea_2.addStyleName( "external_Drag_On_Mouse_Over" );
        leftDragArea_2.setDragStartMode( DragStartMode.WRAPPER );

        leftSummerPicturesGrid.addComponent( leftDragArea_2, 1, 1 );
 DragAndDropWrapper rightSummerDropArea = new DragAndDropWrapper( rightSummerPicturesGrid );
        rightSummerPicturesGrid.setDropHandler( new DropHandler(){

            public AcceptCriterion getAcceptCriterion(){
                return AcceptAll.get();

            public void drop( DragAndDropEvent event ){
                addDraggedPictureToGrid( rightSummerPicturesGrid, event );
        } );

  private void addDraggedPictureToGrid( GridLayout whichLayout, DragAndDropEvent event ){
        WrapperTransferable transferableObject = ( WrapperTransferable )event.getTransferable();
        Embedded imgDraggedImage = ( Embedded )transferableObject.getDraggedComponent();

        Embedded copy = new Embedded( null, imgDraggedImage.getSource() );
        copy.setWidth( "64px" );
        copy.setHeight( "64px" );

        DragAndDropWrapper tmpDragArea = new DragAndDropWrapper( copy );
        tmpDragArea.addStyleName( "external_Drag_On_Mouse_Over" );
        tmpDragArea.setDragStartMode( DragStartMode.WRAPPER );

        whichLayout.addComponent( tmpDragArea );
CustomComponent wrapperWrapperSummer = new CustomComponent( rightSummerDropArea );

rightMainGridLayout.addComponent( wrapperWrapperSummer, 0, TOTAL_ROW_COUNT - 2 );
leftMainGridLayout.addComponent( leftSummerPicturesGrid, 0, TOTAL_ROW_COUNT - 2 );

Here’s the code… I really need an urgent help…

I tried to add emtpy labels to left, but didn’t work…

Thanks in advance

Thank you vaadin community,