Cataclysm Cataclysm - 7 days ago 5
jQuery Question

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.

Answer

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();
    });
  }

});