[Resolved] Control Custom Search and style them

[Author]

Posts

[John Crumpton]

I'm using a View with radio controls to filter results with "AJAX results update when visitors change any filter values"

Display options
Type of control - Set of radio buttons

This is part of the filtered view:

[wpv-control-postmeta field="wpcf-accreditation-class" type="radios" default_label="All" url_param="wpv-wpcf-accreditation-class"]

Unfortunately the outputted code wraps the radio elements within the label, eg:

<label><input>Label</label>

This is the source output

<div class="radio">
<label for="form-XXX"><input type="radio" class="js-wpv-filter-trigger" name="wpv-wpcf-accreditation-class" value="Product" id="form-XXX">Product
</label>
</div>

It should be

<input><label>Label</label>

For example:

<div class="radio">
<input type="radio" class="js-wpv-filter-trigger" name="wpv-wpcf-accreditation-class" value="Product" id="form-XXX">
<label for="form-XXX">Product</label>
</div>

Could you get this looked into and updated ASAP please?

The relevant function is

input_el_bootstrap( )

found at:

\wp-content\plugins\wp-views\embedded\inc\walkers\wpv_walker_postmeta_radios.class.php

NB: The reason this is important is that I'm replacing the standard radio elements using

:before

with the DIVI's "ETmodules" font which includes larger icons for form elements.

I can't hide the

input[type=radio]

and insert a circular font glyph to replace the radio buttons as the CSS Pseudo-classes

:checked

only works on a radio element.

In the interim, if you know how to adjust the function to display the input before the label (see below) I can adjust the wpv_walker_postmeta_radios.class to get this working for the deadline and be very grateful!

$output .= '<div class="radio">';
		$input_output = $this->el_input( $args['attributes']['input'] );
		$output .= $this->el_label( $input_output . $args['label'], $args['attributes']['label'] );
		$output .= '</div>';

[Beda]

I have a request filed that goes as follows:

1. Request:
- To be able to use something like the below in Custom Search Fields:

<label for="edit-search">Keyword</label>
<input type="text" name="wpv_post_search" id="edit-search" class="js-wpv-filter-trigger-delayed">

2. Status Quo:
- What we can add right now are "class" and "style".
- No "for" attributes are editable or even added natively.
- Also, no "ID" can be set or is set currently.

Tickets
https://toolset.com/forums/topic/please-add-an-id-to-inputs-selects-so-they-can-be-linked-to-labels/
https://toolset.com/forums/topic/cant-associate-a-form-label-with-a-form-control/
https://toolset.com/forums/topic/display-category-color-for-taxonomy-filter-terms/

This has even been implemented but only partially:
- Only Chekcboxes and Radio present a Label "For" and Input "ID".
- Select does not have those attributes in the HTML.

One of the big pros of putting the <input /> inside the <label>, is that you can omit "for" and "id".
And I believe, since we did not have "for" and "id" before, that this is the exact reason for it.

Generally it seems that it is semantically accepted to not put it into the label, but it seems even Bootstrap is doing this:
hidden link > checkboxes for example.

W3 even says, to associate a label with another control implicitly, the control element must be within the contents of the LABEL element. In this case, the LABEL may only contain one control element. The label itself may be positioned before or after the associated control.
hidden link

There is also an interesting post on Stackoverflow on this topic:
https://stackoverflow.com/questions/774054/should-i-put-input-tags-inside-a-label-tag

I think, this cannot be changed within Views code, but will check this with the developers.

It would in any case be a feature request - to be added after the developers evaluate the possibilities.

I will feedback to you about wether or not they approve this change.

[John Crumpton]

Thanks for coming back and raising the issue. I understand what your saying about this being acceptable as is, however the way I've requested, will give more control in css to styling the form.

Have a look at the attached GIFs to see the difference. At the moment it works but doesn't show the :checked state, in the example I select Technology and this loads the technology items, however it doesn't show me we're only on those items.

Regarding the stackoverflow post in the accepted answer he agrees that "Either one is valid. I like to use either the first or second example, as it gives you more style control" referring to input then label, ie although valid, having the style options is a plus.

To try this out yourself, this is the code for swapping out the radio buttons for the DIVI ETmodules font.

Unless you can see another way to target the :before of

<input type="radio" class="js-wpv-filter-trigger" name="wpv-wpcf-accreditation-class" value="Service" id="form-xxxx4" checked="checked"> 

/* Change the default style of the radio button to use the DIVI ETmodules font */
input[type=radio] {
  visibility: hidden;
  margin: 0;
  width: 0!important;
}
input[type=checkbox] + label:hover, 
input[type=radio] + label:hover { 
  cursor: pointer; 
}
input[type=checkbox] + label:before,
input[type=radio] + label:before,
.radio input[type="radio"]:before,
.radio label:before {
  font-family: 'ETmodules';
  font-size: 34px;
  position: relative;
  top: 0.3em;
  margin-right: 0.4em;
}
input[type=radio] {
  color: #fcca37;
}
radio label:before, 
.radio input[type="radio"]:before { 
  content: '\5b'; 
  color: #fcca37;
}
input[type=radio] + label:hover:before, 
.radio label:hover:before, 
.radio input[type="radio"]:hover:before { 
  content: '\5c'; 
  color: #fcca37;
}
input[type=radio]:checked + label:before, 
.radio label:checked:before, 
.radio input[type="radio"]:checked:before { 
  content: '\5c'; 
  color: #fcca37; 
}
input[type=radio]:checked + label:hover:before, 
.radio label:checked:hover:before, 
.radio input[type="radio"]:checked:hover:before { 
  color: #fcca37; 
}

[Beda]

I understand that this issues come along when you fully customize these outputs.

Although, when you choose the output type that we suggest when you fully customize the output ( output="legacy"), then the input is not nested in the label.

Does this not help to solve this issue?

I believe we only nest the Input in the label because we use Bootstrap if you don't specify the legacy output (which is basically a raw output).

Please let me know.

[jamesR-13]

I am working on a site, and I am building a CRED form and have a similar issue, except my preference is the opposite. In my site the label is separate and after the input, but I would prefer it to be wrapped around the input. The reason is that with the label as wrapper, the entire element is contiguously clickable, not the case with the label separate.

I have tried both legacy and bootstrap output and both produce the same, label below input. I would like to request that the GUI option be added when inserting a field, to have the label wrap or be below/above and include the for attribute.

[John Crumpton]

Please keep this issue open, am testing now

[John Crumpton]

Either adding output="legacy" to [wpv-control-postmeta or clicking on [wpv-control-postmeta in the editor, then click the Edit filter button, then in the modal window on the left, "Style options" and Output style Raw output fixes the issue. Label and input are separate, thanks for your help.

It does add line breaks (br) between each element, however these can be removed with display: none in css.

[Brent Urbanski]

Unfortunately, this solution does not work for checkboxes (only works for radios). Checkbox inputs are still nested within labels even when output="legacy" is chosen.