Last active
April 26, 2026 15:44
-
-
Save judell/eb2c7689bfc1430cbf899c883de96741 to your computer and use it in GitHub Desktop.
B Square Bulletin community calendar embed — auto-height iframe (fixes double-scroll)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- | |
| B Square Bulletin — community calendar embed fix | |
| Problem: the current embed shows two scrollbars (page + iframe). The iframe | |
| has a fixed 1800px height with scrolling="yes", so when the event list is | |
| taller than 1800px it gets its own scrollbar inside the page's scrollbar, | |
| and when it's shorter you see a big gap. | |
| Fix: opt the iframe into auto-height mode (?autoheight=true), turn off its | |
| scrollbar, start it at height:0, and add a tiny postMessage listener that | |
| resizes it to match the embedded app's content. The host page then owns | |
| all scrolling — exactly one scrollbar, no gap, and "Later" stays reachable. | |
| Three things change in the markup, plus a small <script> is added below it. | |
| --> | |
| <!-- ============================================================ --> | |
| <!-- BEFORE — current markup on /calendar-test/ (causes double-scroll) --> | |
| <!-- ============================================================ --> | |
| <style> | |
| #cc-embed-wrap, | |
| #cc-embed-wrap * { box-sizing: border-box; } | |
| #cc-embed-wrap { | |
| background: #fff !important; | |
| margin: 0 !important; | |
| padding: 0 !important; | |
| } | |
| #cc-embed-bloomington-xmlui { | |
| display: block !important; | |
| width: 100% !important; | |
| height: 1800px !important; /* fixed height — too tall or too short */ | |
| border: 0 !important; | |
| background: #fff !important; | |
| } | |
| </style> | |
| <div id="cc-embed-wrap"> | |
| <iframe | |
| id="cc-embed-bloomington-xmlui" | |
| class="kg-width-wide" | |
| src="https://b-square-bulletin.github.io/community-calendar/xmlui/index.html?city=bloomington&embed=true&images=preview" | |
| width="100%" | |
| height="1800" | |
| frameborder="0" | |
| scrolling="yes"> <!-- gives the iframe its own scrollbar --> | |
| </iframe> | |
| </div> | |
| <!-- (no postMessage listener) --> | |
| <!-- ============================================================ --> | |
| <!-- AFTER — replace the block above with this (auto-height, one scrollbar) --> | |
| <!-- ============================================================ --> | |
| <style> | |
| #cc-embed-wrap, | |
| #cc-embed-wrap * { box-sizing: border-box; } | |
| #cc-embed-wrap { | |
| background: #fff !important; | |
| margin: 0 !important; | |
| padding: 0 !important; | |
| } | |
| #cc-embed-bloomington-xmlui { | |
| display: block !important; | |
| width: 100% !important; | |
| height: 0 !important; /* CHANGED: was 1800px — start at 0, grow on message */ | |
| border: 0 !important; | |
| background: #fff !important; | |
| visibility: hidden; /* ADDED: hide until first resize message */ | |
| } | |
| </style> | |
| <div id="cc-embed-wrap"> | |
| <iframe | |
| id="cc-embed-bloomington-xmlui" | |
| class="kg-width-wide" | |
| src="https://b-square-bulletin.github.io/community-calendar/xmlui/index.html?city=bloomington&embed=true&autoheight=true&images=preview" | |
| <!-- CHANGED: added &autoheight=true --> | |
| scrolling="no" <!-- CHANGED: was "yes" --> | |
| frameborder="0"> | |
| <!-- REMOVED: width="100%" height="1800" (CSS handles it) --> | |
| </iframe> | |
| </div> | |
| <script> | |
| // ADDED: listen for height messages from the embedded calendar and resize | |
| // the iframe to match. The origin check pins it to your GitHub Pages host | |
| // so other sites can't post fake resize events. | |
| (function () { | |
| var iframe = document.getElementById('cc-embed-bloomington-xmlui'); | |
| window.addEventListener('message', function (e) { | |
| if (e.origin !== 'https://b-square-bulletin.github.io') return; | |
| if (e.data && e.data.type === 'cc-embed-resize' && iframe) { | |
| iframe.style.height = e.data.height + 'px'; | |
| iframe.style.visibility = 'visible'; | |
| } | |
| }); | |
| })(); | |
| </script> | |
| <!-- | |
| Summary of changes (5 edits, all inside the existing HTML card): | |
| 1. CSS: height: 1800px !important; → height: 0 !important; | |
| 2. CSS: (add) visibility: hidden; | |
| 3. URL: ...&embed=true&images=preview → ...&embed=true&autoheight=true&images=preview | |
| 4. iframe attr: scrolling="yes" → scrolling="no" | |
| 5. iframe attrs: remove width="100%" and height="1800" (CSS already covers them) | |
| 6. Add the <script> block at the bottom. | |
| Reference implementation: | |
| https://github.com/judell/community-calendar/blob/main/embed-demo.html | |
| --> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment