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.
