Text Color in Dropdown Select List in Editor Form?

hamlet1964 · August 2020

I'm trying to figure out how to change the default text color (black) that appears in an Editor Form dropdown list. Does anyone have any ideas?

Here's some CSS I've used to successfully change the form's input controls (but not the dropdown list):

div.DTE_Field_Input input {
    border: solid 1px #035096;
    color: #035096;
}
div.DTE_Field_InputControl select {
    border: solid 1px #035096;
    color: #035096;
}

And here's the JS referencing the specific field:

$(document).ready(function() {
    editor = new $.fn.dataTable.Editor( {
        ajax: "controllers/upload-many.php",
        table: "#example",
        fields: [ {
                label: "category",
                name: "stuff.category",
                type: "select"
            },

Thanks in advance.

rf1234 · August 2020

Have you tried this?

div.DTE_Field_InputControl select option {
    border: solid 1px #035096;
    color: #035096;
}

Also see here: https://stackoverflow.com/questions/12836227/change-select-box-option-background-color

hamlet1964 · August 2020

Thanks for the feedback. Unfortunately, the text color for the dropdown options remains black, despite these changes.

rf1234 · August 2020

How are you using your CSS? Inside an event handler? I guess that would be required. I am doing certain Editor form manipulations myself as well. I always do them on "open" which works fine.
https://editor.datatables.net/reference/event/open

hamlet1964 · August 2020

Thanks for sharing. The CSS is defined, in the example I provided, in the style section of my code at the very beginning.

rf1234 · August 2020

That might not work because the DOM elements your CSS tries to manipulate might not exist at the time of code execution. Again, I would use an event. On “open“ or on “opened“ should work.

hamlet1964 · August 2020

Since I'm a newbie, would it be possible to provide a snippet?

rf1234 · August 2020

Well, there is example code in the event reference documentation ... but here is more:

This shows you what you can do with events such as "opened" or "open"

editor
    .on('opened', function ( e, type, action ) {
        if ( action === "create") {
            //the first element cannot be one with its rate estimated!
            if ( table.rows().count() == 0 ) {
                this.set ( {"variable.rate_spread_estimated": 0} )
                    .hide( ["variable.rate_spread_estimated"] );
            } else {
                this.show( ["variable.rate_spread_estimated"] );
            }
        } else if ( action === "edit") {
            //the first element cannot be one with its rate estimated!
            if ( table.row({selected:true}).index() == 0 ) {
                this.set ( {"variable.rate_spread_estimated": 0} )
                    .hide( ["variable.rate_spread_estimated"] );
            } else {
                this.show( ["variable.rate_spread_estimated"] );
            }
        }
    })

Your case is a lot easier:

editor
    .on('opened', function ( e, type, action ) {
        div.DTE_Field_InputControl select option {
           color: #035096;
        }
    })

hamlet1964 · August 2020

Thanks. When I insert that I get an error message, however.

Uncaught SyntaxError: Unexpected identifier

rf1234 · August 2020

Post a test case as per the forum rules please. Alternatively post your entire javascript code.

Is your Editor called "editor"? If not you need to call it the way your Editor is called when using the event handler.

hamlet1964 · August 2020

Here's the script. Thanks for your patience!

    <script type="text/javascript" language="javascript" class="init">
    
var editor; // use a global for the submit and return data rendering in the examples
 
$(document).ready(function() {
    editor = new $.fn.dataTable.Editor( {
        ajax: "controllers/upload-many.php",
        table: "#example",
        fields: [ {
                label: "category",
                name: "stuff.category",
                type: "select"
            }, {
                label: "person:",
                name: "stuff.person",
                type: "select"
            }, {
                label: "notes:",
                name: "stuff.notes"
            }, {
                label: "files:",
                name: "files[].id",
                type: "uploadMany",
                display: function ( fileId, counter ) 
                {
                    if (fileId !== null) {
                    var ext = editor.file('files', fileId).filetype.toLowerCase();
                    if (ext == "pdf") {
                        return '<a href ="' + editor.file('files', fileId).web_path + '"i class ="fas fa-file-pdf fa-5x"></i>' + '</a>';
                        }
                        
                    if (ext == 'heic') {
                        return '<a href ="' + editor.file('files', fileId).web_path + '"i class ="fas fa-file-image fa-5x"></i>' + '</a>';
                    }   
                    
                    if ((ext == "png") || (ext == "jpg") || (ext == "jpeg") || (ext == "gif")) {
                    
                    return fileId ?
                        '<img src="'+editor.file( 'files', fileId ).web_path+'" class="img-circle" width="60" height="60"/>' :
                        null;
                }
                }},
                clearText: "Clear",
                noFileText: 'No images' 
            },
                 {
                label: "date:",
                name: "stuff.date",
                type: "datetime",
                def:   function () { return new Date();
                }
            }
        ]
    } );
editor
    .on('opened', function ( e, type, action ) {
        div.DTE_Field_InputControl select option {
           color: #035096;
        }
    });


 function format ( d ) {
     var rows = '';
     var i;
     var ext1;
   for ( i=0 ; i<(d.files.length) ; i++ ) { 
      ext1 = editor.file('files', id=d.files[i].id).filetype.toLowerCase(); 
       if (ext1 =="pdf") {
           rows = rows + '<tr>'+
            '<a style="padding-left:50px;vertical-align:middle" href ="' + editor.file('files', id=d.files[i].id).web_path + '" target=_blank><i class ="fas fa-file-pdf fa-5x"></i>' + '</a>' + '   File:  ' + editor.file('files', id=d.files[i].id).web_path +
        '<br><br></tr>';
       }
       if (ext1 =="heic") {
           rows = rows + '<tr>'+
            '<a style="padding-left:50px;vertical-align:middle" href ="' + editor.file('files', id=d.files[i].id).web_path + '" target=_blank><i class ="fas fa-file-image fa-5x"></i>' + '</a>' + '   File:  ' + editor.file('files', id=d.files[i].id).web_path +
        '<br><br></tr>';
       }
       if ((ext1 == "png") || (ext1 == "jpg") || (ext1 == "jpeg") || (ext1 == "gif")) {
                     rows = rows + '<tr>'+
                        '<img style="padding-left:50px;vertical-align:middle" src="'+editor.file( 'files', id=d.files[i].id ).web_path+'" class="img-circle" width="60" height="60"/>' + '   File:  ' + editor.file('files', id=d.files[i].id).web_path +  
        '<br><br></tr>';
                }
     }
    return ('<table cellpadding="5" cellspacing="0" border="0">' +
    rows +
    '</table>');
}
    
    var table = $('#example').DataTable( {
        scrollY:        '60vh',
        scrollCollapse: true,
        paging:         false,
        select: { style: 'single',
                         selector: 'td:not(:first-child)'
                        },
        responsive: { 
            "details": {
                        "type": 'column',
                        "target": 'tr'
        }
        },
        dom: "Bfrtip",
        order: [ 1, 'desc' ],
        ajax: "controllers/upload-many.php",
        columns: [
             {
                "className":      'details-control',
                "orderable":      false,
                "data":           null,
                "defaultContent": '',
                "render": function () {
                    return '<i class="fa fa-plus-square" aria-hidden="true"></i>';
                        },
                    width: "15px"
            },
            { "className": "dt-right", width: "60px", data: "stuff.date" },
            { "className": "dt-right", data: "persons.person" },
            { "className": "dt-right", data: "categories.category" },
            { "className": "dt-right", data: "stuff.notes" },
            {
                "className": "dt-right", data: "files[].id",
                render: function ( d ) {
                    return d.length ?
                        d.length+' image(s)' :
                        'No image';
                },
                title: "document"
            }
        ],
        select: true,
        buttons: [
            { extend: "create", editor: editor },
            { extend: "edit",   editor: editor },
            { extend: "remove", editor: editor,
                formMessage: function ( e, dt ) {
                    var rows = dt.rows( e.modifier() ).data().pluck('notes');
                    return 'Are you sure you want to delete the entries for the '+
                        'following record(s)? <ul><li>'+rows.join('</li><li>')+'</li></ul>';
                } 
            }
        ],
        
            initComplete: function () {
                // Add event listener for opening and closing details
                $('#example tbody').on('click', 'td.details-control', function () {
                    var tr = $(this).closest('tr');
                    var tdi = tr.find("i.fa");
                    var row = table.row(tr);

                    if (row.child.isShown()) {
                        // This row is already open - close it
                        row.child.hide();
                        tr.removeClass('shown');
                        tdi.first().removeClass('fa-minus-square');
                        tdi.first().addClass('fa-plus-square');
                    }
                    else {
                        // Open this row
                        row.child(format(row.data())).show();
                        tr.addClass('shown');
                        tdi.first().removeClass('fa-plus-square');
                        tdi.first().addClass('fa-minus-square');
                    }         
    } );
}
    } );
 $('#example').on("user-select", function (e, dt, type, cell, originalEvent) {
          if ($(cell.node()).hasClass("details-control")) {
                e.preventDefault();
            }
        });
} );
    </script>

rf1234 · August 2020

... and the full error message please ...

hamlet1964 · August 2020

file_cabinet.html:61 Uncaught SyntaxError: Unexpected identifier

hamlet1964 · August 2020

rf1234 · August 2020

Ok, that's a CSS problem ... I would use your browser's inspector and stack overflow to resolve this. You should find something there quickly for sure. That's how I am doing it anyway for stuff I don't really care about ... CSS is certainly none of my favorite topics ...

Since you are a newbie let me share my experience as a not so long ago newbie:
Why am I using JavaScript and jQuery, Data Tables, MySQL and PHP? Simple: All of the four still are the most popular platforms / tools for front end programming, tables with dynamic content, relational database and server processing! And you can resolve any issue by simple googling, using SO or this forum! That's why I refrained from using other, more “modern“ technologies when I got restarted with coding in 2016. When you are on your own this is the most important thing to bear in mind in my humble opinion: where can I find a solution when I am stuck and can I do it quickly without waiting for an answer ... I think I never asked a question on SO, but found the answers to many of my questions and responded to many ...

hamlet1964 · August 2020

Many thanks for the feedback, much appreciated. I'll keep investigating!

Text Color in Dropdown Select List in Editor Form?

Text Color in Dropdown Select List in Editor Form?

Answers

Howdy, Stranger!

Categories

DataTables

Text Color in Dropdown Select List in Editor Form?

Text Color in Dropdown Select List in Editor Form?

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables