Strange behavior of layout component inside DragAndDropWrapper

General
1

I’ve come across o strange thing while experimenting with the DragAndDropWrapper.


The code

Window mainWindow = new Window("Tester Application");

GridLayout layout = new GridLayout();

layout.addComponent(new Label("Testing"));

DragAndDropWrapper layoutWrapper = new DragAndDropWrapper(layout);
layoutWrapper.setWidth("600px");
layoutWrapper.setHeight("200px");
layoutWrapper.setStyleName("wrapper");

layout.setSizeFull();
layout.setStyleName("grid");

mainWindow.addComponent(layoutWrapper);

mainWindow.setSizeFull();
setMainWindow(mainWindow);


Expected result

One would expect that this should create a DragAndDropWrapper element that’s 600px wide, and a GridLayout element that’s also 600px wide inside it.


Result

The GridLayout has a width of 606px instead:

<div class="v-ddwrapper v-ddwrapper-wrapper wrapper" style="height: 200px; width: 600px;">
	<div class="v-gridlayout v-gridlayout-grid grid" style="height: 206px; width: 606px;">
		<div class="v-gridlayout-margin">
			<div style="position: relative; overflow: hidden; height: 208px;">
				<div style="height: 208px; overflow: hidden; padding-left: 0pt; padding-top: 0px; position: absolute; left: 0px; top: 0px; width: 606px;">
					<div style="float: left; margin-left: 0px;">
						<div class="v-label" style="width: 606px;">Testing</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

See attached image for visual result.

Please note: I’m using borders in the example in order to visualize the problem, even if they maybe add to the problem, they are not the root cause of it.


Browsers

The behavior does not seem to be browser specific, as I’ve tested with Firefox 3.6, IE 8 and Chrome, with same result.

I’ve also attached a project that demonstrate the behavior.

Any idea what’s causing this?
11274.zip (5.14 MB)
11275.jpg

2

After further investigating this I figured out it was related to CSS/theming.

By adding a custom theme (based on the reindeer theme), and putting “.dd-wrapper { padding: 0; }” in the CSS, the problem went away.

Perhaps it’s not the best idea to have a padding on .dd-wrap in the first place though?

3

Hi,

The padding needs to be there so that the wrapper can apply borders around the element when something is dragged over it (if it accepts drags). Negative margins would be more flexible, but since core Vaadin layouts are what they are (i.e. clip all layout cell contents), margins and outlines are not an option.

The workaround to remove the padding is what you’ve done, use a custom theme and override the padding.

4

I see your point. When I removed the padding, the hints started making the child component jump back and forth.

This might be related to how layouts in general work in Vaadin, but shouldn’t one expect the child of a component (with defined size) to have the parents size - padding. Like this:

+---------------------------+
|            2px            |  Parent size:
|   +-------------------+   |  Width: 600px
|   |                   |   |  Height: 200px
|2px|                   |2px|
|   |                   |   |  Child size:
|   |                   |   |  Width: 596px
|   +-------------------+   |  Height: 196px
|            2px            |
+---------------------------+
5

That would be expected. But the issue is not directly related to layouts, instead it depends on the CustomComponent and its client-side counterpart VCustomComponent, which are used as the basis for the DragAndDropWrapper.

The way the VCustomComponent calculates the allocated space for its child component (composition root) does not take the elements padding into account, it just uses plain offsetWidth/offsetHeight to calculate relative sizes for the contained component.

6

This appears to still be a problem. There is a ticket for this: http://dev.vaadin.com/ticket/6880