Fix close button placement for Bootstrap 5.3.3 (#46)

Related to the container size changes in infotexture/dita-bootstrap#177.
infotexture · Mar 11, 2024 · ee5eafe · ee5eafe
2 parents b542ee0 + bff4eb8
commit ee5eafe
Showing 1 changed file with 9 additions and 7 deletions.
diff --git a/resource/lunr-client.js b/resource/lunr-client.js
@@ -37,7 +37,7 @@
       const title = item["t"];
       const preview = item["d"];
       const link = item["l"];
-      const result = `<div class="card mb-3" onclick="closeSearch(this);">
+      const result = `<div class="card mb-3 search-close">
         <a class="link stretched-link link-underline link-underline-opacity-0" href="${BASE_URL + link}">
             <h2 class="h3 title card-header text-body-emphasis">${title}</h5>
         </a>
@@ -58,9 +58,9 @@
 
   function formatResults(results) {
     return `<article role="article">
-      <div class="modal-header">
-  	        <h1>@@@lunr.search.results@@@</h1>
-            <button type="button" class="btn-close search-close" aria-label="Close"></button>
+        <div class="modal-header justify-content-between">
+            <h1>@@@lunr.search.results@@@</h1>
+            <button type="button" class="btn-close search-close" aria-label="Close"/>
         </div>
         <div class="modal-body">
       ${parseLunrResults(results)}
@@ -108,9 +108,11 @@
 
         elements[0].classList.add("collapse");
         window.scrollTo(0, 0);
-
-        const closeBox = document.getElementsByClassName("search-close")[0];
-        closeBox.addEventListener("click", closeSearch);
+        const closeBox = document.getElementsByClassName("search-close");
+        for(let i = 0; i < closeBox.length; i++) {
+           closeBox[i].addEventListener("click", closeSearch);
+           return false;
+        }
         return false;
       })
       .catch((e) => {