Multiple columns in each result can cause the user to side-scroll when viewing search results that have more width than the device can accommodate. To address this issue, you can update your interface as follows to include responsive behavior. The instructions vary based on whether you are using our Spreadsheet Layout, or you have simply included additional results columns as found under Layout Settings > Columns.
Spreadsheet Layout
Update the Advanced > Footer setting with the following code:<script>jqLocator(document).ready(function() {jqLocator('.metalocator_results_table').stacktable();});</script>
Update the Advanced > Header setting with the following code:<script type="text/javascript" src="/components/com_locator/assets/stacktable/stacktable.js"></script>
Update the Style & Color > CSS setting to include the following code:@media screen and (max-width: 800px) { .stacktable.large-only { display: none !important; } .stacktable.small-only { display: table; } .stacktable.small-only td.title { text-align: left; };}@media screen and (min-width: 801px) { .stacktable.large-only { display: table; } .stacktable.small-only { display: none !important; }}
This will cause the layout to responsively adjust and sizes lower than 800 pixels wide to a row-based layout.
Layout Columns
Implement the instructions above for the spreadsheet layout, but include this additional CSS
.metalocator .metalocator_results_table.stacktable th{
font-weight:normal;
text-align:left;
}
.metalocator .metalocator_results_table.stacktable th{
font-weight:normal;
text-align:left;
}
.metalocator .stacktable .st-key{
display:none;
}
.metalocator .stacktable .ml_empty{
display:none
}
.metalocator .stacktable td {
padding: none;
}