Modal not showing when used with Bootstrap V4 #280

nielsboecker · 2017-01-11T10:08:10Z

I spent some time wondering why the modal would not show on screen, now I found out and I want to share my insights in case anyone has the same problem.

The reason was a breaking change in Bootstrap 4.0.0-alpha.6. In earlier Versions, class="fade in" on the modal caused it to a) be hidden and b) smoothly appear. It seems that the "in" class has now been renamed to "show". angular2-modal gives its element the classes "fade in" however, so they just disappear.

Workaround

Override styles:

.fade.in {
  opacity: 1;
}
.modal.in .modal-dialog {
  -webkit-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  transform: translate(0, 0);
}
.modal-backdrop.in {
  opacity: 0.5;
}

The text was updated successfully, but these errors were encountered:

achimha · 2017-01-11T17:11:15Z

I can confirm the issue and the workaround. With Boostrap 4.0.0-alpha.6, calling the open method makes the application appear to hang, scrolling is disabled but the screen content does not change. This is due to the modal being present but not visible.

shlomiassaf · 2017-01-11T19:53:36Z

Can someone post a plunker for this?

dimejy2 · 2017-01-12T03:42:55Z

I can confirm that the same issue occurs, however I had to include important tags in order to override the default css. Here's the revised version.

.fade.in {
  opacity: 1;
}
.modal.in .modal-dialog {
  -webkit-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  transform: translate(0, 0);
}

.modal-backdrop .fade .in {
  opacity: 0.5 !important;
}


.modal-backdrop.fade {
    opacity: 0.5 !important;
}

jsnkelvin · 2017-01-24T04:52:40Z

@dimejy2 code works well, but there is some delay on background fading when closing the modal.
maybe because the fade out got replaced too.

is there any way to fix that?
thanks!

ravtakhar · 2017-02-04T22:10:54Z

This is working well for the time being, but this should be included in the actual package itself? Is someone working on creating a pull-request?

@jsnkelvin Agreed after testing there is a slight delay with the css on the fade.

dan-nawrocki · 2017-02-12T04:24:09Z

@shlomiassaf here is a plunker showing the problem: http://plnkr.co/edit/b44cBG0LdXTS7jMlXsfA.

I suspect this issue is related to #217. The delay noted in this ticket appears to be caused by the animation effect callback never being triggered as described in the other ticket; this also causes the modal-open class to be "stuck" on the <body>.

As a workaround for the delay, you can comment out a few lines in modal.js and it works (albeit without animation):

          //backdrop.myAnimationEnd$()
               //.combineLatest(container.myAnimationEnd$(), function (s1, s2) { return [s1, s2]; })
               //.subscribe(function (sources) {
               _this.overlay.groupStackLength(dialogRef) === 1 && document.body.classList.remove('modal-open');
               completer.resolve();
           //});

Edit: use code tags and add workaround

shabbir-dhangot · 2017-02-20T14:15:01Z

Hi @dan-nawrocki @dimejy2 @ravtakhar @jsnkelvin @nbckr

I see one small bug with the code. I implemented it using custom css. I have no problem with animation.

Problem :
When there is long content available with scroll bar user can scroll it. but after any dialog box open scrollbar gone and content freeze there.

For Demo I created from same plunker
http://plnkr.co/edit/vpisqf0onct946qZFti6?p=preview

open dialog and scrollbar will gone.

Please help me with this.

dan-nawrocki · 2017-02-21T03:16:39Z

@shabbir-dhangot the modal-open class is getting stuck on the <body>; this is why the scrollbars don't come back. You can modify the modal.js file as mentioned in my previous comment as a workaround.

dan-nawrocki · 2017-02-21T04:38:34Z

OK @jsnkelvin @shabbir-dhangot:

I managed to get rid of the delay given the hint from my workaround. The combineLatest RXJS method waits for a myAnimationEnd$ from both the backdrop and container. The issue with @dimejy2's CSS workaround looks like it prevents the animation on the modal-background by setting the opacity to 0.5 for both .fade and .fade .in. What is working for me is @nbckr's original snippet:

.fade.in {
  opacity: 1;
}

.modal.in .modal-dialog {
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  transform: translate(0, 0);
}

.modal-backdrop.in {
  opacity: 0.5;
}

And a plunker: http://plnkr.co/edit/b44cBG0LdXTS7jMlXsfA

