To create a MetaLocator interface that occupies the full height of the available space on your Website without specifying a fixed height, make the following adjustments to your Interface settings.

A live working example of this can be found here.  Notice that the frame grows to the available width and height of the containing Web page.  In this example, there is no height on parent elements specified, so the IFRAME grows as far as required to display the content.

To make the frame responsive to the browser height, every parent element to the IFRAME must include a height specification as shown here:

Under your Interface's Style & Color settings

Set Auto Size IFRAME to "No"
 Set Frame Forced Height to : "100%" (include the quotes)
 Set Frame Style Attribute to: height: 100%; height: calc(100% - 22px);

Add this CSS to the CSS setting:

#ml_results_wrapper,#locator_map_canvas{ 
height: calc(100% - 85px) !important;
}

The above assumes a left-right orientation between the map and the directory which is the default, as controlled by the Map & Directory Layout setting found under Layout Settings.

When the map is above or below the directory, the CSS should be adjusted to divide the available height between the directory and the map as follows:

#ml_results_wrapper,#locator_map_canvas{ 
height: calc(50% - 163px) !important;
}

The 163px value may need to be increased based on the search fields chosen.  This value represents the calculated height of the search form.

The 22px figure in the Frame style attribute accounts for the pagination control shown below the directory results.

The resulting height of the interface is a percentage height.  In order for your Website to display this correctly, you must consider the height of the container into which MetaLocator's installation code has been placed.  Percent heights in HTML/CSS work by becoming the full (100%) height of their container.  This means that if your container is 200px tall, then MetaLocator's interface will become 200px tall using this method.  In the below example, the "Hello World" paragraph tag is 200 pixels tall since it is 100% of it's parent tag.

<body style="height:100%">
    <div style="height:200px">
        <p style="height:100%; display:block;">Hello, world!</p>
    </div>
</body>

Therefore, if you follow the steps in this tutorial and your Interface has disappeared or is too short, look to the height of the tags which contain your Interface code and specify 100% on each tag, including the HTML and BODY tags of the document.

The video below shows an example of this behavior.
 

 

Did this answer your question?