Dashboard - Issue of Widget-Drop-Area

[subIT1]

Description

When having the dashboard like in the image below - There are constellations where the drop-area does not appear. So there is enough space but the drop area does only appear when moving some widgets around.

Expected outcome

Every space where enough space for the widget exists should be droppable in each case and not after some other movements.

Minimal reproducible example

Website

Steps to reproduce

See the Image

Environment

Demo-Website

Browsers

Issue is not browser related

[subIT1]

@rolfsmeds i think this is related to you and https://vaadin.com/forum/t/new-dashboard-component-feedback-welcome/167980

[tomivirkki]

The dashed light blue area is the position of the dragged widget in the dashboard, not a dropzone. You can drag the widget over the empty space and the widgets will reorder:

Kapture.2025-01-09.at.13.30.47.mp4

[rolfsmeds]

I mean, technically I think that is the drop area for the widget currently being dragged, in the sense that if you let go of it it drops to where the dashed area is.

But I think what @subIT1 means is that he would want to move the widget to the empty area below the dotted box in his screenshot, which isn't possible with the layout model of the dashboard, which doesn't manage the specific column and row for each widget, but instead just defines the order of widgets, and lets css grid lay them out where they end up based on colspan and the current col count.

Switching to dense mode should fill that gap up automatically though.

[rolfsmeds]

As you can see in @tomivirkki's video, what happens is that the "Visitors by month" widget moves to the place left empty by "A kittykat" when you move the latter on top of another widget in order to take its place in the widget-order.

It would be nice if the dashboard could show a drop area in the empty space, of course (which presumably would require somehow generating elements to fill empty spaces), but the same reshuffling would still take place when you drop, because there's now an empty space to fill.

[subITCSS]

I mean, technically I think that is the drop area for the widget currently being dragged, in the sense that if you let go of it it drops to where the dashed area is.

But I think what @subIT1 means is that he would want to move the widget to the empty area below the dotted box in his screenshot, which isn't possible with the layout model of the dashboard, which doesn't manage the specific column and row for each widget, but instead just defines the order of widgets, and lets css grid lay them out where they end up based on colspan and the current col count.

Switching to dense mode should fill that gap up automatically though.

Right so i moved the "A kittykat!" and i wanted to place it where the "empty-papce" is. But based on the drop-Area i only could place it to it drag-area where it was before.
Additionally when some Widgets around are moved and the same Slot with the "empty-space" exists, then it is possible and there is a mark of the drop-area and the drag-area (which was the "empty-space").

[rolfsmeds]

Yes, so, as mentioned above, the blue box does not denote the place where it can be moved, it denotes where the widget will end up if you drop it at that moment. When you then drag the widget further away from its original position, the drop-target moves to the new place where it would then be dropped.

We'll improve the documentation explaining how drag-n-drop works.

I created a separate issue for a feature that renders potential drop targets in all possible locations: #8511

[subITCSS]

Yeah this is completely understandable. I think you dont get the issue in this case. The dragSource is the area whcih is marked as blue -> the area the dragged widget does come from. The free area (besides the blueArea and the "Browsers"-Widget) is where i want to drop the dragged widget. But i can´t do that. This kind of drop-target-issue does not exist in all cases - but in some when you move the widgets on your example page.

So there is a space in the dashboard where the drag widget can fit in - but it can not beeing dropped there. And this is cinfusing for the usage by a client.

[yuriy-fix]

Dear @subITCSS,
The issue you are describing is understood and arises from the dashboard’s layout model, as explained here, which manages only the widget order, not explicit columns/rows. Thus, the widget cannot be dropped where you are describing. We know this can be confusing. There's a feature request (#8511) to improve drop target visualization, and this topic will be addressed within documentation to clarify the drag-and-drop behavior.