From 12734aca1627cde96736419a6bb5b5ae85e99f95 Mon Sep 17 00:00:00 2001 From: bunker-admin Date: Wed, 11 Mar 2026 16:51:55 -0600 Subject: [PATCH] Fix MkDocs search results not displaying with custom header Use inline JS styles (applySearchLayout) instead of CSS-only approach for search panel layout - fixes Firefox compatibility where cross-origin Material stylesheets override !important rules. Adds explicit height, flex layout, z-index, and background on search elements. Also fixes click-to-exit by deferring DOM queries to DOMContentLoaded. Syncs header-builder.service.ts with main.html changes. Bunker Admin --- .../modules/docs/header-builder.service.ts | 238 ++++++++-- mkdocs/docs/overrides/main.html | 282 +++++++++--- mkdocs/site/404.html | 352 ++++++++++++--- .../site/assets/images/social/test-page.png | Bin 66077 -> 66561 bytes .../repo-data/admin-changemaker.lite.json | 4 +- .../repo-data/anthropics-claude-code.json | 10 +- .../assets/repo-data/coder-code-server.json | 8 +- .../repo-data/gethomepage-homepage.json | 8 +- .../site/assets/repo-data/go-gitea-gitea.json | 10 +- .../site/assets/repo-data/knadh-listmonk.json | 4 +- .../site/assets/repo-data/lyqht-mini-qr.json | 8 +- mkdocs/site/assets/repo-data/n8n-io-n8n.json | 10 +- .../site/assets/repo-data/nocodb-nocodb.json | 10 +- .../site/assets/repo-data/ollama-ollama.json | 10 +- .../repo-data/squidfunk-mkdocs-material.json | 8 +- mkdocs/site/blog/index.html | 354 ++++++++++++--- mkdocs/site/comments/callback/index.html | 352 ++++++++++++--- .../docs/admin/advocacy/campaigns/index.html | 354 ++++++++++++--- .../admin/advocacy/email-queue/index.html | 354 ++++++++++++--- mkdocs/site/docs/admin/advocacy/index.html | 354 ++++++++++++--- .../admin/advocacy/representatives/index.html | 354 ++++++++++++--- .../docs/admin/advocacy/responses/index.html | 354 ++++++++++++--- .../broadcast/email-templates/index.html | 354 ++++++++++++--- mkdocs/site/docs/admin/broadcast/index.html | 354 ++++++++++++--- .../admin/broadcast/newsletter/index.html | 354 ++++++++++++--- .../site/docs/admin/broadcast/sms/index.html | 354 ++++++++++++--- mkdocs/site/docs/admin/dashboard/index.html | 354 ++++++++++++--- mkdocs/site/docs/admin/index.html | 354 ++++++++++++--- mkdocs/site/docs/admin/map/areas/index.html | 354 ++++++++++++--- .../site/docs/admin/map/canvassing/index.html | 354 ++++++++++++--- .../docs/admin/map/data-quality/index.html | 354 ++++++++++++--- mkdocs/site/docs/admin/map/index.html | 354 ++++++++++++--- .../site/docs/admin/map/locations/index.html | 354 ++++++++++++--- .../site/docs/admin/map/settings/index.html | 354 ++++++++++++--- mkdocs/site/docs/admin/map/shifts/index.html | 354 ++++++++++++--- mkdocs/site/docs/admin/media/ads/index.html | 354 ++++++++++++--- .../docs/admin/media/analytics/index.html | 354 ++++++++++++--- .../site/docs/admin/media/curated/index.html | 354 ++++++++++++--- mkdocs/site/docs/admin/media/index.html | 354 ++++++++++++--- .../site/docs/admin/media/library/index.html | 354 ++++++++++++--- .../docs/admin/media/moderation/index.html | 354 ++++++++++++--- .../docs/admin/payments/donations/index.html | 354 ++++++++++++--- mkdocs/site/docs/admin/payments/index.html | 354 ++++++++++++--- .../site/docs/admin/payments/plans/index.html | 354 ++++++++++++--- .../docs/admin/payments/products/index.html | 354 ++++++++++++--- .../docs/admin/payments/settings/index.html | 354 ++++++++++++--- .../site/docs/admin/people-access/index.html | 354 ++++++++++++--- .../docs/admin/services/crowdsec/index.html | 354 ++++++++++++--- mkdocs/site/docs/admin/services/index.html | 354 ++++++++++++--- .../admin/services/integrations/index.html | 354 ++++++++++++--- .../docs/admin/services/monitoring/index.html | 354 ++++++++++++--- .../docs/admin/services/tunnel/index.html | 354 ++++++++++++--- .../services/user-provisioning/index.html | 354 ++++++++++++--- mkdocs/site/docs/admin/settings/index.html | 354 ++++++++++++--- .../docs/admin/web/documentation/index.html | 354 ++++++++++++--- .../site/docs/admin/web/homepage/index.html | 354 ++++++++++++--- mkdocs/site/docs/admin/web/index.html | 354 ++++++++++++--- .../docs/admin/web/landing-pages/index.html | 354 ++++++++++++--- .../site/docs/admin/web/navigation/index.html | 354 ++++++++++++--- mkdocs/site/docs/api/index.html | 354 ++++++++++++--- mkdocs/site/docs/architecture/index.html | 354 ++++++++++++--- mkdocs/site/docs/deployment/index.html | 354 ++++++++++++--- .../getting-started/control-panel/index.html | 354 ++++++++++++--- .../environment-variables/index.html | 354 ++++++++++++--- .../docs/getting-started/features/index.html | 354 ++++++++++++--- .../getting-started/first-steps/index.html | 354 ++++++++++++--- mkdocs/site/docs/getting-started/index.html | 354 ++++++++++++--- .../getting-started/installation/index.html | 354 ++++++++++++--- .../docs/getting-started/services/index.html | 354 ++++++++++++--- .../docs/getting-started/upgrades/index.html | 354 ++++++++++++--- mkdocs/site/docs/index.html | 354 ++++++++++++--- mkdocs/site/docs/phil/index.html | 354 ++++++++++++--- mkdocs/site/docs/services/index.html | 354 ++++++++++++--- mkdocs/site/docs/troubleshooting/index.html | 354 ++++++++++++--- .../site/docs/user-guide/campaigns/index.html | 354 ++++++++++++--- .../site/docs/user-guide/donations/index.html | 354 ++++++++++++--- mkdocs/site/docs/user-guide/events/index.html | 354 ++++++++++++--- .../site/docs/user-guide/gallery/index.html | 354 ++++++++++++--- mkdocs/site/docs/user-guide/index.html | 354 ++++++++++++--- mkdocs/site/docs/user-guide/map/index.html | 354 ++++++++++++--- .../site/docs/user-guide/profile/index.html | 354 ++++++++++++--- mkdocs/site/docs/user-guide/shifts/index.html | 354 ++++++++++++--- mkdocs/site/docs/user-guide/shop/index.html | 354 ++++++++++++--- .../docs/volunteer/achievements/index.html | 354 ++++++++++++--- .../site/docs/volunteer/canvassing/index.html | 354 ++++++++++++--- mkdocs/site/docs/volunteer/index.html | 354 ++++++++++++--- mkdocs/site/docs/volunteer/shifts/index.html | 354 ++++++++++++--- mkdocs/site/docs/volunteer/social/index.html | 354 ++++++++++++--- mkdocs/site/main/index.html | 352 ++++++++++++--- mkdocs/site/overrides/main.html | 282 +++++++++--- mkdocs/site/search/search_index.json | 2 +- mkdocs/site/sitemap.xml | 160 +++---- mkdocs/site/sitemap.xml.gz | Bin 759 -> 759 bytes mkdocs/site/test-page/index.html | 414 ++++++++++++++---- mkdocs/site/test/index.html | 357 ++++++++++++--- mkdocs/site/testing/index.html | 352 ++++++++++++--- 96 files changed, 23020 insertions(+), 5701 deletions(-) diff --git a/api/src/modules/docs/header-builder.service.ts b/api/src/modules/docs/header-builder.service.ts index 4be563b..06f7e11 100644 --- a/api/src/modules/docs/header-builder.service.ts +++ b/api/src/modules/docs/header-builder.service.ts @@ -626,8 +626,6 @@ class HeaderBuilderService {
- ${mobileLinks} -
diff --git a/mkdocs/site/test/index.html b/mkdocs/site/test/index.html index 70a0ac4..da48b6f 100644 --- a/mkdocs/site/test/index.html +++ b/mkdocs/site/test/index.html @@ -257,6 +257,19 @@
+ + + +
homeHome sendCampaigns placeMap @@ -290,19 +303,6 @@ languageWebsite menu_bookDocs
- - - -
login Sign In @@ -440,6 +440,7 @@ // Close custom drawer when search label is clicked on mobile + auto-focus input document.querySelectorAll('label[for="__search"]').forEach(function(el) { el.addEventListener('click', function() { + if (el.classList.contains('md-search__overlay')) return; // overlay has its own handler closeDrawer(); setTimeout(function() { var input = document.querySelector('.md-search__input'); @@ -447,51 +448,154 @@ }, 150); }); }); - // Search activation: mirror checkbox state as a body class for CSS targeting. - // On desktop, Material's search input is always visible (overflow from collapsed - // header). Typing directly into it triggers the search worker but never checks - // the __search checkbox, so the results panel stays hidden. We fix this by - // checking the checkbox on input focus/input events. - var searchToggle = document.getElementById('__search'); - if (searchToggle) { - function syncSearchClass() { - document.body.classList.toggle('cm-search-active', searchToggle.checked); + // Search activation: Material may open search via checkbox OR by focusing the + // input directly (varies by version). Detect both and mirror as body class. + // NOTE: search DOM elements render AFTER the announce block in the template, + // so we must defer element queries until DOMContentLoaded. + var searchToggle = null; + var searchInput = null; + // Apply search layout inline styles (CSS-in-stylesheet is unreliable due to + // cross-origin Material stylesheets overriding !important rules) + function applySearchLayout(active) { + var inner = document.querySelector('.md-search__inner'); + var output = document.querySelector('.md-search__output'); + var scrollwrap = document.querySelector('.md-search__scrollwrap'); + if (!inner) return; + var isDesktop = window.matchMedia('(min-width: 60em)').matches; + if (active) { + inner.style.setProperty('display', 'flex', 'important'); + inner.style.setProperty('flex-direction', 'column', 'important'); + inner.style.setProperty('overflow', 'hidden', 'important'); + // Firefox needs explicit height (not just max-height) for flex children to grow + if (isDesktop) { + inner.style.setProperty('height', 'calc(100vh - 64px)', 'important'); + } + if (output) { + output.style.setProperty('position', 'relative', 'important'); + output.style.setProperty('flex', '1 1 0px', 'important'); + output.style.setProperty('min-height', '0', 'important'); + output.style.setProperty('display', 'flex', 'important'); + output.style.setProperty('flex-direction', 'column', 'important'); + output.style.setProperty('overflow', 'hidden', 'important'); + output.style.setProperty('width', '100%', 'important'); + } + if (scrollwrap) { + scrollwrap.style.setProperty('max-height', 'none', 'important'); + scrollwrap.style.setProperty('flex', '1 1 0px', 'important'); + scrollwrap.style.setProperty('min-height', '0', 'important'); + scrollwrap.style.setProperty('overflow-y', 'auto', 'important'); + } + // Force search result elements visible + ensure proper stacking (Firefox) + var resultList = document.querySelector('.md-search-result__list'); + if (resultList) { + resultList.style.setProperty('display', 'block', 'important'); + resultList.style.setProperty('visibility', 'visible', 'important'); + resultList.style.setProperty('opacity', '1', 'important'); + resultList.style.setProperty('max-height', 'none', 'important'); + resultList.style.setProperty('overflow', 'visible', 'important'); + resultList.style.setProperty('color', 'var(--md-default-fg-color)', 'important'); + } + var resultContainer = document.querySelector('.md-search-result'); + if (resultContainer) { + resultContainer.style.setProperty('display', 'block', 'important'); + resultContainer.style.setProperty('visibility', 'visible', 'important'); + resultContainer.style.setProperty('opacity', '1', 'important'); + } + // Ensure scrollwrap has z-index above overlay + if (scrollwrap) { + scrollwrap.style.setProperty('position', 'relative', 'important'); + scrollwrap.style.setProperty('z-index', '1', 'important'); + scrollwrap.style.setProperty('background', 'var(--md-default-bg-color)', 'important'); + } + } else { + inner.style.removeProperty('display'); + inner.style.removeProperty('flex-direction'); + inner.style.removeProperty('overflow'); + inner.style.removeProperty('height'); + if (output) { + output.style.removeProperty('position'); + output.style.removeProperty('flex'); + output.style.removeProperty('min-height'); + output.style.removeProperty('display'); + output.style.removeProperty('flex-direction'); + output.style.removeProperty('overflow'); + output.style.removeProperty('width'); + } + if (scrollwrap) { + scrollwrap.style.removeProperty('max-height'); + scrollwrap.style.removeProperty('flex'); + scrollwrap.style.removeProperty('min-height'); + scrollwrap.style.removeProperty('overflow-y'); + scrollwrap.style.removeProperty('position'); + scrollwrap.style.removeProperty('z-index'); + scrollwrap.style.removeProperty('background'); + } + var resultList = document.querySelector('.md-search-result__list'); + if (resultList) resultList.removeAttribute('style'); + var resultContainer = document.querySelector('.md-search-result'); + if (resultContainer) resultContainer.removeAttribute('style'); } - searchToggle.addEventListener('change', syncSearchClass); - syncSearchClass(); - // Activate search when the Material input is focused or typed into directly. - // Uses event delegation because the search input is rendered after this - // script (announce block runs before header block). - document.addEventListener('focusin', function(e) { - if (e.target && e.target.classList && e.target.classList.contains('md-search__input')) { - if (!searchToggle.checked) { - searchToggle.checked = true; - searchToggle.dispatchEvent(new Event('change')); - } - } - }); - document.addEventListener('input', function(e) { - if (e.target && e.target.classList && e.target.classList.contains('md-search__input')) { - if (!searchToggle.checked) { - searchToggle.checked = true; - searchToggle.dispatchEvent(new Event('change')); - } - } - }); - // Click-outside to dismiss search - document.addEventListener('click', function(e) { - if (!searchToggle.checked) return; - var panel = document.querySelector('.md-search__inner'); - if (panel && panel.contains(e.target)) return; - if (e.target.closest && e.target.closest('label[for="__search"]')) return; - searchToggle.checked = false; - syncSearchClass(); - }); - // Also sync on Escape key (Material toggles checkbox via JS) - document.addEventListener('keydown', function(e) { - if (e.key === 'Escape') setTimeout(syncSearchClass, 50); - }); } + function activateSearch() { + document.body.classList.add('cm-search-active'); + if (searchToggle) searchToggle.checked = true; + applySearchLayout(true); + } + function deactivateSearch() { + document.body.classList.remove('cm-search-active'); + if (searchToggle) searchToggle.checked = false; + if (searchInput) searchInput.blur(); + applySearchLayout(false); + } + function isSearchActive() { + return document.body.classList.contains('cm-search-active'); + } + // Custom search labels in the cm-header-nav (these exist now, in announce block) + document.querySelectorAll('label[for="__search"]').forEach(function(lbl) { + lbl.addEventListener('click', function() { + if (lbl.classList.contains('md-search__overlay')) return; + setTimeout(function() { activateSearch(); if (searchInput) searchInput.focus(); }, 50); + }); + }); + // Deferred bindings: attach handlers to search elements once they exist in the DOM + document.addEventListener('DOMContentLoaded', function() { + searchToggle = document.getElementById('__search'); + searchInput = document.querySelector('.md-search__input'); + // Detect search open via input focus + if (searchInput) { + searchInput.addEventListener('focus', activateSearch); + } + // Detect search open via checkbox + if (searchToggle) { + searchToggle.addEventListener('change', function() { + if (searchToggle.checked) activateSearch(); else deactivateSearch(); + }); + } + // Click on overlay (md-search__overlay label) to dismiss search + var searchOverlay = document.querySelector('.md-search__overlay'); + if (searchOverlay) { + searchOverlay.addEventListener('click', function(e) { + e.preventDefault(); + e.stopPropagation(); + if (isSearchActive()) deactivateSearch(); + }); + } + }); + // Click-outside to dismiss search (on document, works immediately) + document.addEventListener('mousedown', function(e) { + if (!isSearchActive()) return; + var panel = document.querySelector('.md-search__inner'); + if (panel && panel.contains(e.target)) return; + // Let the overlay's own click handler deal with it + if (e.target.closest && e.target.closest('.md-search__overlay')) return; + if (e.target.closest && e.target.closest('label[for="__search"]')) return; + if (e.target.closest && e.target.closest('.cm-header-nav__utility')) return; + deactivateSearch(); + }); + // Escape key to dismiss + document.addEventListener('keydown', function(e) { + if (e.key === 'Escape' && isSearchActive()) setTimeout(deactivateSearch, 50); + }); // Init palette icon + observe changes setTimeout(updatePaletteIcon, 100); new MutationObserver(function() { updatePaletteIcon(); }) @@ -500,12 +604,15 @@