Dialogs not visible since update from Angular 11 (ngx-bootstrap 6) to Angular 13 (ngx-bootstrap 8)

[maerni]

We updated from Angular 11 to Angular 13. Among other things we updated the following compoments:

@angular/* from 11.2.14 to 13.1.2 bootstrap from 4.6 to 4.6.1 core-js from 3.10.1 to 3.20.3 jquery from 3.4.1 to 3.6.0 ngx-bootstap from 6.2.0 to 8.0.0 tslib from 2.0.0 to 2.3.0

Now the ngx-bootstrap dialogs are not visible anymore. There is no error but the dialogs are not visible.

What can be the reason for that?

[maerni]

Little addition.

Also when I go back with all used external libraries except @angular/* and ngx-bootstrap I have the same problem that the dialogs are not visible...

Do we have to change something in the usage of dialogs with Angular 13 and ngx-bootstrap 8.0.0? I did not see anything that has to be changed...

[maerni]

Some more addition

The latest version of ngx-bootstrap where the dialogs are visible is 6.2.0.

With all later ngx-bootrap versions (I tested 7.0.1, 7.1.2 and 8.0.0) the dialogs are not visible anymore.

What changed between this versions?

There is no error so I think, the dialogs are there but not visible.

[SvetlanaMuravlova]

@maerni , hi) what dialogs are you talking about?

[maerni]

@SvetlanaMuravlova I talk about the modals: ngx-boostrap 6.2.0: https://valor-software.com/ngx-bootstrap/old/6.2.0/#/modals ngx-bootstrap 8.0.0 https://valor-software.com/ngx-bootstrap/#/components/modals?tab=overview

[SvetlanaMuravlova]

@maerni , sorry, but i still don't understand what exactly is missed on this page. Add, please, more details to your issues

[1thrasher]

This happened to me as well and is caused by using Bootstrap v3. Upgrading to Bootstrap 5.2 fixed the problem.

If that's not an option at the moment, you can override the following class:

.fade.modal {
  opacity: unset !important;
}

[maerni]

@1thrasher thanks very much. I will try this.

[mihilion]

It has been almost a year since the bug was reported, and nothing seems to have changed. Any chance it will get properly fixed?

I am trying to use [email protected] with @angular/[email protected] and [email protected] and the problem is, that active modal-container.modal is not getting the in class anymore, so the opacity=1 style defined for .modal.fade.in is not applied. This makes the opacity=0 style defined for .modal.fade applied all the time, making the dialog completely transparent at all times (and shifted up with transform). That is why it does not show up even though it is there.

Using the workaround by 1thrasher removes the fadeout transition completely, so I am not happy with it.

Any chance it gets fixed? I would really like to upgrade from [email protected] but this is a blocker for me.

[SvetlanaMuravlova]

It has been almost a year since the bug was reported, and nothing seems to have changed. Any chance it will get properly fixed?

I am trying to use [email protected] with @angular/[email protected] and [email protected] and the problem is, that active modal-container.modal is not getting the in class anymore, so the opacity=1 style defined for .modal.fade.in is not applied. This makes the opacity=0 style defined for .modal.fade applied all the time, making the dialog completely transparent at all times (and shifted up with transform). That is why it does not show up even though it is there.

Using the workaround by 1thrasher removes the fadeout transition completely, so I am not happy with it.

Any chance it gets fixed? I would really like to upgrade from [email protected] but this is a blocker for me.

i will look at your issue and i will let you know soon)

[SvetlanaMuravlova]

@mihilion , there is an example with angular 14, ngx-bootstrap 9.0.0, bootstrap4 i added modal and it works, reproduce, please your issue , please stackblitz example

[mihilion]

@SvetlanaMuravlova the problem is actually with our project - it is based on an old template with embedded bootstrap4 styles. New ngx-bootstrap sets the show class while old one used in class instead. Our embedded styles are set for the in class which is not set anymore. I had to modify our embedded styles to rely on the show class instead of in class and now it works.

[SvetlanaMuravlova]

@SvetlanaMuravlova the problem is actually with our project - it is based on an old template with embedded bootstrap4 styles. New ngx-bootstrap sets the show class while old one used in class instead. Our embedded styles are set for the in class which is not set anymore. I had to modify our embedded styles to rely on the show class instead of in class and now it works.

oh, it is ok, everything needs updates, so i will close this issue)

[jaydev-growexxer]

@mihilion Can you please provide a solution? or what was the actual issue you were facing?

@SvetlanaMuravlova I am also facing same issue. exa. when I opening a modal show class appended to modal-container. because of that modal is loaded in the DOM but with opacity=0. When I change class show to in in modal-container. Modal which was available in the DOM visible to us with opacity=1 style applied.

[croomagnon]

It's August 2023, can confirm this is still a bug.

[SvetlanaMuravlova]

@jaydev-growexxer , @croomagnon hi) what exactly issue did you face, which versions do you use? you can reproduce your issue on stackblitz, also Earlier it was closed, because users had problems with their project, bootstrap updated classes, do you use correct classes?

[croomagnon]

@SvetlanaMuravlova stackblitz will not allow me to create an Angular 14 and ngx-bootstrap 9 application but I'll try and short-circuit the package.json (but I believe they are also using NodeJS 18 whereas I'm using NodeJS 16 locally). Sorry for these older versions but this is a corporate project, I'll cook something up and share it via stackblitz. On the call the show() on he BsModalService instance the modal is not visible, but page changes opacity as described in previous descriptions. Then when I click anywhere on the page invisible modal and opacity hides. Seems like a problem with the .css as Chrome devtools does show that the modal element is there. It is just not visible. Will try and create demo in stackblitz.