Text Color in Dropdown Select List in Editor Form?

Text Color in Dropdown Select List in Editor Form?

hamlet1964hamlet1964 Posts: 43Questions: 8Answers: 1

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.

Answers

  • rf1234rf1234 Posts: 2,801Questions: 85Answers: 406

    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

  • hamlet1964hamlet1964 Posts: 43Questions: 8Answers: 1

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

  • rf1234rf1234 Posts: 2,801Questions: 85Answers: 406

    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

  • hamlet1964hamlet1964 Posts: 43Questions: 8Answers: 1

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

  • rf1234rf1234 Posts: 2,801Questions: 85Answers: 406
    edited 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.

  • hamlet1964hamlet1964 Posts: 43Questions: 8Answers: 1

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

  • rf1234rf1234 Posts: 2,801Questions: 85Answers: 406

    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;
            }
        })
    
  • hamlet1964hamlet1964 Posts: 43Questions: 8Answers: 1

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

    Uncaught SyntaxError: Unexpected identifier

  • rf1234rf1234 Posts: 2,801Questions: 85Answers: 406

    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.

  • hamlet1964hamlet1964 Posts: 43Questions: 8Answers: 1

    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>
    
    
  • rf1234rf1234 Posts: 2,801Questions: 85Answers: 406

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

  • hamlet1964hamlet1964 Posts: 43Questions: 8Answers: 1

    file_cabinet.html:61 Uncaught SyntaxError: Unexpected identifier

  • hamlet1964hamlet1964 Posts: 43Questions: 8Answers: 1

  • rf1234rf1234 Posts: 2,801Questions: 85Answers: 406
    edited 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 ...

  • hamlet1964hamlet1964 Posts: 43Questions: 8Answers: 1

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

This discussion has been closed.