Jump to content

Add a CSS class to an inputField on render


Recommended Posts

Another question... I'm working on a module that uses hooks to modify an existing inputField and I would like to add a class to the final output of the inputField based on some logic. I'm having a hard time figuring out where the CSS classes are generated and whether this is even possible with hooks.

Link to comment
Share on other sites

That does not work as the whole wrapping markup is build by InputfieldWrapper::render which does not differentiate by the inputfield that will be rendered in it. The wrapper classes can only be changed for the whole form. But as you're using javascript you can simply go back from the inputfield itself to the wrapping <li>. To change the class for the input itself you'd need to hook before InputfieldSomething::render and use this:

$field = $event->object;
$field->attr("class" , $field->attr("class") . " myclass"); 
Link to comment
Share on other sites

Thanks for the suggestions. I just discovered addClass() while looking through the code in Inputfield.php.

Unfortunately neither is working. The particular Inputfield I'm trying to work with is InputfieldPage. I'm wondering if the problem is that this is a sort of "hybrid" inputfield? It doesn't seem to use the attributes in its render() function at all, as far as I can tell.

EDIT: I'm now trying to hook after InputfieldPage::getInputfield to see if that will work. Still no luck.

public function init() {
    $this->addHookAfter('InputfieldPage::getInputfield', $this, 'hookAddCssClass');
}

public function hookAddCssClass(HookEvent $event) {
		
		$inputfield = $event->return;
		$inputfield->addClass('myClassName');
		$event->return = $inputfield; 
	}
  • Like 1
Link to comment
Share on other sites

This works for me:

public function init() {
    $this->addHookBefore('InputfieldPage::render', $this, 'hookAddCssClass');
}

public function hookAddCssClass(HookEvent $event) {
    $inputfield = $event->object;
    $inputfield->addClass('myClassName');
    $event->return = $inputfield;
}
  • Like 2
Link to comment
Share on other sites

Strange. That doesn't work for me. I thought only After hooks could read/modify the return value?

EDIT: Echoing out the contents of $inputfield->attr('class') gives me "FieldtypePage required myClassName" but none of those classes appear in the markup on processPageEdit.

Link to comment
Share on other sites

Weird that my posted code doesn't work for you. How exactly are you using it? What's the rest of your module code? Is it extending WireData?

You could also try it like this in your admin.php file.

wire()->addHookBefore('InputfieldPage::render', function($event) {
    $inputfield = $event->object;
    $inputfield->addClass('myClassName');
    $event->return = $inputfield;
});
  • Like 1
Link to comment
Share on other sites

Adrian,

If I hook into InputfieldSelect::render instead of InputfieldPage::render then your code works (but of course that's not what I want).

The module is extending WireData and I've commented out all my other hooks to make sure nothing else might be causing the problem.

I just uninstalled my module and tested your code in admin.php. No luck  :(

Link to comment
Share on other sites

I honestly have no idea at this point. I am running a clean install (no other modules) of 2.5.23 (from yesterday's commits).

You are having some interesting hook issues lately, which that code from your other post yesterday working when it seems it shouldn't have and now this :)

Would you mind trying on a clean install?

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...