Выпадающий список Bootstrap, скрытый данными datatables

Question

Я использую Twitter Bootstrap для создания кнопки с меню DropDown для каждой строки в сетке DataTables, но контейнер данных из DataTables использует «overflow: hidden», что делает DropDown порез.

Я не могу просто переключиться на «переполнение: авто», так как это приведет к появлению ненужной вертикальной полосы прокрутки.

Вот это JSFiddle

HTML

<table cellpadding="0" cellspacing="0" border="0" class="pretty" id="example"></table> 

JS

/* API method to get paging information */ 
$.fn.dataTableExt.oApi.fnPagingInfo = function (oSettings) { 
    return { 
     "iStart": oSettings._iDisplayStart, 
      "iEnd": oSettings.fnDisplayEnd(), 
      "iLength": oSettings._iDisplayLength, 
      "iTotal": oSettings.fnRecordsTotal(), 
      "iFilteredTotal": oSettings.fnRecordsDisplay(), 
      "iPage": oSettings._iDisplayLength === -1 ? 0 : Math.ceil(oSettings._iDisplayStart/oSettings._iDisplayLength), 
      "iTotalPages": oSettings._iDisplayLength === -1 ? 0 : Math.ceil(oSettings.fnRecordsDisplay()/oSettings._iDisplayLength) 
    }; 
} 

/* Bootstrap style pagination control */ 
$.extend($.fn.dataTableExt.oPagination, { 
    "bootstrap": { 
     "fnInit": function (oSettings, nPaging, fnDraw) { 
      var oLang = oSettings.oLanguage.oPaginate; 
      var fnClickHandler = function (e) { 
       e.preventDefault(); 
       if (oSettings.oApi._fnPageChange(oSettings, e.data.action)) { 
        fnDraw(oSettings); 
       } 
      }; 

      $(nPaging).addClass('pagination').append(
       '<ul>' + 
       '<li class="prev disabled"><a href="#">&larr; ' + oLang.sPrevious + '</a></li>' + 
       '<li class="next disabled"><a href="#">' + oLang.sNext + ' &rarr; </a></li>' + 
       '</ul>'); 
      var els = $('a', nPaging); 
      $(els[0]).bind('click.DT', { 
       action: "previous" 
      }, fnClickHandler); 
      $(els[1]).bind('click.DT', { 
       action: "next" 
      }, fnClickHandler); 
     }, 

      "fnUpdate": function (oSettings, fnDraw) { 
      var iListLength = 5; 
      var oPaging = oSettings.oInstance.fnPagingInfo(); 
      var an = oSettings.aanFeatures.p; 
      var i, j, sClass, iStart, iEnd, iHalf = Math.floor(iListLength/2); 

      if (oPaging.iTotalPages < iListLength) { 
       iStart = 1; 
       iEnd = oPaging.iTotalPages; 
      } else if (oPaging.iPage <= iHalf) { 
       iStart = 1; 
       iEnd = iListLength; 
      } else if (oPaging.iPage >= (oPaging.iTotalPages - iHalf)) { 
       iStart = oPaging.iTotalPages - iListLength + 1; 
       iEnd = oPaging.iTotalPages; 
      } else { 
       iStart = oPaging.iPage - iHalf + 1; 
       iEnd = iStart + iListLength - 1; 
      } 

      for (i = 0, iLen = an.length; i < iLen; i++) { 
       // Remove the middle elements 
       $('li:gt(0)', an[i]).filter(':not(:last)').remove(); 

       // Add the new list items and their event handlers 
       for (j = iStart; j <= iEnd; j++) { 
        sClass = (j == oPaging.iPage + 1) ? 'class="active"' : ''; 
        $('<li ' + sClass + '><a href="#">' + j + '</a></li>') 
         .insertBefore($('li:last', an[i])[0]) 
         .bind('click', function (e) { 
         e.preventDefault(); 
         oSettings._iDisplayStart = (parseInt($('a', this).text(), 10) - 1) * oPaging.iLength; 
         fnDraw(oSettings); 
        }); 
       } 

       // Add/remove disabled classes from the static elements 
       if (oPaging.iPage === 0) { 
        $('li:first', an[i]).addClass('disabled'); 
       } else { 
        $('li:first', an[i]).removeClass('disabled'); 
       } 

       if (oPaging.iPage === oPaging.iTotalPages - 1 || oPaging.iTotalPages === 0) { 
        $('li:last', an[i]).addClass('disabled'); 
       } else { 
        $('li:last', an[i]).removeClass('disabled'); 
       } 
      } 
     } 
    } 
}); 

