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

Backdrop z-Index forced to 1050 #2686

Open
alexnoise79 opened this issue Sep 5, 2018 · 5 comments · May be fixed by #2695
Open

Backdrop z-Index forced to 1050 #2686

alexnoise79 opened this issue Sep 5, 2018 · 5 comments · May be fixed by #2695

Comments

@alexnoise79
Copy link

@alexnoise79 alexnoise79 commented Sep 5, 2018

Bug description:

Backdrop z-Index has been forced to 1050 with inline style

<ngb-modal-backdrop style="z-index: 1050" class="modal-backdrop fade show">

this works if you use normal bootstrap.css, but i'm using bootstrap/scss and i like to configure myself the variables

in particular $zindex-modal: on my project is set much lower than 1050, and all the modals are broken with the updates.

if for some reason is not possible to change this behaviour, at least give us the possibility to configure it trough NgbModalConfig.

Thanks

Version of Angular, ng-bootstrap, and Bootstrap:

Angular: 6.1.3

ng-bootstrap: 3.2.0

Bootstrap: 4.1.3

@pkozlowski-opensource

This comment has been minimized.

Copy link
Member

@pkozlowski-opensource pkozlowski-opensource commented Sep 8, 2018

Thnx for reporting - this is a regression / side effect of 2409572

@maxkorz do you recall why it was necessary to force z-index here: 2409572#diff-5cffcc19b3f0a215c7be0ea19a593837R7 ?

@ghost

This comment has been minimized.

Copy link

@ghost ghost commented Sep 8, 2018

@pkozlowski-opensource yes, z-index is required to make modals appear stacked.

With forced z-index: image
Without forced z-index: image

I'll make a PR shortly

@ghost ghost mentioned this issue Sep 8, 2018
4 of 5 tasks complete
@maxokorokov

This comment has been minimized.

Copy link
Member

@maxokorokov maxokorokov commented Sep 11, 2018

So, basically it's because of the DOM nodes order:

screen shot 2018-09-11 at 14 48 31

Bootstrap's default z-index for both modal and backdrop is 1040.
After stacked modal implementation modal stayed the same, but backdrop became 1050.

Ideally we should have a SASS theme that would reuse the Bootstrap's variable for z-index, but for now allowing to customize it seems like a solution.

@maxokorokov maxokorokov added this to the 3.3.0 milestone Sep 11, 2018
@pkozlowski-opensource pkozlowski-opensource modified the milestones: 3.3.0, 3.3.1 Sep 21, 2018
@pkozlowski-opensource pkozlowski-opensource modified the milestones: 3.3.1, 4.0.1 Oct 19, 2018
@maxokorokov maxokorokov modified the milestones: 4.0.1, 4.0.2 Dec 13, 2018
@ojemuyiwa

This comment has been minimized.

Copy link

@ojemuyiwa ojemuyiwa commented Dec 18, 2018

Just to add to this, content security policy of "style-src 'self';" fails on this component.

@ojemuyiwa

This comment has been minimized.

Copy link

@ojemuyiwa ojemuyiwa commented Dec 18, 2018

screenshot 2018-12-18 at 13 35 42

Stacking seems to work as well with inline styles removed and modal back-drop set to 1050
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
5 participants
You can’t perform that action at this time.