Hi Andrew,
Thanks for sharing the admin access.
1. The extra space that is shown at the bottom of the multi-select field, is a result of minimum height style coming from the theme.
Note: To check which CSS code is applying to different page elements, you can use Google Chrome's inspect element tool, as explained in this guide:
hidden link
To make it stick to a specific height, you can override the theme's styles using custom CSS code, for example:
select.js-wpv-filter-trigger[multiple] {
min-height: 70px !important;
height: 70px !important;
overflow-y: scroll;
}
2. To automatically scroll to the table on the page load, you can include the following custom JS code in your view:
jQuery(document).ready(function () {
scrollToTable();
});
function scrollToTable() {
jQuery('html, body').animate({
scrollTop: jQuery('table').offset().top
}, 'slow');
}
Note: For a view that is set to update results using, AJAX (without reloading the page), you'll also need to include this script's function name "scrollToTable" in the field "will run after updating the results", so that it also executes when the search results are updated.
( screenshot: hidden link )
3. You can assign different border values to top, right, bottom and left sides, as explained in these guides:
hidden link
hidden link
4. To limit the page's content to a specific width, so that an equal amount of space is available on each side, you can wrap it in a special div container with a class.
Example:
<div class="special-container">
Content
</div>
Using custom CSS code, this container can be set to limit to a specific width.
Example:
.special-container {
max-width: 80%;
width: 80%;
margin: 0px auto;
}
I hope this helps and for future reference, please note that as per our support policy ( https://toolset.com/toolset-support-policy/ ), only one question or issue can be addressed through a single ticket.
You're welcome to open a new ticket for each new question or concern.
regards,
Waqar
