Sometimes its preferable to display a map with the full width and display the map and list after a search has been performed.  This allows the user to see a full breadth of results without cluttering the UI with possibly irrelevant results.  In this tutorial, we'll modify the Sleek Design Template to hide the results until a search has been performed.

This will leverage CSS.  The CSS provided here should be added to the end of the CSS setting found under Style & Colors.

Before a search is performed, the MetaLocator UI has a class called "locator_initial".   We can use this to hide the results, and display the map at full width.

.locator_initial #ml_results_wrapper{
display:none;
}

.locator_initial #locator_map_canvas{
width:100%;
}

This provides the following display:
 

Once we perform a search, the locator_initial class is removed, and replaced with locator_results.  This invalidates the CSS and the results display with the directory.

Did this answer your question?