La liste déroulante de Bootstrap est cachée par les données

Question

J'utilise Twitter Bootstrap pour créer un bouton avec un menu DropDown pour chaque ligne d'une grille DataTables, mais le conteneur de données de DataTables utilise "overflow: hidden" ce qui fait que DropDown est Couper.

Je ne peux pas simplement passer à "débordement: auto" car cela entraînera l'apparition d'une barre de défilement verticale inutile.

Voici un 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, après les commentaires que nous avions, je réalisai ce que vous voulez:

Vous avez un <div> élément avec overflow:auto, et vous wan t qu'un élément à l'intérieur de <div> (le <ul> où se trouve le menu), à "escape" à partir de la règle de dépassement de capacité et apparaît flottant, remplaçant la règle de dépassement de capacité de son ancêtre.

Mais je crains que ce soit pas possible. La chose la plus proche que vous pourriez faire est:

• Utilisez javascript pour créer le <ul> avec le menu en dehors la <div> avec overflow:auto, et utiliser ensuite la position absolue pour le mettre où il doit aller, ou
• Utilisez javascript pour faire défiler automatiquement vers le bas une fois que le menu déroulant est activé, en ajoutant quelque chose comme un écouteur d'événement à la dernière liste déroulante.

La deuxième option semble plus élégante et moins «hackish». (Personnellement, je voudrais juste ignorer ce problème, mais si je dois choisir, je pencherais pour la deuxième option)

Answer 2

Remplacer DataTable règle css pour le sélecteur .dataTables_scrollHead a fonctionné pour moi

.dataTables_scrollHead{ 
    position: static !important; 
} 

Answer 3

Je suis la même problème ! Résolu suppression de propriétés de débordement dans component.css

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

ou ajouter à votre custom.css (appelé après amorçage)

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