docs(Toast): fix examples (#6567)

react-bootstrap · Mar 26, 2023 · e969b7e · e969b7e
1 parent 34eb8b0
commit e969b7e
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 5 deletions.
diff --git a/www/src/examples/Toast/Placement.js b/www/src/examples/Toast/Placement.js
@@ -39,7 +39,11 @@ function PlacementExample() {
         className="bg-dark position-relative"
         style={{ minHeight: '240px' }}
       >
-        <ToastContainer className="p-3" position={position}>
+        <ToastContainer
+          className="p-3"
+          position={position}
+          style={{ zIndex: 1 }}
+        >
           <Toast>
             <Toast.Header closeButton={false}>
               <img

diff --git a/www/src/examples/Toast/PlacementMulti.js b/www/src/examples/Toast/PlacementMulti.js
@@ -12,7 +12,7 @@ function PlacementMultiExample() {
       className="bg-dark position-relative"
       style={{ minHeight: '240px' }}
     >
-      <ToastContainer position="top-end" className="p-3">
+      <ToastContainer position="top-end" className="p-3" style={{ zIndex: 1 }}>
         <Toast>
           <Toast.Header>
             <img

diff --git a/www/src/examples/Toast/Stacking.js b/www/src/examples/Toast/Stacking.js
@@ -3,10 +3,12 @@ import Toast from 'react-bootstrap/Toast';
 import ToastContainer from 'react-bootstrap/ToastContainer';
 
 function StackingExample() {
-  const [position, setPosition] = useState('top-start');
-
+  const codeExampleStylingFix = {
+    zIndex: 1,
+    position: 'relative',
+  };
   return (
-    <ToastContainer>
+    <ToastContainer style={codeExampleStylingFix}>
       <Toast>
         <Toast.Header>
           <img src="holder.js/20x20?text=%20" className="rounded me-2" alt="" />