From 94e1a95ffbce4af5c16a8654544e33ba0c8206f7 Mon Sep 17 00:00:00 2001
From: ethancrawford <ethan_jc@hotmail.com>
Date: Fri, 12 Dec 2025 03:07:12 +0800
Subject: [PATCH] Allow Offcanvas docs page to scroll properly (#2565)

---
 docs/content/ui/components/offcanvas.md | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/docs/content/ui/components/offcanvas.md b/docs/content/ui/components/offcanvas.md
index 117a85cc1..8a1913cc8 100644
--- a/docs/content/ui/components/offcanvas.md
+++ b/docs/content/ui/components/offcanvas.md
@@ -10,10 +10,11 @@ To create an offcanvas, add the `.offcanvas` class to a container element. You c
 
 {% capture html -%}
 <div
-  class="offcanvas offcanvas-start show"
+  class="offcanvas offcanvas-start"
   tabindex="-1"
   id="offcanvas"
   aria-labelledby="offcanvasLabel"
+  data-bs-scroll="true"
 >
   <div class="offcanvas-body">
     Content for the offcanvas goes here. You can place just about any Tabler component or custom
@@ -29,11 +30,12 @@ The offcanvas component is used to display a cookies banner. It is a great way t
 
 {% capture html -%}
 <div
-  class="offcanvas offcanvas-bottom h-auto show"
+  class="offcanvas offcanvas-bottom h-auto"
   tabindex="-1"
   id="offcanvasBottom"
   aria-modal="true"
   role="dialog"
+  data-bs-scroll="true"
 >
   <div class="offcanvas-body">
     <div class="container">
@@ -58,4 +60,12 @@ The offcanvas component is used to display a cookies banner. It is a great way t
   </div>
 </div>
 {%- endcapture %}
-{% include "docs/example.html" html=html raw %}
\ No newline at end of file
+{% include "docs/example.html" html=html raw %}
+
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+  document.querySelectorAll('[data-bs-scroll="true"]').forEach(el => {
+    new bootstrap.Offcanvas(el, { scroll: true }).show();
+  });
+});
+</script>
\ No newline at end of file