|
TheFreshUK
|
January 25, 2023 at 2:25 am
I’m trying to add a few wrappers around certain elements on the registration.
Our theme sets a few widths on the form elements to make it more presentable. I’ve scoured the codebase for filters and hooks to make this easier without having to override templates.
I’ve managed to successfully wrap sections around question groups using FHEE__EEH_Form_Fields__generate_question_groups_html__before_question_group_questions and FHEE__EEH_Form_Fields__generate_question_groups_html__after_question_group_questions I can’t seem to locate anything similar to allow me to wrap anything around the questions themselves.
We use BEM to add modifiers to form elements to alter the width within a flexbox. It doesn’t seem that EE4 offers much in the way of customising questions this way.
We also use input placeholders as the label for our forms, but again, there doesn’t seem to be any options for this.
|
|
TheFreshUK
|
January 25, 2023 at 5:46 am
Have been able to partially solve this. For anyone else that comes across this issue.
AHEE__EE_Form_Input_Base___construct_finalize__end passes the input which can then be used to add additional attributes such as a placeholder.
<?php
add_action('AHEE__EE_Form_Input_Base___construct_finalize__end', 'theme_set_other_html_attributes');
function theme_set_other_html_attributes(EE_Form_Input_Base $input) {
$input->set_html_other_attributes($input->html_other_attributes() . ' placeholder="' . $input->html_label_text() .'"."');
}
Still no luck on adding classes to the -input-dv wrapper, but progress has been made nevertheless
|
|
Tony
|
January 25, 2023 at 6:06 am
Hi there,
FHEE__EE_Form_Input_Base___construct__input_args allows you to filter the $input_args passed to the constructor. You can pass other_html_attributes with a string value within the array to set the placeholder through the constructor.
What you have above also works but note that set_html_other_attributes() has been deprecated in favour of set_other_html_attributes(). That code would also set the placeholder on every input.
You should also be able to set the classes used for the input using the above filter, setting classes within the html_class field, separate the classes using space and make sure the default class is last in the list.
|
|
TheFreshUK
|
January 25, 2023 at 9:18 am
Hi Tony,
My bad, I was meant to type set_other_html_attributes (note how the function is called theme_set_other_html_attributes to note what it’s using.
You should also be able to set the classes used for the input using the above filter, setting classes within the html_class field, separate the classes using space and make sure the default class is last in the list.
This is only for the input element though isn’t it?
What I’m after is the element that wraps the label and input elements, which usually ends up looking something like #ee_reg_qstn-111-12-input-dv. Ideally i’d like to control these classes here. adding our own additional ones.
|
|
Tony
|
January 25, 2023 at 11:37 am
This is only for the input element though isn’t it?
Do you mean the html_class option?
Sure but there’s a whole bunch of options for form inputs, it sounds like your need:
html_class, html_label_id and html_label_class
The example above is an ID (#ee_reg_qstn-111-12-input-dv) but you can set either.
|
|
TheFreshUK
|
January 25, 2023 at 1:28 pm
html_class does seem to work, but not quite what I’m after
<div id="ee_reg_qstn-112-12-input-dv" class="field-input-dv field--halfwidth-input-dv ee-text-input-dv">
<label id="ee_reg_qstn-112-12-lbl" class="ee-required-label ee-reg-qstn" for="ee_reg_qstn-112-12">First Name<span class="ee-asterisk">*</span></label>
<input type="text" name="ee_reg_qstn[112][12]" id="ee_reg_qstn-112-12" class="ee-required field field--halfwidth ee-needs-value" required="" value="" placeholder="First Name" aria-invalid="true">
<label id="ee_reg_qstn-112-12-error" class="ee-required-text" for="ee_reg_qstn-112-12">This field is required.</label>
</div>
If I was to change html_class<code>tofield
for example. The above is what I end up with.
the input changes to ee-required field field--halfwidth ee-needs-value
the wrapper div changes to field-input-dv field--halfwidth-input-dv ee-text-input-dv
That does give me a little more control, but ideally I’d want to just control the wrapper div, and only prepend classes to what’s already there (without it appending -input-dv to it) and leave the input classes alone.
I appreciate that this is just how things work, and I’ll find a workaround for it. But it’d be nice to have singular control of only adding additional css classes and perhaps allowing these to be added on the question model itself so these kind of filters aren’t necessary.
Alas, you have led me to water again. I shall drink!
|
