Horizontal alignment when having multiple childs

raduborcan

Hello
I've managed to finish the master-detail functionality, but I've noticed the lack of alignment control, meaning, each time I expand a detail set the header is moving to the right; more, the "scrollX" it appears to function opposite as described: if it is true, the header and the rows are static, although they are misaligned.
Please find below the code along with 2 files of data.

$(document).ready(function() {
    var table = $('#example').DataTable( {
      ajax: "alin@TS Locks_Master.txt"
      /*
      function (data, callback, settings) {
              $.ajax({
                url: "objects.txt",
              }).then ( function(json) {
                var data = JSON.parse(json);
                callback(data);            
              });
      }
      */,
      pageLength: 10,
      scrollX: "true",
      
        columns: [
            {
                "className":      'details-control',
                "orderable":      false,
                "data":           null,
                "defaultContent": ''
            },
                { data: 0 },
                { data: 1 },
                { data: 2 },
                { data: 3 },
                { data: 4 }
            ],
            
        initComplete: function () {
          init = false;
        },
          createdRow: function ( row, data, index ) {
            if (data[5] === '') {
              var td = $(row).find("td:first");
              td.removeClass( 'details-control' );
            }
           }
    } );
     
    // Add event listener for opening and closing first level childdetails
    $('#example tbody').on('click', 'td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = table.row( tr );
        var rowData = row.data();
        var index = rowData[5];
 
        if ( row.child.isShown() ) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');
        }
        else {
            // Open this row
            row.child( 
               '<table id = "child_details'+index+'" style="padding-left:50px;">'+
                   '<thead>'+
                        '<tr>'+
                            '<th>#</th>'+
                            '<th>CltId</th>'+
                            '<th>DocCode</th>'+
                            '<th>DocNo</th>'+
                            '<th>DocDate</th>'+
                            '<th>Value</th>'+
                        '</tr>'+
                    '</thead>'+
                    '<tbody></tbody>'+
                '</table>').show();
          
             $('#child_details'+index).DataTable({
                ajax: function (data, callback, settings) {
                  $.ajax({
                    url: "alin@TS Locks_Detail.txt"
                  }).then ( function(json) {
                    var data = JSON.parse(json);
                    data = data.data;
                    
                    var display = [];
                    for (d = 0; d < data.length; d++) {
                      if (data[d][5] == rowData[5]) {
                        display.push(data[d]);
                      }
                    }
                    callback({data: display});
                  });
                },
                //fixedHeader:{header: "true"},
                scrollX: 800,
                scrollCollapse: true,
                td: 'scope= "col"',
                columns: [
                    {
                        "className":      'details-control1',
                        "orderable":      false,
                        "data":           null,
                        "defaultContent": ''
                    },
                    { data: 0 },
                    { data: 1 },
                    { data: 2 },
                    { data: 3 },
                    { data: 4 }
                  ],
                columnDefs: [{ targets: [1] , visible: false}],
                destroy: true,
                scrollY: '200px',
            });
            tr.addClass('shown');
        }
    })
} );

colin

Hi @raduborcan ,

Thanks for those files, we're happy to take a look, but it would help, as per the forum rules, if you could link to a running test case showing the issue so we can offer some help. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

raduborcan

I've managed to put the JS code, CSS code and HTML code in http://live.datatables.net/sinotazi/1/edit, but I didn't find a way to upload the 2 files required for the test case, neither the place (I suppose is http://live.datatables.net/sinotazi/ajax)
Could you provide some more info please.

Thank you
Radu B.

colin

Hi @raduborcan ,

I think I've simulated it, you'll need to paste the attached file here into the JS section of your example above.

Cheers,

Colin

allan

Colin asked me to take a little look. Its because the inner table isn't taking 100% and scrolling is enabled. When you get that set of conditions the table header and body can look really odd.

Three options:

1. Add width: 100% to your inner table.
2. Disable scrolling for the inner table.
3. Create a div inside the child and put the table inside that - with it set to 100% width (and the div smaller if you want it smaller).

Allan

raduborcan

I've updated the JS section on http://live.datatables.net/sinotazi/3/edit
I've tested with all 3 possibilities, none appears to work (or I didn't understand what to do), the 2nd worsen the appearance.

Thank you
Radu B.

allan

This is it with option 1: http://live.datatables.net/sinotazi/4/edit .

Allan

raduborcan

Would you mind make a sample with the 3rd option,

Create a div inside the child and put the table inside that - with it set to 100% width (and the div smaller if you want it smaller).

Thank you

eef

Had something similar. The solution I used was (basically):

1. in the inserted details-div, create another div (or two if you need the space at the left of the detail-table).
2. with CSS define its 'left' by adding the 'right-margin' YOU want to the width of the inserted detail-table:

<div> <!-- this is the DataTable inserted div which is the 'child'-row of your selection-->
  <div id='your_self_made_details_container'>
    <table id="your_detail_table"> <!-- 910px arbitrary -->
    ...
   </table>
</div>

CSS:

div#your_self_made_details_container {
  position: relative:
  left: 1210px; /* 910px + 300px; /* if your right margin is 300px */
}

raduborcan

I've inserted the snippets, but it doesn't seem to work.
Please take a look at http://live.datatables.net/hujafixa/1/edit
BTW in the JS section is missing a DIV closure.

Thank you for your answer

allan

Option 3: http://live.datatables.net/sinotazi/7/edit