Skip Navigation

[Resolved] In custom term search place label BEHIND input?

This thread is resolved. Here is a description of the problem and solution.

Problem:

The customer wants to place the label behind the input in the search form to manipulate the label based on the input status using CSS. However, the input is currently placed inside the label, making this manipulation difficult.

Solution:

I confirmed that the customer is using legacy views to create the search form.
I checked internally and found that it is not possible to separate the label from the input using shortcodes in legacy views.
As a workaround, I suggested using JavaScript to manipulate the label based on the checkbox's checked status. Here is an example code snippet:

jQuery(function($){
    $(".class_containing_your_checkbox input[type='checkbox']").change(function(event){
        var checkbox = $(event.target);
        var status = checkbox.prop('checked');
        if (status) checkbox.parent().css('background-color', '#569cc3');
        else checkbox.parent().css('background-color', '');
    });
});

The code above applies CSS rules based on whether the checkbox is selected or not. The customer needs to change the function to target the specific div class containing the checkbox and apply the desired CSS for the labels.

0% of people find this useful.

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.

Our next available supporter will start replying to tickets in about 0.91 hours from now. Thank you for your understanding.

Sun Mon Tue Wed Thu Fri Sat
- 9:00 – 12:00 9:00 – 12:00 9:00 – 12:00 9:00 – 12:00 9:00 – 12:00 -
- 13:00 – 18:00 13:00 – 18:00 13:00 – 18:00 13:00 – 18:00 13:00 – 18:00 -

Supporter timezone: America/Sao_Paulo (GMT-03:00)

This topic contains 5 replies, has 2 voices.

Last updated by Mateus Getulio 3 months, 2 weeks ago.

Assisted by: Mateus Getulio.

Author
Posts
#2704077

a.R

Normally, in the search form, filtering by terms, the input will be placed INSIDE the label.
So one cannot manipulate the label based on input status by css.
How place the label BEHIND the input?

Thank you 🙂

#2704189

Mateus Getulio
Supporter

Languages: English (English )

Timezone: America/Sao_Paulo (GMT-03:00)

Hello there,

Thank you for contacting us.

Are you using the legacy views to create the search form or the new Toolset blocks?

Can you share a screenshot of how your search form looks like in order for me to better address this?

Thank you, please let me know.

#2704306

a.R

Hi, we use legacy.
Is there are shortcode, that will put the label BEHIND the input (checkbox)?

#2704418

Mateus Getulio
Supporter

Languages: English (English )

Timezone: America/Sao_Paulo (GMT-03:00)

Hello there,

I checked it internally and I'm afraid that it is not possible to 'separate' the label from the input.

However, we've had a similar request where it was needed to change the label based on the checkbox being checked or not and my colleague found a workaround that involves using JS instead of CSS, please check:

https://toolset.com/forums/topic/checkbox-css-checked-label-not-working/#post-1565735

Eg.:

jQuery(function($){
    $(".class_containing_your_checkbox input[type='checkbox']").change(function(event){
      var checkbox = $(event.target);
      var status = checkbox.attr('checked');
      if (status) checkbox.parent().css('background-color', '#569cc3');
      else checkbox.parent().css('background-color', '');
    })
})

The code above will apply the CSS rules you enter in the .css() function according if the checkbox is selected or not. You'd need to change the function to target your div class that contains the checkbox and use the CSS desired for the labels.

Thank you, please give it a try and let us know.
Mateus

#2704584

a.R

Ok, thank you.
WHY DOES OTGS DO IT THIS WAY?
Is there any REASON to make this css thing impossible now??

We have an old website, where we have based much logic on that INPUT - LABEL - order.
We use something like

[wpv-control taxonomy="inhaltsart" url_param="_inhaltsart" type="checkboxes" taxonomy_orderby="term_group" hide_empty="true" format="<div>%%NAME%%</div>"]  

there.
Do we have to be afraid, that our logic will collapse with one of the upcoming plugin updates?

Where can I post this URGENT feature request?

#2704718

Mateus Getulio
Supporter

Languages: English (English )

Timezone: America/Sao_Paulo (GMT-03:00)

Hello,

Thank you for your response.

I understand your concern regarding the logic you have built around the INPUT-LABEL order. I want to assure you that nothing will break in the upcoming plugin updates concerning your current setup.

I will open a feature request to consider allowing more flexibility in the placement of labels and inputs. However, I cannot provide an ETA on when or if this feature will be implemented.

For now, the workaround involving JS remains the only available solution.

If you would like to formally post this feature request, you can also do so on our Feature Request link: https://toolset.com/home/contact-us/suggest-a-new-feature-for-toolset/.

Thank you for your understanding and patience. If you have any other questions or need further assistance, please let me know.

Best regards,
Mateus

This ticket is now closed. If you're a Toolset client and need related help, please open a new support ticket.