Starting a website?

Purpose-Built Templates

ZU2B Blueprints

Business in a Box

Reference

ZU2B Pulse™

See what visitors experience before they leave — paste any public URL and get a plain-English performance report in seconds.

Scan Your URL Free
FAQ • Support

When a Third-Party Search Widget’s Results Are Trapped in a Small Scrolling Box

Field Note #171
🔬 Resolved 🟡 Intermediate ⏱ 30 Minutes ✓ Observation from Experience

⚡ Quick Fix (TL;DR)

The Fix: 1. Check whether the widget has a results *display mode* setting (Overlay vs. Full Width / inline / two-page results) in its own external configuration panel, separate from the embed code itself.
2. If available, switch away from an "overlay" or "floating" display mode to one that renders inline with the page's normal content flow.

Was this helpful? Thanks for the feedback!
The symptom
A third-party search widget was embedded via an HTML section. When a search was run, the results appeared inside a small, fixed-height gray box, requiring the visitor to scroll within that box to see all results, rather than the results displaying normally on the page.

Initial assumption
The first instinct was that custom CSS applied to the embed was causing the height restriction, and that removing or adjusting that CSS would fix it.
Adjusting the custom CSS had no effect on this behavior.
 
Investigation
The widget’s default results display mode is an “Overlay” — designed to float a results panel on top of the entire page. The HTML section embed appears to sandbox the widget inside a bounded container, so the overlay panel that expects to float freely over the whole page instead gets trapped inside that container’s fixed dimensions, producing the small scrollable box.

Because the overlay is appended to the page outside the immediate area targeted by scoped CSS, custom styling aimed at the results panel also failed to reach it while in this mode.

What to check
When a third-party widget’s results or overlay content appears constrained to an unexpectedly small, scrolling box after embedding it in an HTML section:
 
1. Check whether the widget has a results *display mode* setting (Overlay vs. Full Width / inline / two-page results) in its own external configuration panel, separate from the embed code itself.
2. If available, switch away from an “overlay” or “floating” display mode to one that renders inline with the page’s normal content flow.

Current finding

Changing the search engine’s “Layout” setting (in its own external control panel, under Look and Feel) from “Overlay results” to “Full Width results” resolved the boxed-in scrolling behavior. The embed code on the page itself did not need to change — the display mode is controlled entirely on the third-party service’s end and applies automatically to the same embed code.

Troubleshooting lesson
Not every embed rendering problem can be fixed with CSS on your own page. When a third-party widget’s overlay or floating content appears trapped inside a platform’s container, check whether the widget offers its own display-mode setting before assuming the fix has to happen in your site’s CSS. The embed code itself may stay identical while the setting is changed elsewhere.

Tagged in :

More from the field