rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-18 10:52:19 +01:00
Code Issues Actions Packages Releases Activity

Add z-index for .toast-container (#35859)

Browse Source 
* Add z-index for .toast-container

- Adds positioning and z-index to toast container so that it has a system-declared layer in relation to other components.
- Updates docs to use the class better

Fixes $34028

* Remove unnecessary z-index from docs examples
This commit is contained in:
Mark Otto 2022-02-25 08:49:02 -08:00 committed by GitHub
parent 2c5a16ff8b
commit 28d9aaf670
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 6 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
scss/_toasts.scss
View File

@ -20,6 +20,8 @@
}
.toast-container {
position: absolute;
z-index: $zindex-toast;
width: max-content;
max-width: 100%;
pointer-events: none;

1
scss/_variables.scss
View File

@ -1041,6 +1041,7 @@ $zindex-modal-backdrop: 1050 !default;
$zindex-modal: 1055 !default;
$zindex-popover: 1070 !default;
$zindex-tooltip: 1080 !default;
$zindex-toast: 1090 !default;
// scss-docs-end zindex-stack

6
site/content/docs/5.1/components/toasts.md
View File

@ -49,7 +49,7 @@ Previously, our scripts dynamically added the `.hide` class to completely hide a
Click the button below to show a toast (positioned with our utilities in the lower right corner) that has been hidden by default.
<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
<div class="toast-container position-fixed bottom-0 end-0 p-3">
<div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
{{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}}
@ -70,7 +70,7 @@ Click the button below to show a toast (positioned with our utilities in the low
```html
<button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>
<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
<div class="toast-container position-fixed bottom-0 end-0 p-3">
<div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
@ -122,7 +122,7 @@ Toasts are slightly translucent to blend in with what's below them.
You can stack toasts by wrapping them in a toast container, which will vertically add some spacing.
{{< example class="bg-light" >}}
<div class="toast-container">
<div class="toast-container position-static">
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
{{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}}