@shlomiassaf, it looks like the only changes for bootstrap 4 (alpha 6 at least) is to update any instances of the in class to show and this workaround will no longer be necessary. I can create a PR if you're interested.

locohost · 2017-02-26T19:47:22Z

None of the bootstrap4-alpha6 CSS fixes above work for me. I put them app.component.css, didn't fix. I have to install bootstrap3.3.7 to get the modal working. Why?

locohost · 2017-02-26T19:53:39Z

Ok if you put the CSS above in the base styles.css, it almost works. Modal shows, but background does not dim.

maksim-marholin · 2017-03-15T10:08:18Z

I can confirm this issue for Bootstrap 4 alpha 6, but we didn't have it for alpha 4.

shabbir-dhangot · 2017-03-15T10:34:55Z

@maksim-marholin @locohost use modal by ng bootstrap. Its working fine for me. https://ng-bootstrap.github.io/#/components/modal

ghost · 2017-03-15T19:38:17Z

@shabbir-dhangot we're using Angular2-modal as it allows you to create modals from TypeScript with fluent API. That's not possible with ng-bootstrap's version.

JhonnyHRocha · 2017-07-05T18:30:29Z

Did you add this to your HTML?

<!-- Enable bootstrap 4 theme -->
<script>window.__theme = 'bs4';</script>

Thats currently required for v4

PeterKutschera · 2017-07-12T11:04:36Z

Works for me.

To get the original workaround working (I copied the CSS into my app.component.css) I needed to disable ViewEncapsulation in app.component.ts.

See "Disable CSS Encapsulation" at https://coryrylan.com/blog/css-encapsulation-with-angular-components for how to do this.

hit3ham · 2017-07-15T19:10:49Z

please . i am a beginner in web coding , i have the same problem Modal not showing when used with Bootstrap V4,,, i saw the code of styles that you share and some people say it works , but actually i don't know where to past it in my code , should it be inside <style></style>, thanks in advance

JavierT · 2017-08-07T12:35:30Z

Indeed both works for me. But why can't I find any references to the theme in the bootstrap 4 website? If it is required it should be said clearly.

<!-- Enable bootstrap 4 theme -->
<script>window.__theme = 'bs4';</script>

Btw, adding this, what are exactly doing?

Thank you

shlomiassaf · 2017-08-11T11:25:42Z

Thanks to @dan-nawrocki

sthatycsoul · 2017-12-22T08:00:16Z

Works for me, I had a problem cause I made a port of a proyect than I'm working with pure bootstrap 4, and need to do some changes on the versions...

Thank you so much in advance, regards.

hamzox · 2018-02-03T12:46:10Z

@nbckr Thanks mate.

sagarjhaa · 2018-04-20T05:43:25Z

Thanks @nbckr.

JoshuaCaputo · 2018-08-26T04:19:33Z

Also experiencing this issue:
4.1.3/css/bootstrap.min.css
4.1.3/js/bootstrap.min.js

The workaround does seem to fix this confict. mabe fade should be something not some widespread... it sort of curtains...

class="modal curtain"

castlejiant · 2018-09-12T11:34:42Z

@JoshuaCaputo Yes, But there is nothing to do with curtain. Even if you remove class (curtain), the modal will appear. If we use the given modal examples in Bootstrap 4, it works. But when we use the modal examples for Bootstrao 4.1.3, it doesn't works. Please raise a ticket for this issue.

Eivyses · 2018-09-26T11:58:58Z

Having same problem with 4.1.3 version. NgbModal windows won't show. Need to use bootstrap 4.0.0-alpha.6 for it to work.

Howzilla · 2019-07-18T13:49:01Z

I have this working with Bootstrap 4.3.1

Create a new css file such as Overrides.css
Put the following code in it:

.fade.in {
opacity: 1 !important;
}

.modal.in .modal-dialog {
-webkit-transform: translate(0, 0) !important;
-o-transform: translate(0, 0) !important;
transform: translate(0, 0) !important;
}

.modal-backdrop .fade .in {
opacity: 0.5 !important;
}

.modal-backdrop.fade {
opacity: 0.5 !important;
}

Load this new file LAST in your Bundles.cs or whatever mechanism you are using to load support files

This is very similar to what you see above BUT the "!important" attribute has been added to some of the items.

