angular / angular/components

Drag Drop: mat-grid-tile does not retain height when being dragged

Open
#14,417 1 comment 4 reactions 0 assignees View on GitHub
area: cdk/drag-drop P4
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

#### What is the expected behavior?
When dragging an item in a list, element rendered next to the user's cursor should look exactly like the element that is being dragged.

#### What is the current behavior?
Height changes and becomes bigger when item is being dragged

#### What are the steps to reproduce?
I use Mat-Grid-List example available in the docs at https://stackblitz.com/angular/oegmxkolgyr?file=app%2Fgrid-list-overview-example.html

Just display it on one line because of "Drag Drop Sortable, mixed orientation support (#13372 )" bug and add drag/drop like this:

```

1
2
3
4

```

![image](https://user-images.githubusercontent.com/13022458/49636825-fbbb4480-fa03-11e8-96c9-9797e6b78953.png)

When rowHeight is set to a ratio, height of item being drag changes.

Any solution to keep height at correct ratio?

Contributor guide

Open the contributing guide

Research direction

Start by reproducing the issue in the linked StackBlitz using the mat-grid-list markup and a ratio-based rowHeight. Inspect the interaction between mat-grid-tile and drag/drop during the drag preview. Done means the dragged tile retains the same height-to-width ratio as the original tile.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.