CODEWITHSUNDEEP
bootstrap-4asp.net-core-mvc
NibblyPig
NibblyPig

Reputation: 52932

Toasts are invisible and cannot be closed in Bootstrap 4

My goal is to be able to make toasts appear floating over my content in the corner of the screen. I'm using asp.net MVC core 2, which comes with bootstrap 4 already set up. My other bootstrap stuff works OK.

To do this I've consulted various tutorials, particularly this one.

I paste any of those samples of code in, and the toast appears on the page but has opacity set to 0 so it's invisible (as per the boostrap css for .toast class).

It mentions that "you must initialize them yourself" but doesn't explain if initialising them sets the opacity to 1 or not.

There is some code at the bottom, javascript, but it's unclear if you need this or not. Figuring the initalizing comment meant you needed to call one or more of these methods, I added $('.toast').toast(); $('.toast').show(); to the bottom of my page in a script tag.

The problems are, firstly, nothing happens when that javascript executes and there are no console errors, the toast remains invisible.

Secondly, the toast takes up space on the page even though it's hidden, when I want it to float over the top in the corner of the screen. This is despite using the example that appears to do this in the Placement section - although the first div is positioned relative which seems weird, I'd expect it to be absolute.

Thirdly I want to display any number of toasts. But that's probably OK because I can make a javascript function to inject all the html into the page every time, although it seems unweildy - can you not just define a template for an alert and make loads of them with a custom message/title?

Fouthly, the X in the corner of the toast does not work to close it despite the data-dismiss="toast" attribute.

I can't help but feel something is missing but I am referencing the bootstrap CSS and JS files. I've tried lots of the examples but all have had the same behaviour.

Any ideas?

Edit: Have created a fiddle here here, you can see I have manually added JS to change the opacity. The alerts take up space though.

Upvotes: 1

Views: 3401

Answers (1)

Junaid Ali
Junaid Ali

Reputation: 361

What I understand is when you initialize it without any option it appears and disappears instantly.

so try this:

  $('.toast').toast({
    'autohide': false
  });

  $('.toast').toast('show');

I have just pasted the above lines of code in your fiddle and it appears. https://jsfiddle.net/fyb3wh8c/2/

Upvotes: 2

Related Questions