Skip to content
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

fr(Drag-Drop): Setting z-index #18902

Closed
piernik opened this issue Mar 24, 2020 · 2 comments · Fixed by #18914, lingounet/testage#29 or michael-vasyliv/ngx-virtual-swiper#24
Closed

fr(Drag-Drop): Setting z-index #18902

piernik opened this issue Mar 24, 2020 · 2 comments · Fixed by #18914, lingounet/testage#29 or michael-vasyliv/ngx-virtual-swiper#24
Assignees
Labels
feature This issue represents a new feature or feature request rather than a bug or bug fix P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent

Comments

@piernik
Copy link

piernik commented Mar 24, 2020

In source code I see that z-index of preview is hard coded: https://github.com/angular/components/blob/master/src/cdk/drag-drop/drag-ref.ts

extendStyles(preview.style, {
      // It's important that we disable the pointer events on the preview, because
      // it can throw off the `document.elementFromPoint` calls in the `CdkDropList`.
      pointerEvents: 'none',
      // We have to reset the margin, because it can throw off positioning relative to the viewport.
      margin: '0',
      position: 'fixed',
      top: '0',
      left: '0',
      zIndex: '1000'
    });

Problem is that I'm using drag-drop feature n bootstrap modal which has z-index 1050 - so I have to change it, but I cannot.

@piernik piernik added feature This issue represents a new feature or feature request rather than a bug or bug fix needs triage This issue needs to be triaged by the team labels Mar 24, 2020
@Totati
Copy link
Contributor

Totati commented Mar 24, 2020

Yeah, we use cdk drag and drop in a bootstrap dialog, and we had to configure the all the variables for z-index in bootstrap to work correctly.

@crisbeto crisbeto self-assigned this Mar 25, 2020
@crisbeto crisbeto added has pr P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent and removed needs triage This issue needs to be triaged by the team labels Mar 25, 2020
crisbeto added a commit to crisbeto/material2 that referenced this issue Mar 25, 2020
The CDK drag preview has a `z-index` that works with the CDK overlay, but might be too low for other libraries. These changes add an option that allows consumers to override it.

Fixes angular#18902.
jelbourn pushed a commit that referenced this issue Mar 31, 2020
The CDK drag preview has a `z-index` that works with the CDK overlay, but might be too low for other libraries. These changes add an option that allows consumers to override it.

Fixes #18902.
jelbourn pushed a commit that referenced this issue Apr 6, 2020
The CDK drag preview has a `z-index` that works with the CDK overlay, but might be too low for other libraries. These changes add an option that allows consumers to override it.

Fixes #18902.

(cherry picked from commit 4e02a95)
@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators May 1, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
feature This issue represents a new feature or feature request rather than a bug or bug fix P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent
Projects
None yet
3 participants