Tell us what you are trying to do?
Hello, we needed to customize the appearance of our checkboxes, so we changed the output of these to "legacy" in our view. This worked well for all of our filters on the homepage. However, the "categories" checkboxes seem to not work when we apply the shortcode- you can see that they appear differently on the homepage (battstaging2.com) despite having similar code. Can you help us debug?
Is there any documentation that you are following?
No
Is there a similar example that we can see?
No
What is the link to your site?
battstaging2.com
Hello,
I assume we are talking about the shortcode [wpv-control-post-taxonomy], attribute "output":
https://toolset.com/documentation/user-guides/views-shortcodes/#wpv-control-post-taxonomy
The Legacy Output will output the checkboxes as a HTML order list, for example:
<ul class="categorychecklist form-no-clear">
...
<li id="post_category-33" class="popular-category"><label for="in-category-33" class="selectit"><input type="checkbox" id="in-category-33" class="js-wpv-filter-trigger" name="wpv-category[]" value="career-skills"> Career Skills (26)</label></li>
...
</ul>
It does not work as the custom checkboxes post field.
In your case, I suggest you try to create some JS codes to apply those CSS class to taxonomy field, for example:
Edit your post view(ID 312), in section "Search and Pagination", click "JS Editor", add below JS codes:
jQuery( document ).on( 'js_event_wpv_parametric_search_form_updated', function( event, data ) {
jQuery('ul.categorychecklist li').addClass('form-item form-item-checkbox wpcf-form-item wpcf-form-item-checkbox');
});
jQuery('ul.categorychecklist li').addClass('form-item form-item-checkbox wpcf-form-item wpcf-form-item-checkbox');
More help:
hidden link
Hi there,
I think you are referring to a different question. Legacy output did not output an ordered list for us; it stopped the output from creating inputs that were nested inside the labels.
So instead of:
<label><input></label>
Legacy output creates:
<input><label></label>
Which can then be correctly styled with CSS. However this does not appear to be working on the checkboxes, so we're getting unsettled checkboxes. We have also tried custom jQuery radiocheckbox (link below), which is also failing on these categories checkboxes.
hidden link
Can you help us resolve this?
There isn't such kind of feature within Legacy output, and it can be fixed by the JS codes I mentioned above.
If you need more assistance for it, please provide a test site with the same problem, I can setup a demo for you. thanks
Thanks Luo - I am not sure your solution will work, because it still leaves the <input> nested *inside* the <label>, which traditionally makes checkboxes impossible to style with CSS - however I look forward to seeing if you have a solution.
I believe we already created a copy of our site for you, but I have just created another [duplicator package] and shared it with the email I have on file. Thank you for your help, and I look forward to seeing the solution!
Max
It should be able to work, see screenshot cat-css.JPG
And I have provided the detail steps to setup the JS codes:
https://toolset.com/forums/topic/legacy-output-for-categories-checkbox-not-working/#post-1381453
You just need to copy/paste the JS codes.
There isn't the same problem in the duplicator package you provided in previous thread:
https://toolset.com/forums/topic/custom-post-archives-have-disappeared/#post-1374461
I see! Thank you so much for this help. I did not actually previously enter the JS in the correct place - your guidance here has helped resolve this issue, you're right, it totally works!
I appreciate the help.
Max
It looks like I spoke slightly too soon. While the new code does change the form of the checkbox to a box, no checkmark actually happens once the box is checked. I am unable to resolve on my end - can you help me resolve this?
I am downloading the new duplicator package files, will update here if there is anything found.
Here are what I found in your duplicator package, those checkboxes do checked after click it, but you are using custom CSS codes to hide it, for example, you can try these:
It is your custom CSS codes do not work for the taxonomy checkboxes field.
Those custom CSS codes are from your theme file \wp-content\themes\h-code-child\style.css, line 714~771,
.form-item-checkbox {
position: relative;
margin: 16px 0;
overflow: auto;
width: 100%;
margin-bottom: 0px !important;
margin-top: 7px !important;
}
.form-item-checkbox label {
cursor: pointer;
margin-left: 28px !important;
user-select: none;
width: unset !important;
font-family: 'Open Sans', sans-serif;
text-transform: none !important;
color: #00000087 !important;
letter-spacing: .1px !important;
margin-top: -3px;
font-size: 13px !important;
font-weight: 600 !important;
text-rendering: optimizeLegibility !important;
}
.form-item-checkbox label:before, .form-item-checkbox label:after {
content: "";
position: absolute;
left: 0;
top: 0;
}
.form-item-checkbox label:before {
width: 20px;
height: 20px;
background: #fff;
border: 2px solid #d8d9da99;
border-radius: 2px;
cursor: pointer;
transition: background .3s;
}
.form-item-checkbox input[type="checkbox"] {
outline: 0;
margin-right: 10px;
display:none;
}
.form-item-checkbox input[type="checkbox"]:checked + label:before {
background: var(--technycblue) !important;
border: none;
}
.form-item-checkbox input[type="checkbox"]:checked + label:after {
transform: rotate(-45deg);
top: 5px;
left: 4px;
width: 12px;
height: 6px;
border: 2px solid #fff;
border-top-style: none;
border-right-style: none;
}
For example, you can remove above CSS codes, delete cache, and test again, you should be able see all native HTML checkboxes work fine, but according to our support policy we don't provide custom codes support:
https://toolset.com/toolset-support-policy/
And you are right, in order to make the taxonomy checkboxes field work with your custom CSS codes, it needs to output the HTML codes as you mentioned above:
The current
But there isn't such a built-in feature within Toolset Views plugin, you can add a feature request for it:
https://toolset.com/home/contact-us/suggest-a-new-feature-for-toolset/
Our developers will evaluate it.
Hi Luo,
The first line that I wrote in this thread says, "we needed to customize the appearance of our checkboxes," -
I am a bit frustrated that we had this miscommunication - it would have been much easier if you could have mentioned that at the beginning.
Yes, I do understand you need to customize the checkboxes style, but the Views shortcode [wpv-control-post-taxonomy] can only output the taxonomy checkboxes field as below:
This is a limitation of Views shortcode [wpv-control-post-taxonomy], and does not satisfy your custom CSS codes requirement, please let me know if you need other CSS/JS workaround.
Can you help with this?
Originally, our approach was to use Jquery checkboxradio(), which *does* allow customization of the input in the form:
<label><input></label>
However, for some reason it was not working with toolset, even though they had an identical example on their website:
hidden link
It is just very important for us to customize the appearance of the checkboxes.
Please try below JS codes:
jQuery( document ).on( 'js_event_wpv_parametric_search_form_updated', function( event, data ) {
cat_style();
});
function cat_style(){
jQuery('ul.categorychecklist li').addClass('form-item form-item-checkbox wpcf-form-item wpcf-form-item-checkbox');
jQuery('ul.categorychecklist li input[type="checkbox"]').each(function(index){
$(this).closest('li').prepend($(this)); // move checkbox before label tag
});
}
cat_style();
I have tested it in my localhost with your duplicator package, it works fine, see screenshot: cat-cks.JPG
More help:
hidden link
Wow - this really worked. Thank you very much for your help - I know that was a lot of work for you, but I really appreciate it because this lets us move forward and the custom checkboxes are very important to us.
THANK YOU!
