Hello ToolSet
Tell us what you are trying to do?
The "wpv-filter-spinner" currently remains at the bottom of my filter controls...
I would like it to appear right over the Post Loop while the results are being loaded.
The pagination buttons are currently at the top of my filter controls...
I would like them to be placed at the bottom right of my loop.
Is there any documentation that you are following?
Yes,
https://toolset.com/documentation/user-guides/front-page-filters/
Is there a similar example that we can see?
Please see attached...
What is the link to your site?
hidden link
I tried adding the following code to the "Loop Output Editor"
[wpv-filter-spinner container="span" spinner="<em><u>hidden link</u></em>"]filtering...[/wpv-filter-spinner]
<ul class="pagination">
<li class="page-item">[wpv-pager-prev-page][wpml-string context="wpv-views"]Previous[/wpml-string][/wpv-pager-prev-page]</li>
<li class="page-item">[wpv-pager-next-page][wpml-string context="wpv-views"]Next[/wpml-string][/wpv-pager-next-page]</li>
</ul>
But no success so far.
Hello,
Q1) The "wpv-filter-spinner" ...
I assume we are talking about the Views shortcode [wpv-filter-spinner]
https://toolset.com/documentation/user-guides/views-shortcodes/#wpv-filter-spinner
You can put the [wpv-filter-spinner] to where you want, for example:
[wpv-filter-spinner container="span" position="after" spinner="<em><u>hidden link</u></em>"][/wpv-filter-spinner]
It will produce a hidden html div tag:
<span style="display:none" class="js-wpv-dps-spinner"><img src="<em><u>hidden link</u></em>"></span>
Then you can use CSS codes to style it to what you want, for example:
span.js-wpv-dps-spinner{
/* here put your CSS codes */
}
Q2) The pagination buttons
I suggest you move the pagination shortcodes to where you want, for example, in the section "Loop Editor", just before the shortcode "[/wpv-items-found]", and test again
Thank you so much for your response Luo,
I'll try your instructions!
OK, please update this thread if you still need more assistance.
Thank you...
I moved both short-codes to the "Loop Output Editor"
Here's what it looks like:
[wpv-layout-start]
[wpv-filter-spinner container="span" position="after" spinner="<em><u>hidden link</u></em>"]filtering...[/wpv-filter-spinner]
[wpv-items-found]
<!-- wpv-loop-start -->
<wpv-loop wrap="1" pad="true">
[wpv-item index=1]
<div class="row ">
<div class="col-sm-12">[wpv-post-body view_template="Loop item in View"]</div>
</div>
[wpv-item index=other]
<div class="col-sm-12">[wpv-post-body view_template="Loop item in View"]</div>
[wpv-item index=pad]
<div class="col-sm-12"></div>
[wpv-item index=pad-last]
<div class="col-sm-12"></div>
</wpv-loop>
<!-- wpv-loop-end -->
<ul class="pagination">
<li class="page-item">[wpv-pager-prev-page][wpml-string context="wpv-views"]Previous[/wpml-string][/wpv-pager-prev-page]</li>
<li class="page-item">[wpv-pager-next-page][wpml-string context="wpv-views"]Next[/wpml-string][/wpv-pager-next-page]</li>
</ul>
[/wpv-items-found]
[wpv-no-items-found]
<strong>[wpml-string context="wpv-views"]No articles found[/wpml-string]</strong>
[/wpv-no-items-found]
[wpv-layout-end]
Also in the Toolset "Layouts CSS and JS Editor" I added:
span.js-wpv-dps-spinner{
margin: 50px 0px 0px 0px !important;
}
.pagination {
float: right;
}
Looks like that solved the pagination buttons position...
For some reason I created a bigger problem..
After those changes, the Articles disappear from the view and from the layout.
Even when I go back and delete those two short-codes, save it, and re-fresh it, the articles wont load anymore...
PLEASE HELP! = ( I've been trying to fix this for hours, I'm not sure what I did wrong.
Here's the page:
hidden link
Also, the Spinner that appear when the Category Checkboxes were clicked, stoped functioning.
Ok, I fixed the issue about the non appearing articles...
Here's the corrected code in The Loop Output Editor:
[wpv-layout-start]
[wpv-filter-spinner container="span" position="after" spinner="<em><u>hidden link</u></em>"]filtering...[/wpv-filter-spinner]
[wpv-items-found]
<!-- wpv-loop-start -->
<wpv-loop>
[wpv-post-body view_template="Loop item in Articles Filter"]
</wpv-loop>
<!-- wpv-loop-end -->
<ul class="pagination">
<li class="page-item">[wpv-pager-prev-page][wpml-string context="wpv-views"]Previous[/wpml-string][/wpv-pager-prev-page]</li>
<li class="page-item">[wpv-pager-next-page][wpml-string context="wpv-views"]Next[/wpml-string][/wpv-pager-next-page]</li>
</ul>
[/wpv-items-found]
[wpv-no-items-found]
<strong>[wpml-string context="wpv-views"]No items found[/wpml-string]</strong>
[/wpv-no-items-found]
[wpv-layout-end]
The only thing that remains un resolved is the
[wpv-filter-spinner container="span" position="after" spinner="<em><u>hidden link</u></em>"]filtering...[/wpv-filter-spinner]
It is not appearing when the filter checkboxes are selected.
span.js-wpv-dps-spinner{
margin: 50px 0px 0px 0px !important;
}
Could you please let me know where should I be placing the short code? [wpv-filter-spinner]
Please try to put the spinner shortcode [wpv-filter-spinner] into the filter form, and test again
Thank you...
If I move it into the filter form it will function but it will display on the left sidebar.
I would like to position it on top of the Loop while it's loading..
Does it need to be into the filter form, with extra CSS to be positioned on top of the loop?
Yes, you are right, it needs to be put into the filter form, and be positioned on top of the loop.
Ok, thank you Luo...
I placed the [wpv-filter-spinner] Shortcode inside the "Filter Editor" and it works again...
Here's the code:
[wpv-filter-start hide="false"]
[wpv-filter-controls]
[wpv-filter-spinner container="span" position="after" spinner="<em><u>hidden link</u></em>"]filtering...[/wpv-filter-spinner]
<div class="form-group">
[wpv-filter-search-box output="bootstrap"]
</div>
<div class="form-group">
<label>[wpml-string context="wpv-views"]Categories[/wpml-string]</label>
[wpv-control-post-taxonomy taxonomy="category" type="checkboxes" url_param="a-cat"]
</div>
[/wpv-filter-controls]
[wpv-filter-end]
Could you please show me a sample of what the CSS code would like, to center the spinner in the Post Loop?
I'm guessing it's something like using a CSS Class to target the spinner but I don't really code
It needs custom codes, please duplicate same problem in a test site, and fill below private detail box with login details and FTP access, also point out the problem page URL and view, I need a live website to test and debug, thanks
Thanks for the details, I am checking it in your website, will feedback if there is anything found
I have tested it in your website, but can not find any workaround by only CSS codes.
I am importing your website site settings into my localhost, check if there is any other workaround ,will update this thread if there is anything news.
It is hard than I thought, I have checked it with our developers, it needs more custom codes, and if you agree, we can take as a feature request, our developers will evaluate it.
Ok, I'm sorry you had to go trough all of that trouble.
Thank you so much for taking so much time on it Luo.
If this can become a new featured it will be awesome!
Thanks again!
