[Gelöst] Filter CSS / View problem

[Author]

Artikel

[Matthias Reichl]

Hi,

I´ve created a view, where team members are displayed: versteckter Link

These team members can be filtered by radio buttons at the top. I´ve disabled the view of the input radio buttons to diplay a grid like filtering system only with labels. Now I´ve got two problems:

1) How can I set the background-color, when a filter is selected / checked? The color should be the same like hover.

2) When you select "Rechtsanwälte" the first displayed item looks other than the other. This only happens at this selection with this item. Can you please tell me, why this happens only to this item on this selection?

You will need to authentificate via http auth - so please open a private ticket.

Thanks and regards,

[Beda]

I cannot access the site you linked as a Server Security Applet asks Login Name and Password.
I enabled a Private Reply for you to provide them.

Toolset requires knowledge of HTML and CSS/JS, as we do not provide Support or GUI to add lots of CSS or HTML, it is more about building the structures, and then apply custom HTML, CSS or JS either manually in the editors, or for example with some page builder like Beaver Builder or similar.

This cannot be done in the Search HTML section - there you need to apply your own manually created styles and HTML.

If you plan to modify the "native" inputs I suggest to always choose "legacy" or "raw" Styling output when you insert your filters, and not the Bootstrap Fully styled output, as that will make it easier to add your own styles.

Background colors on inputs that can have a checked value can be added with JS for example using the addClass() and removeClass() jQuery functions depending on the value that the inputs have.
CSS itself even supports :hover, :checked, and more.

There are some hints on here as well:
https://stackoverflow.com/questions/34388696/how-to-change-the-background-color-on-a-input-checkbox-with-css
https://stackoverflow.com/questions/24135355/uncheck-a-checkbox-using-css
versteckter Link
versteckter Link

This is not something we can widely assist with as it's a design task, but I think with above details you should already be able to proceed!

Related to "When you select "Rechtsanwälte" the first displayed item looks other than the other. This only happens at this selection with this item. Can you please tell me, why this happens only to this item on this selection?", I am not sure, but this is not due to Toolset native functions.

Instead, it is due to any style or rule applied that does this whenever that value is selected.
Toolset has no "automated" methods to change appearances on the fly.

Does that happen as well when you remove all CSS and JS from those Views?
The posts then should display as a simple unformatted output.
If that is not the case it means there is more HTML or CSS in the Loop of the View, that may produce the issue.

Let me know if something is unclear (private reply is as well active)

[Luo Yang]

Hello,

Thanks for the details, I can login your website, have edited the view "Team mit Filter", and done below modification in your website

Q1) How can I set the background-color, when a filter is selected / checked? The color should be the same like hover.

It needs some custom JS codes:

In the view "Team mit Filter", section "Search and Pagination", move all your CSS codes to, section "CSS Editor".

In "JS Editor", add below codes:

(function($ ) {
  // after AJAX search completed
  $( document ).on( 'js_event_wpv_parametric_search_results_updated', function( event, data ) {
    $('input.js-wpv-filter-trigger:checked').parent('label').css("background-color", "#dd0000");
  });
  
  // after page is loaded
  $( document ).ready( function(){
    $('input.js-wpv-filter-trigger:checked').parent('label').css("background-color", "#dd0000");
  });
})( jQuery );

Q2) Can you please tell me, why this happens only to this item on this selection?

There is some broken HTML codes in your view, I have edited the view "Team mit Filter", in section Templates for this View
"Loop item in Team mit Filter", edit the codes from:

<p>
<h4><a href="[wpv-post-url]">[wpv-post-title]</a></h4>
[types field='berufsbezeichnung'][/types]

To:

<p>
<h4><a href="[wpv-post-url]">[wpv-post-title]</a></h4>
[types field='berufsbezeichnung'][/types]
</p>

Please test again, check if it is fixed, thanks

[Matthias Reichl]

Hi,

thanks a lot. My first issue is resolved, but the second is not. I don´t know, why this happens at this simple view. I´ve tried it at a private mode of my browser so this could not be related to any caching problem. Do you see the grid images on all tabs with the default design?

Regards,

[Luo Yang]

Yes, you are right, it might be a compatibility problem, please try to deactivate other plugins, and switch to wordpress default theme 2017, and test again

[Matthias Reichl]

Hi,

we´ve identified the problem: everytime we create the custom post type with elementor the whole content is displayed at the view. When I create the custom post type content via the default editor the view is displayed as it should.

I don´t know, where the bug is - I will inform elementor, but please check it on your site also.

Thanks and regards,

[Luo Yang]

Thanks for the confirmation, I have done below modification in your website:
Edit the view "Team mit Filter", in section "Loop Editor", change the content template shortcode from:
[wpv-post-body view_template="Loop item in Team mit Filter"]

To:
[wpv-post-body view_template="Loop item in Team mit Filter" suppress_filters="true"]

Add the attribute "suppress_filters" to disable other plugins's filter, please test again, check if it is fixed.

More help:
https://toolset.com/documentation/user-guides/views-shortcodes/#wpv-post-body

suppress_filters (opt):
'true' | 'false' (default)

If suppress_filters=’true’, all third party (non WordPress) filters hooked into the_content filter will be removed

[Matthias Reichl]

Hi,

thanks a lot - this view is fixed. We´ve created another view (ID= 916), where only the page title should be displayed. We´ve got the same problem (elementor page created and view does display the whole content), but your fix doesn´t work here: versteckter Link

"Behandelte Fachgebiete" should only display the page title below.

Regards,

Neue Threads, die von Luo Yang erstellt wurden und mit diesem verbunden sind, sind unten aufgeführt:

https://toolset.com/de/forums/topic/elementor-page-created-and-view-does-display-the-whole-content/

[Luo Yang]

I assume the original questions of this thread are resolved, for the new question, please check the new thread:
https://toolset.com/forums/topic/elementor-page-created-and-view-does-display-the-whole-content/

[Matthias Reichl]

Thanks for your help!