Search code examples
jquerytwitter-bootstrapdatatables

DataTable Fixed Column with Bootstrap's dropdown

I use DataTable with Fixed Columns extension and styling with Bootstrap. The columns I set up as fixed contain Bootstrap's dropdown elements. The problem is when I click on the dropdown element, my fixed column show the scroll bars or sometimes overflow were hidden as

enter image description here

Below is the code for initialization of my dataTable

var oTable = $('table').dataTable( {
bFilter : false,
ordering: false,
    sScrollX: "100%",
fixedColumns : {
    leftColumns : 0,
    rightColumns : 1
},
pagingType : "full_numbers",
"sDom" : '<"top">rt<"bottom"ifp><"clear">',
} );

Here is the JS Fiddle Link. Has someone experience with this or how can I fix this ? Thanks.

Solution

  • You need to append the dropmenu to body and some css to hide the fixed column overflow.

    You can tweak the code as per your need.

    Check Working Demo HERE

    CSS:

    .DTFC_RightBodyLiner {
  overflow: hidden!important;
}

    JS:

    $(document).ready(function() {
  var oTable = $('table').dataTable({
    bFilter: false,
    ordering: false,
    sScrollX: "100%",
    fixedColumns: {
      leftColumns: 0,
      rightColumns: 1
    },
    pagingType: "full_numbers",
    "sDom": '<"top">rt<"bottom"ifp><"clear">',
  });

  $('.btn').click(function() {
    dropmenuPostion();
  })

  function dropmenuPostion() {
    // hold onto the drop down menu                                             
    var dropdownMenu;

    // and when you show it, move it to the body                                     
    $(window).on('show.bs.dropdown', function(e) {

      // grab the menu        
      dropdownMenu = $(e.target).find('.dropdown-menu');

      // detach it and append it to the body
      $('body').append(dropdownMenu.detach());

      // grab the new offset position
      var eOffset = $(e.target).offset();

      // make sure to place it where it would normally go (this could be improved)
      dropdownMenu.css({
        'display': 'block',
        'top': eOffset.top + $(e.target).outerHeight(),
        'left': eOffset.left - 50
      });
    });

    // and when you hide it, reattach the drop down, and hide it normally                                                   
    $(window).on('hide.bs.dropdown', function(e) {
      $(e.target).append(dropdownMenu.detach());
      dropdownMenu.hide();
    });
  }

});