[Resolved] Filters, change background of selected/checked

[Author]

Posts

[katjaL]

I am trying to: have a different background color on checked/selected filter

It seems I can't change the html of only the selected filter. So I try with css, but no luck so far. My css is this:

.radio input[type="radio"]{display:none;} //this clears the radio button, works ok
.radio label {background-color:#ccc;} //the normal state
.radio label input[type="radio"]:checked+label {background-color:#000;} //the goal I'm trying to achieve, black background when checked.

IMHO the right and user friendly way would be to be able to (or automatically) change the label's class (to for example .selected) when the radio is checked, so for example this would work: .radio label.selected {background:#000;}

Somehow this obviously much needed feature seems oddly hard to achieve. I'm sorry if I'm not realizing the obvious way. Thank you.

[Luo Yang]

Dear katja,

I assume we are talking about the shortcode [wpv-control].

I suggest you replace them with the two shortcodes [wpv-control-post-taxonomy] and [wpv-control-postmeta], you will be able to setup the CSS class name easily, for example:
[wpv-control-postmeta ... class="my-radio-filed"]
Then style it with your own CSS codes, for example:

.my-radio-filed{
/* Here  setup your custom CSS codes */
}

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

Attribute: class (opt):
'class names separated by space'
The class of the element. Takes a string value and will be added unchanged to the HTML element

[katjaL]

Hi Luo, thank you. But I think your code adds the class to all result items, not just to the selected. This happens anyway with the real code that I have, please check "filled-first" and "filled-second". Should I use some other code?

[wpv-filter-start hide="false"]
[wpml-string context="wpv-views"]
[/wpml-string] [wpv-filter-controls]
[wpv-control-post-relationship ancestors="artistikategoria>alakategoria" url_param="wpv-relationship-filter"]
<div class="form-group">
[wpv-control-post-ancestor type="radios" ancestor_type="artistikategoria" class="filled-first"][wpv-filter-reset reset_label="Näytä kaikki" class="resetointi" type="button"]
</div><div class="form-group">
[wpv-control-post-ancestor type="checkboxes" ancestor_type="alakategoria" class="filled-second"]
</div>
[/wpv-control-post-relationship][/wpv-filter-controls]
[wpv-filter-end]

[Luo Yang]

I assume we are talking about the shortcode:
[wpv-control-post-ancestor type="radios" ancestor_type="artistikategoria" class="filled-first"]

The shortcodes [wpv-control-post-ancestor] only supports attribute "label_class", does not support attribute "class"
https://toolset.com/documentation/user-guides/views-shortcodes/#wpv-control-post-ancestor

And you will need to customize your CSS codes and JS codes according to the HTML output, and it needs custom codes, if you need assistance for it, please provide a live page with same problem, I need to test it in my Chrome browser.

[katjaL]

Thanks Luo. Strangely the "class" does exactly the same thing as the "label_class" (class works too). They both provide the same class to all items.

The live page can be seen here: goo.gl/FXtBes

[Luo Yang]

Since your website isn't in English, I assume we are talking about the field "Kapellimestari",

Please check the HTML source code of it:

<label class="first" for="form-3f3b33208e502a3eafd8e687e0f7f8c6-1"><input type="radio" class="js-wpv-post-relationship-update" name="wpv-relationship-filter-artistikategoria" value="2471" id="form-3f3b33208e502a3eafd8e687e0f7f8c6-1" checked="checked">Kapellimestarit</label>

The HTML tag "label" is parent tag of HTML tag "<input ...>", but there isn't CSS parent selector:
https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector
So your CSS code won't be able to work.

Currently I suggest you setup some custom JS codes for it, since you are using ajax feature in custom search form, I suggest you try with Views AJAX event "js_event_wpv_parametric_search_results_updated", like this:
1) Edit your view, in section "Filter Editor", click "CSS Editor", add below codes:

.checked-radio{
background-color:#000;
}

2) Click "JS Editor", add below codes:

( function( $ ) {
    $( document ).ready( function(){
 
        /* Declare function to set up setup radio field */
        var setRadio = function(){
          $('input.js-wpv-post-relationship-update').parent('label.first').removeClass('checked-radio');
          $('input.js-wpv-post-relationship-update:checked').parent('label.first').addClass('checked-radio');
        }
 
        /* Initialise setup radio field on initial page load */
        setRadio();
 
        /* Re-initialise each after pagination */
        $( document ).on( 'js_event_wpv_pagination_completed', function() {
            setRadio();
        });
 
        /* Re-initialise each after search results update */
        $( document ).on( 'js_event_wpv_parametric_search_results_updated', function() {
            setRadio();
        });
 
    });
})( jQuery );

[katjaL]

Unfortunately these didn't help.

Yes, I'm talking about "Kapellimestarit" and all the other first level items (Laulajat, Solistit, Yhtyeet). The "Näytä kaikki" is a reset button.

Actually I realized there is another, more serious problem. There are two "forms" here:

1. level radio buttons (you can choose only one)

2. level checkboxes (you can choose several)

And this is excactly what I need: choose parent and after that you can choose several children (and the visual has to be like it is now, horizontal).

The problem arises when visitor first chooses something on 2. level (for example Solistit->Viulu), then chooses something else on 1. level (for example "Laulajat"). The second level checkbox stays there chosen and the new choosing doesn't work as it should.

So I would need a "resetting" feature for every radio/1.level clicking.

Do you think this can be achieved with this kind of structure I have? Perhaps I should try with 2 separate views/forms?

Thank you already in advance for your advice, Luo.

[Luo Yang]

First, there isn't such a built-in feature within Views plugin, it needs custom Javascript codes, the codes I mentioned above is only an example for your reference.

For your question:
So I would need a "resetting" feature for every radio/1.level clicking.

You can trigger your custom JS function with Jquery .click()
hidden link

Then add the "resetting" feature as what you want.