New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
bug(cdk/drag-drop): new preview container breaks styling #28974
Comments
Hi Segdo,
instead of
https://stackblitz.com/edit/components-issue-qxwkxp?file=src%2Fmain.ts if you need more specificity, you could add a class to the tr aswell:
Hope this helps. Have a nice day! |
Yes I can workaround this issue by changing the css in the example. In my app it is a bit more problematic because I inherit the text color from the parent component, which now gets overridden for the drag preview by the user agent color property for the popover attribute on the wrapper div. I think I could workaround this by setting the text color from my parent components using ng-deep onto the tr but this seems quite ugly. |
For context, this is caused by #28945. I went with the preview wrapper because:
I think this is a valid issue that should be addressed, I'm just wondering how. For sure we should reset the |
No issues from the div which can't be fixed by some css changes in my project. But I am a bit worried about people using css frameworks which require the |
After angular#28945 the preview is inserted into a `popover` element which has a user agent styling of `color: canvastext`. These changes reset it to `inherit` to match the old behavior. Fixes angular#28974.
After angular#28945 the preview is inserted into a `popover` element which has a user agent styling of `color: canvastext`. These changes reset it to `inherit` to match the old behavior. Fixes angular#28974.
After angular#28945 the preview is inserted into a `popover` element which has a user agent styling of `color: canvastext`. These changes reset it to `inherit` to match the old behavior. Fixes angular#28974.
Is this a regression?
The previous version in which this bug was not present was
17.3.5
Description
I have a html table where each tr has the cdkDrag directive so i can sort them. If the drag preview is outside of the table the styling breaks so i have set the cdkDragPreviewContainer to parent, which still works but since the latest update there is a new wrapper div around the table row which breaks the styling and html semantics because we now have a div instead of a tr in the table body.
I would expect that there is an option to disable the wrapping div or maybe even having it opt in as it breaks existing styling. The popover also comes with some own user agent styling which was not there before.
Reproduction
StackBlitz link: https://stackblitz.com/edit/components-issue-ycfvod?file=src%2Fmain.ts
Steps to reproduce:
1.
2.
Expected Behavior
I would expect the tr to be directly inside the parent container when i set cdkDragPreviewContainer to parent.
Actual Behavior
The tr is inside a div instead of the parent container.
Environment
The text was updated successfully, but these errors were encountered: