Bootstrap: Bootstrap toast remains on top after reload
A Bootstrap toast is not closed (using the close button) before the app is "finished" (reloaded or at browser exit). When the app is started again the buttons under the "invisible toast" cannot be used although they are visible. So it looks like the toast "stays on top" but is invisible.
The solution to the problem is to click the button that shows the toast and close the toast. Now all buttons are clickable.
Bootstrap 4.3.1. Windows 10 Home v1809. Chrome Version 74.0.3729.131.
To see a demo of this problem goto tutorialrepublic and adjust the window size so part of the buttons are under the toast. Press 'Show Toast', reload the page and if you hoover the cursor you can see where the toast was located (arrow instead of hand). See also stackoverflow
KjelleJ
All 2 comments
Hi @KjelleJ,
So that's because by default opacity of our toasts is 0 so it's not visible but the display property is equal to block
Thanks for reporting that 馃憤
/CC @twbs/css-review
Johann-S
on 9 May 2019
on that topic, it would be nice if our documentation had an actual live example of a toast that starts out hidden, and is then triggered (just by a simple button). just to see it actually in action (and to potentially debug things like this). or failing that, a live example/demo that's linked from the docs.
patrickhlauke
on 9 May 2019
Related issues
MrCsabaToth
路
3Comments
steve-32a
路
3Comments
ghost
路
3Comments
vinorodrigues
路
3Comments
alvarotrigo
路
3Comments
Most helpful comment
on that topic, it would be nice if our documentation had an actual live example of a toast that starts out hidden, and is then triggered (just by a simple button). just to see it actually in action (and to potentially debug things like this). or failing that, a live example/demo that's linked from the docs.