/* Table initialisation */ 
$(document).ready(function() { 
    $('#example').dataTable({ 
     "aaData": [ 
     /* Reduced data set */ ['<div class="btn-group" style="float: left">' + 
           '<a class="btn btn-small dropdown-toggle" data-toggle="dropdown" href="#">Actions' + 
            '<span class="caret"></span>' + 
           '</a>' + 
           '<ul class="dropdown-menu">' + 
            '<li><a href="#">Approve</a></li>' + 
            '<li><a href="#">View</a></li>' + 
           '</ul>' + 
          '</div>' + 
          '<a href="#" id="editButton" class="btn btn-small"><i class="icon-pencil"></i></a>' + 
          '<a href="#" class="btn btn-small deleteButton"><i class="icon-trash"></i></a>', "Internet Explorer 4.0", "Win 95+", 4, "X"], 
      ['<div class="btn-group" style="float: left">' + 
           '<a class="btn btn-small dropdown-toggle" data-toggle="dropdown" href="#">Actions' + 
            '<span class="caret"></span>' + 
           '</a>' + 
           '<ul class="dropdown-menu">' + 
            '<li><a href="#">Approve</a></li>' + 
            '<li><a href="#">View</a></li>' + 
           '</ul>' + 
          '</div>' + 
          '<a href="#" id="editButton" class="btn btn-small"><i class="icon-pencil"></i></a>' + 
          '<a href="#" class="btn btn-small deleteButton"><i class="icon-trash"></i></a>', "Internet Explorer 5.0", "Win 95+", 5, "C"], 
      ['<div class="btn-group" style="float: left">' + 
           '<a class="btn btn-small dropdown-toggle" data-toggle="dropdown" href="#">Actions' + 
            '<span class="caret"></span>' + 
           '</a>' + 
           '<ul class="dropdown-menu">' + 
            '<li><a href="#">Approve</a></li>' + 
            '<li><a href="#">View</a></li>' + 
           '</ul>' + 
          '</div>' + 
          '<a href="#" id="editButton" class="btn btn-small"><i class="icon-pencil"></i></a>' + 
          '<a href="#" class="btn btn-small deleteButton"><i class="icon-trash"></i></a>', "Internet Explorer 5.5", "Win 95+", 5.5, "A"], 
      ['<div class="btn-group" style="float: left">' + 
           '<a class="btn btn-small dropdown-toggle" data-toggle="dropdown" href="#">Actions' + 
            '<span class="caret"></span>' + 
           '</a>' + 
           '<ul class="dropdown-menu">' + 
            '<li><a href="#">Approve</a></li>' + 
            '<li><a href="#">View</a></li>' + 
           '</ul>' + 
          '</div>' + 
          '<a href="#" id="editButton" class="btn btn-small"><i class="icon-pencil"></i></a>' + 
          '<a href="#" class="btn btn-small deleteButton"><i class="icon-trash"></i></a>', "Internet Explorer 6.0", "Win 98+", 6, "A"], 
      ['<div class="btn-group" style="float: left">' + 
           '<a class="btn btn-small dropdown-toggle" data-toggle="dropdown" href="#">Actions' + 
            '<span class="caret"></span>' + 
           '</a>' + 
           '<ul class="dropdown-menu">' + 
            '<li><a href="#">Approve</a></li>' + 
            '<li><a href="#">View</a></li>' + 
           '</ul>' + 
          '</div>' + 
          '<a href="#" id="editButton" class="btn btn-small"><i class="icon-pencil"></i></a>' + 
          '<a href="#" class="btn btn-small deleteButton"><i class="icon-trash"></i></a>', "Internet Explorer 7.0", "Win XP SP2+", 7, "A"], 
      ['<div class="btn-group" style="float: left">' + 
           '<a class="btn btn-small dropdown-toggle" data-toggle="dropdown" href="#">Actions' + 
            '<span class="caret"></span>' + 
           '</a>' + 
           '<ul class="dropdown-menu">' + 
            '<li><a href="#">Approve</a></li>' + 
            '<li><a href="#">View</a></li>' + 
           '</ul>' + 
          '</div>' + 
          '<a href="#" id="editButton" class="btn btn-small"><i class="icon-pencil"></i></a>' + 
          '<a href="#" class="btn btn-small deleteButton"><i class="icon-trash"></i></a>', "Firefox 1.5", "Win 98+/OSX.2+", 1.8, "A"], 
      ['<div class="btn-group" style="float: left">' + 
           '<a class="btn btn-small dropdown-toggle" data-toggle="dropdown" href="#">Actions' + 
            '<span class="caret"></span>' + 
           '</a>' + 
           '<ul class="dropdown-menu">' + 
            '<li><a href="#">Approve</a></li>' + 
            '<li><a href="#">View</a></li>' + 
           '</ul>' + 
          '</div>' + 
          '<a href="#" id="editButton" class="btn btn-small"><i class="icon-pencil"></i></a>' + 
          '<a href="#" class="btn btn-small deleteButton"><i class="icon-trash"></i></a>', "Firefox 2", "Win 98+/OSX.2+", 1.8, "A"], 
      ['<div class="btn-group" style="float: left">' + 
           '<a class="btn btn-small dropdown-toggle" data-toggle="dropdown" href="#">Actions' + 
            '<span class="caret"></span>' + 
           '</a>' + 
           '<ul class="dropdown-menu">' + 
            '<li><a href="#">Approve</a></li>' + 
            '<li><a href="#">View</a></li>' + 
           '</ul>' + 
          '</div>' + 
          '<a href="#" id="editButton" class="btn btn-small"><i class="icon-pencil"></i></a>' + 
          '<a href="#" class="btn btn-small deleteButton"><i class="icon-trash"></i></a>', "Firefox 3", "Win 2k+/OSX.3+", 1.9, "A"] 
     ], 
      "aoColumns": [{ 
      "sTitle": "Engine" 
     }, { 
      "sTitle": "Browser" 
     }, { 
      "sTitle": "Platform" 
     }, { 
      "sTitle": "Version", 
      "sClass": "center" 
     }, { 
      "sTitle": "Grade", 
      "sClass": "center" 
     }], 

      'sScrollX': "100%", 
      'sScrollXInner': "150%", 
      'bScrollCollapse': true, 
      'bAutoWidth': false, 
      'bDeferRender': true, 
      'bLengthChange': false, "sPaginationType": "bootstrap", 
      "oLanguage": { 
      "sLengthMenu": "_MENU_ records per page" 
     } 
    }); 
    $('.acoes').dropdown(); 
}); 

