Scrollbars are often a visual nuisance, and are rarely necessary to display the MetaLocator interface on your Web site.  There are a few factors that can cause the browser to add a scrollbar, and this article explains the various items to consider when attempting to eliminate a scrollbar around your search interface.

Generally speaking, scrollbars are created by the browser when something is too large for its container.  MetaLocator does it's best to fit within most web sites, but on narrow or short layouts, some adjustments might be necessary to create a seamless interface.

Scrollbars Around the Interface

Items that can impact height, in the order of most-probably-responsible-for-scrollbars first:

  1. Frame Added Height.  Found under "Style Settings".  This is the number of pixels added to the bottom of the Interface.  This is done so that the interface can grow once search results are displayed without creating scrollbars.  If your Interface's map or other settings cause it to grow outside these rather comfortable limit, increase this number to reserve more vertical space for the Interface.

  2. Layout Settings.  These options include the map width and height and the directory width and height.  If these total to create an interface larger than the space available within the container in which the Interface code was pasted, a scrollbar will be induced.  Mitigate this issue by either possibly increasing the size of the containing element on your Web site, or decreasing these options to create a smaller interface which fits in the available space.

  3. CSS.  Custom CSS provided under Style Settings can certainly cause scrollbars and would need to be evaluated on a case-by-case basis.  Generally, if adjustments have been made to the CSS which created scrollbars, who ever made those adjustments is likely best suited to correct the problem.

Scrollbars on the Detail Page

When clicking to the Detail Page from the main interface, the content commonly grows in height significantly.  A typical installation might look like this:

When clicking on the detail page, scrollbars might be induced as shown here:

This occurs because the page within the IFRAME grew dynamically, but the IFRAME tag in the containing page remained unchanged.  This communication between the IFRAME tag on your Website and MetaLocator's code is blocked due to a security limitation of browsers called the Same Origin Policy.   MetaLocator works around this limitation by attempting to detect changes in the content, and communicating via a series of methods back to the containing page. This behavior is controlled by the Style & Color Settings > Auto-size IFRAME option.  This video explores the various options and use of AutoSize IFRAME to eliminate scrollbars. For more details on the Auto-size feature, click here.

Did this answer your question?