Responsive jQuery modal config options

jh_dempsey

Hi All

I am trying to set some options/properties to control how the modal window looks when the "Responsive" extention displays a modal window to show my hidden data.

The manual says I can set these options by providing "An object of dialog configuration control options as defined by the jQuery UI library."
https://datatables.net/reference/option/responsive.details.display

So I have tried to do this as you can see in the below code, but it doesn't seem to work (as you can see I tried to set width and height by providing a simple number and also as a "pixel" width but neither worked)

responsive: {
            details: {
                type: 'column',
                target: 'tr',
                display: $.fn.dataTable.Responsive.display.modal( {
                    header: function ( row ) {
                        var data = row.data();
                        return 'Details for '+data.clash_group_name;
                    },
                    modal: {
                        width: 100,
                        height: '400px',
                        draggable: true
                    },
                }),

                renderer: function ( api, rowIdx, columns ) {
                    var data = $.map( columns, function ( col, i ) {
                        return '<tr class=\"modal_row\">'+
                                '<td id=\"modal_'+col.title+'\">'+col.title+':'+'</td> '+
                                '<td>'+col.data+'</td>'+
                            '</tr>';
                    } ).join('');
 
                    data = data + '<tr><td>RowID</td><td id=\"modal_rowIdx\">'+rowIdx+'</td></tr>'
                    + '<tr><td>Approved?</td><td><form action=\"#\"><input type=\"checkbox\" id=\"approved_chkbox\"';
                    if ( resultTable.cell(rowIdx,14).data() == "1") { data = data + " checked"; }
                    data = data + '></form></td></tr>'
                    + '<tr><td>Message</td><td id="ischecked"></td></tr>';
                    
                    return $('<table/>').append( data );
                }
            }
        },

Below is all the javascript and css files that are included on my page

    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css"/>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/dataTables.jqueryui.min.css"/>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.1.1/css/responsive.jqueryui.min.css"/>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.2.2/css/select.jqueryui.min.css"/>
    <link rel="stylesheet" type="text/css" href="clash_tracker.css"/>
     
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.15/js/dataTables.jqueryui.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/responsive/2.1.1/js/dataTables.responsive.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/responsive/2.1.1/js/responsive.jqueryui.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/select/1.2.2/js/dataTables.select.min.js"></script>

    <!-- Yet another data column filter (yacdf) makes creating the filters easier -->
    <link type="text/css" rel="stylesheet" href="yadcf-0.9.1/jquery.datatables.yadcf.css" />
    <script src="yadcf-0.9.1/jquery.dataTables.yadcf.js"></script>

Any ideas why I'm struggling to set the options?

PS - Could an example of this be provided in the documentation? Its the only bit of the display function that doesn't have an example written for it.

bindrid

@Allan, this may be another case where ver 1.10.15 is being used but the link is to ver 2.0.0