editor field className

editor field className

Scott BowersScott Bowers Posts: 13Questions: 2Answers: 0

I am trying to add a class to the select element when inline editing. The class gets added at the wrong level, it isn't on the select, but on the top level so the dropdown is showing up with the wrong style. Any ideas on how to get that to add tot he <select> element?

I have tried adding it to the keys in the datatable and the fields definition in the editor options. The class gets added, always in the wrong place, the class needs added to the select element and for some reason it is rendering with "form-control" instead.

this adds the class to the element;

<div class="DTE_Field DTE_Field_Type_select DTE_Field_Name_code form-control-sm">   
    <div data-dte-e="input" class="col-lg-8 controls">
        <div data-dte-e="input-control" class="DTE_Field_InputControl" style="display: block;">
               <select id="DTE_Field_cropCode" class="form-control">
fields: [                        
                        {
                            name: "code",
                            type: "select",
                            className:"form-control-sm"
                        }

this add the class to the td element

keys: {
                        editor: editor,
                        editOnFocus: true,
                        columns:[1,2,3,4,6,7,8],
                        className:"form-control-sm"
                    },

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 61,450Questions: 1Answers: 10,055 Site admin
    Answer ✓

    The field().input() method can be used to get it - e.g.:

    editor.field('code').input().addClass('form-control-sm');
    

    Add that immediately after the Editor initialisation and that will do the trick.

    Allan

  • Scott BowersScott Bowers Posts: 13Questions: 2Answers: 0

    Bingo. Thank you Allan. I actually needed it on all fields, so I added this:

    _.forEach(this.editor.fields(), function(fieldName){
               this.editor.field(fieldName).input().addClass('form-control-sm')
        },this)
    
This discussion has been closed.