El menú desplegable de Bootstrap oculto por datos
Estoy utilizando Twitter Bootstrap para crear un botón con un menú DropDown para cada fila en una cuadrícula de DataTables, pero el contenedor de datos de DataTables está usando "overflow: hidden" lo que hace que se corte DropDown.
No puedo simplemente cambiar a "overflow: auto" ya que esto hará que aparezca una barra de desplazamiento vertical innecesaria.
Aquí hay unJSFiddle
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="#">← ' + oLang.sPrevious + '</a></li>' +
'<li class="next disabled"><a href="#">' + oLang.sNext + ' → </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();
});