DataTable Fixed Column with Bootstrap's dropdo

Question

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

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 1

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

});

Answer 2

It seems there's no way to expand a width of column according to dropdown width using pure CSS or bootstrap. I think you can make it wider just setting a column fixed width like this:

      "columnDefs": [
    { "width": "160px", "targets": 6 }
  ],

Also you can make button as wide as column is by adding class btn-block :

<button class="btn btn-primary dropdown-toggle btn-block"...