This thread is resolved. Here is a description of the problem and solution.
Problem: I am using AJAX to update a custom search View, and I would like to display the spinner in a full-page overlay.
Solution: When you insert the spinner graphic in your View's filter controls, you'll have the opportunity to add your own CSS classes, inline CSS styles, and additional content that will appear inside the spinner markup on the front-end. The specific CSS that must be added to make the loader cover the entire page varies based on your site's theme and other page markup and structure. There is no global CSS that will work for every person on every site, unfortunately. Here is some starting code, but it will require customization for your site's requirements:
.fullscreen-spinner {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: rgba(10,10,10,0.5);
z-index: 2;
}
.fullscreen-spinner > img {
margin-left: auto;
margin-right: auto;
margin-top: 30%;
display:block;
}
Add the CSS class "fullscreen-spinner" in the "container classnames" configuration, and add the CSS code above in the View Filter Editor CSS panel.
This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.
Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.
| Sun | Mon | Tue | Wed | Thu | Fri | Sat |
|---|---|---|---|---|---|---|
| 8:00 – 12:00 | 8:00 – 12:00 | 8:00 – 12:00 | 8:00 – 12:00 | 8:00 – 12:00 | - | - |
| 13:00 – 17:00 | 13:00 – 17:00 | 13:00 – 17:00 | 13:00 – 17:00 | 13:00 – 17:00 | - | - |
Supporter timezone: America/New_York (GMT-04:00)
This topic contains 2 replies, has 2 voices.
Last updated by Brent Urbanski 6 years ago.
Assisted by: Christian Cox.
I would like the Views filter spinner to be an overlay centered on the page(or filter container), rather then shown at the beginning or end of the filter container.
Within toolset documentation the following statement in section 2.6 leads me to believe this easily be achieved with css. https://toolset.com/documentation/user-guides/front-page-filters/
..."With a little CSS, this spinner container could become a fantastic overlay displayed when the form is updating its inputs to adjust dependent values, or when the View results are being updated on-the-fly. It is up to you."
I've also found this video created by Amir Helzer which show the spinner overlaying the filter container upon change. I assume this must easily achieved if it's shown in a toolset demo, right?
hidden link
Hi, when you insert the spinner graphic in your View's filter controls, you'll have the opportunity to add your own CSS classes, inline CSS styles, and additional content that will appear inside the spinner markup on the front-end. I'm attaching a screenshot here that shows those option fields. The specific CSS that must be added to make the loader cover the entire page varies based on your site's theme and other page markup and structure. There is no global CSS that will work for every person on every site, unfortunately. I would start with something like this, but it will require customization for your own situation:
.fullscreen-spinner {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: rgba(10,10,10,0.5);
z-index: 2;
}
.fullscreen-spinner > img {
margin-left: auto;
margin-right: auto;
margin-top: 30%;
display:block;
}
Add the CSS class "fullscreen-spinner" in the "container classnames" configuration, and add the CSS code above in the View Filter Editor CSS panel.