Answer 1

Ok, после того, как комментарии, которые мы имели, я понял, что вы хотите:

У вас есть <div> элемент с overflow:auto, и вы wan t, что элемент внутри этого <div> (<ul>, где находится меню), до «escape» из правила переполнения и появляются плавающие, переопределяя правило переполнения от его предка.

Но я боюсь, что это невозможно. Ближайший вещь, которую вы могли бы сделать, это:

• Использование Javascript для создания <ul> с меню вне<div> с overflow:auto, а затем использовать позицию абсолютного, чтобы установить его там, где он должен идти, или
• Использование Javascript для автоматического прокрутки внизу, когда выпадающее меню активировано, добавив что-то вроде прослушивателя событий к последнему выпадающему меню.

Второй вариант кажется более элегантным и менее «хакерским». (Лично я бы просто игнорировать эту проблему, но если я должен выбирать, я бы пойти на второй вариант)

Answer 2

Override DataTable правило CSS для селектора .dataTables_scrollHead работал для меня

.dataTables_scrollHead{ 
    position: static !important; 
} 

Answer 3

Я получил та же проблема ! Решено удаление свойства переполнения в component.css

.table-scrollable { 
    width: 100%; 
/* overflow-x: auto; 
    overflow-y: hidden;*/ 
    border: 1px solid #dddddd; 
    margin: 10px 0 !important; 
} 

Или добавьте к вашему custom.css (вызывается после начальной загрузки)

.table-scrollable { 
    overflow-x: visible; 
    overflow-y: visible; 
}