3

I've disable chosen.js so that all my <select> tags are plain HTML, but am so far unable to change the default class of inputbox to one of my choosing, (specificially from the Search Tools filters of my component page).

I've looked at a number of answers and tutorials about overriding forms, but I'm either not understanding the examples, or looking at the wrong kind of overrides.

Ultimately, I want to change the class of any <select> that is generated in libraries\cms\html\select.php. I've tried adding the path/file to my template, but can't get that to do it. I see that it's generating the field with $options as below, but I can't figure where THAT is being determined and supplied.

$options Array (
    [format.depth] => 0
    [format.eol] => 

    [format.indent] =>  
    [id] => filter_event_group_id
    [list.attr] => class="inputbox" onchange="this.form.submit()"
    [list.translate] => 
    [option.key] => value
    [option.text] => text
    [list.select] => 
)

My attempts at specifying it in the XML at List form field type are failing as well - the page just comes up blank, though that was a shot in the dark because my field is actually a SQL Form Field Type which apparently does NOT support the Class parameter like the Select does.

<field name="created_by" class="MyChosenClassname" type="sql"...`

So, the question is either how do I add this override to my template properly, or how do I specify the Class name to be used in the generated <select> tags?

0

You should just be able to add the class attribute to the XML field, like so:

<field name="foo" class="MYCLASS" type="list" label="My List">
    <option value="0">Option 1</option>
    <option value="1">Option 2</option>
</field>
  • For a <select> field, tat will will work, but not for a SQL field type. – GDP Mar 16 '18 at 12:27
0

I find it easier to add a custom class using jQuery.

just put this javascript code snippet in the head section of your template, the majority of template/frameworks providers supports custom javascript code to be added easily.

$(document).ready(function(){ 
    $('select').addClass('custom_class'); 
});

Your Answer

By clicking "Post Your Answer", you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.