ryanki1 · 2021-10-15T10:29:42Z

Thanks for the headsup @nielsboecker as this is also unsurprisingly a problem with bootstrap 3 framework.. to get modal to show use following scss based on Niels' post:

.fade.show {
  opacity: 1 !important;
}

.modal.show .modal-dialog {
  -webkit-transform: translate(0, 0) !important;
  -o-transform: translate(0, 0) !important;
  transform: translate(0, 0) !important;
}

.modal-backdrop .fade .show {
  opacity: 0.5 !important;
}

.modal-backdrop.fade {
  opacity: 0.5 !important;
}

.. and rather use component to open modal as the templateRef doesn't seem to work.. come on ngx-bootstrap developers you claim your ngx framework is re bootstrap backwards compatible :-)

dolanmiu mentioned this issue Feb 9, 2017

Bootstrap 4 #300

Open

shlomiassaf closed this as completed in 23cb2a0 Aug 11, 2017

jeffersoneagley mentioned this issue Jul 13, 2018

Modal Not Rendering reactstrap/reactstrap#1126

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Modal not showing when used with Bootstrap V4 #280

Modal not showing when used with Bootstrap V4 #280

nielsboecker commented Jan 11, 2017

achimha commented Jan 11, 2017

shlomiassaf commented Jan 11, 2017

dimejy2 commented Jan 12, 2017

jsnkelvin commented Jan 24, 2017

ravtakhar commented Feb 4, 2017 •

edited

Loading

dan-nawrocki commented Feb 12, 2017 •

edited

Loading

shabbir-dhangot commented Feb 20, 2017

dan-nawrocki commented Feb 21, 2017

dan-nawrocki commented Feb 21, 2017

locohost commented Feb 26, 2017

locohost commented Feb 26, 2017

maksim-marholin commented Mar 15, 2017

shabbir-dhangot commented Mar 15, 2017

ghost commented Mar 15, 2017

JhonnyHRocha commented Jul 5, 2017

PeterKutschera commented Jul 12, 2017

hit3ham commented Jul 15, 2017

JavierT commented Aug 7, 2017 •

edited

Loading

shlomiassaf commented Aug 11, 2017

sthatycsoul commented Dec 22, 2017

hamzox commented Feb 3, 2018

sagarjhaa commented Apr 20, 2018

JoshuaCaputo commented Aug 26, 2018

castlejiant commented Sep 12, 2018

Eivyses commented Sep 26, 2018 •

edited

Loading

Howzilla commented Jul 18, 2019

ryanki1 commented Oct 15, 2021

Modal not showing when used with Bootstrap V4 #280

Modal not showing when used with Bootstrap V4 #280

Comments

nielsboecker commented Jan 11, 2017

Workaround

achimha commented Jan 11, 2017

shlomiassaf commented Jan 11, 2017

dimejy2 commented Jan 12, 2017

jsnkelvin commented Jan 24, 2017

ravtakhar commented Feb 4, 2017 • edited Loading

dan-nawrocki commented Feb 12, 2017 • edited Loading

shabbir-dhangot commented Feb 20, 2017

dan-nawrocki commented Feb 21, 2017

dan-nawrocki commented Feb 21, 2017

locohost commented Feb 26, 2017

locohost commented Feb 26, 2017

maksim-marholin commented Mar 15, 2017

shabbir-dhangot commented Mar 15, 2017

ghost commented Mar 15, 2017

JhonnyHRocha commented Jul 5, 2017

PeterKutschera commented Jul 12, 2017

hit3ham commented Jul 15, 2017

JavierT commented Aug 7, 2017 • edited Loading

shlomiassaf commented Aug 11, 2017

sthatycsoul commented Dec 22, 2017

hamzox commented Feb 3, 2018

sagarjhaa commented Apr 20, 2018

JoshuaCaputo commented Aug 26, 2018

castlejiant commented Sep 12, 2018

Eivyses commented Sep 26, 2018 • edited Loading

Howzilla commented Jul 18, 2019

ryanki1 commented Oct 15, 2021

ravtakhar commented Feb 4, 2017 •

edited

Loading

dan-nawrocki commented Feb 12, 2017 •

edited

Loading

JavierT commented Aug 7, 2017 •

edited

Loading

Eivyses commented Sep 26, 2018 •

edited

Loading