Custom Join Field Check Box Missing Label

kapearl

Member
I've added check boxes as custom join fields. On my join page, the majority of the field titles are following the default label styling for the bootstrap theme (bold).

The check box field titles, however, are only in a div and not label so they have no styling. For example, the join field title is handled like this:

HTML:
<label for="join_username">Username</label>
The checkbox title is this:

HTML:
<div>My Custom Title</div>
What can I change so the custom checkbox's will also be a label vs div. I see {$join_website_extra} on join_form.html but don't know where to go from there. Thanks for any advice!
 

Basti

Administrator
Staff member
That is because it is no label, a label is an indicator to a input / form element

You could target it in css with
Code:
#YOUR_FIELD_ID_conatiner > div:first-child {
  css attributes here, font, size etc
}
YOUR_FIELD_ID_conatiner e.g acf_my_field_container

Or, which is properbly a bit more understanding to most users, and will properbly go into next VL, is add a class to that div
sources/misc/form.php
Code:
    $checkbox_html  = '<div id="'.$name.'_container" class="form-group '.$TMPL["error_style_{$name}"].'"><div>'.$label_text.'</div>';
change that to the following
Code:
    $checkbox_html  = '<div id="'.$name.'_container" class="form-group '.$TMPL["error_style_{$name}"].'"><div class="form-checkbox-heading">'.$label_text.'</div>';
And give same css as label using your user.css
Code:
.form-checkbox-heading {
  css attributes here, font, size etc
}
 

Basti

Administrator
Staff member
This is added now to 1.5
We added the label tag to checkbox and radio, but without the "for" attribute as that is invalid and we have no specific input id for which the "for" can be used for.
 
Top