title: Bootstrap's dropdown hidden by datatables
body: <p>I'm using Twitter Bootstrap to create a button with a DropDown menu for each row in a DataTables grid, but the data container from DataTables is using "overflow: hidden" what is making the DropDown to be cut.</p>
  
  <p>I cannot just switch to "overflow: auto" as this will cause to appear an unnecessary vertical scrollbar.</p>
  
  <p>Here is a <a href="http://jsfiddle.net/julianonunes/Qa6y2/7/" rel="noreferrer">JSFiddle</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;table cellpadding="0" cellspacing="0" border="0" class="pretty" id="example"&gt;&lt;/table&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>/* 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(
                  '&lt;ul&gt;' +
                  '&lt;li class="prev disabled"&gt;&lt;a href="#"&gt;&amp;larr; ' + oLang.sPrevious + '&lt;/a&gt;&lt;/li&gt;' +
                  '&lt;li class="next disabled"&gt;&lt;a href="#"&gt;' + oLang.sNext + ' &amp;rarr; &lt;/a&gt;&lt;/li&gt;' +
                  '&lt;/ul&gt;');
              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 &lt; iListLength) {
                  iStart = 1;
                  iEnd = oPaging.iTotalPages;
              } else if (oPaging.iPage &lt;= iHalf) {
                  iStart = 1;
                  iEnd = iListLength;
              } else if (oPaging.iPage &gt;= (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 &lt; 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 &lt;= iEnd; j++) {
                      sClass = (j == oPaging.iPage + 1) ? 'class="active"' : '';
                      $('&lt;li ' + sClass + '&gt;&lt;a href="#"&gt;' + j + '&lt;/a&gt;&lt;/li&gt;')
                          .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 */ ['&lt;div class="btn-group" style="float: left"&gt;' +
                                  '&lt;a class="btn btn-small dropdown-toggle" data-toggle="dropdown" href="#"&gt;Actions' +
                                      '&lt;span class="caret"&gt;&lt;/span&gt;' +
                                  '&lt;/a&gt;' +
                                  '&lt;ul class="dropdown-menu"&gt;' +
                                      '&lt;li&gt;&lt;a href="#"&gt;Approve&lt;/a&gt;&lt;/li&gt;' +
                                      '&lt;li&gt;&lt;a href="#"&gt;View&lt;/a&gt;&lt;/li&gt;' +
                                  '&lt;/ul&gt;' +
                              '&lt;/div&gt;' +
                              '&lt;a href="#" id="editButton" class="btn btn-small"&gt;&lt;i class="icon-pencil"&gt;&lt;/i&gt;&lt;/a&gt;' +
                              '&lt;a href="#" class="btn btn-small deleteButton"&gt;&lt;i class="icon-trash"&gt;&lt;/i&gt;&lt;/a&gt;', "Internet Explorer 4.0", "Win 95+", 4, "X"],
              ['&lt;div class="btn-group" style="float: left"&gt;' +
                                  '&lt;a class="btn btn-small dropdown-toggle" data-toggle="dropdown" href="#"&gt;Actions' +
                                      '&lt;span class="caret"&gt;&lt;/span&gt;' +
                                  '&lt;/a&gt;' +
                                  '&lt;ul class="dropdown-menu"&gt;' +
                                      '&lt;li&gt;&lt;a href="#"&gt;Approve&lt;/a&gt;&lt;/li&gt;' +
                                      '&lt;li&gt;&lt;a href="#"&gt;View&lt;/a&gt;&lt;/li&gt;' +
                                  '&lt;/ul&gt;' +
                              '&lt;/div&gt;' +
                              '&lt;a href="#" id="editButton" class="btn btn-small"&gt;&lt;i class="icon-pencil"&gt;&lt;/i&gt;&lt;/a&gt;' +
                              '&lt;a href="#" class="btn btn-small deleteButton"&gt;&lt;i class="icon-trash"&gt;&lt;/i&gt;&lt;/a&gt;', "Internet Explorer 5.0", "Win 95+", 5, "C"],
              ['&lt;div class="btn-group" style="float: left"&gt;' +
                                  '&lt;a class="btn btn-small dropdown-toggle" data-toggle="dropdown" href="#"&gt;Actions' +
                                      '&lt;span class="caret"&gt;&lt;/span&gt;' +
                                  '&lt;/a&gt;' +
                                  '&lt;ul class="dropdown-menu"&gt;' +
                                      '&lt;li&gt;&lt;a href="#"&gt;Approve&lt;/a&gt;&lt;/li&gt;' +
                                      '&lt;li&gt;&lt;a href="#"&gt;View&lt;/a&gt;&lt;/li&gt;' +
                                  '&lt;/ul&gt;' +
                              '&lt;/div&gt;' +
                              '&lt;a href="#" id="editButton" class="btn btn-small"&gt;&lt;i class="icon-pencil"&gt;&lt;/i&gt;&lt;/a&gt;' +
                              '&lt;a href="#" class="btn btn-small deleteButton"&gt;&lt;i class="icon-trash"&gt;&lt;/i&gt;&lt;/a&gt;', "Internet Explorer 5.5", "Win 95+", 5.5, "A"],
              ['&lt;div class="btn-group" style="float: left"&gt;' +
                                  '&lt;a class="btn btn-small dropdown-toggle" data-toggle="dropdown" href="#"&gt;Actions' +
                                      '&lt;span class="caret"&gt;&lt;/span&gt;' +
                                  '&lt;/a&gt;' +
                                  '&lt;ul class="dropdown-menu"&gt;' +
                                      '&lt;li&gt;&lt;a href="#"&gt;Approve&lt;/a&gt;&lt;/li&gt;' +
                                      '&lt;li&gt;&lt;a href="#"&gt;View&lt;/a&gt;&lt;/li&gt;' +
                                  '&lt;/ul&gt;' +
                              '&lt;/div&gt;' +
                              '&lt;a href="#" id="editButton" class="btn btn-small"&gt;&lt;i class="icon-pencil"&gt;&lt;/i&gt;&lt;/a&gt;' +
                              '&lt;a href="#" class="btn btn-small deleteButton"&gt;&lt;i class="icon-trash"&gt;&lt;/i&gt;&lt;/a&gt;', "Internet Explorer 6.0", "Win 98+", 6, "A"],
              ['&lt;div class="btn-group" style="float: left"&gt;' +
                                  '&lt;a class="btn btn-small dropdown-toggle" data-toggle="dropdown" href="#"&gt;Actions' +
                                      '&lt;span class="caret"&gt;&lt;/span&gt;' +
                                  '&lt;/a&gt;' +
                                  '&lt;ul class="dropdown-menu"&gt;' +
                                      '&lt;li&gt;&lt;a href="#"&gt;Approve&lt;/a&gt;&lt;/li&gt;' +
                                      '&lt;li&gt;&lt;a href="#"&gt;View&lt;/a&gt;&lt;/li&gt;' +
                                  '&lt;/ul&gt;' +
                              '&lt;/div&gt;' +
                              '&lt;a href="#" id="editButton" class="btn btn-small"&gt;&lt;i class="icon-pencil"&gt;&lt;/i&gt;&lt;/a&gt;' +
                              '&lt;a href="#" class="btn btn-small deleteButton"&gt;&lt;i class="icon-trash"&gt;&lt;/i&gt;&lt;/a&gt;', "Internet Explorer 7.0", "Win XP SP2+", 7, "A"],
              ['&lt;div class="btn-group" style="float: left"&gt;' +
                                  '&lt;a class="btn btn-small dropdown-toggle" data-toggle="dropdown" href="#"&gt;Actions' +
                                      '&lt;span class="caret"&gt;&lt;/span&gt;' +
                                  '&lt;/a&gt;' +
                                  '&lt;ul class="dropdown-menu"&gt;' +
                                      '&lt;li&gt;&lt;a href="#"&gt;Approve&lt;/a&gt;&lt;/li&gt;' +
                                      '&lt;li&gt;&lt;a href="#"&gt;View&lt;/a&gt;&lt;/li&gt;' +
                                  '&lt;/ul&gt;' +
                              '&lt;/div&gt;' +
                              '&lt;a href="#" id="editButton" class="btn btn-small"&gt;&lt;i class="icon-pencil"&gt;&lt;/i&gt;&lt;/a&gt;' +
                              '&lt;a href="#" class="btn btn-small deleteButton"&gt;&lt;i class="icon-trash"&gt;&lt;/i&gt;&lt;/a&gt;', "Firefox 1.5", "Win 98+ / OSX.2+", 1.8, "A"],
              ['&lt;div class="btn-group" style="float: left"&gt;' +
                                  '&lt;a class="btn btn-small dropdown-toggle" data-toggle="dropdown" href="#"&gt;Actions' +
                                      '&lt;span class="caret"&gt;&lt;/span&gt;' +
                                  '&lt;/a&gt;' +
                                  '&lt;ul class="dropdown-menu"&gt;' +
                                      '&lt;li&gt;&lt;a href="#"&gt;Approve&lt;/a&gt;&lt;/li&gt;' +
                                      '&lt;li&gt;&lt;a href="#"&gt;View&lt;/a&gt;&lt;/li&gt;' +
                                  '&lt;/ul&gt;' +
                              '&lt;/div&gt;' +
                              '&lt;a href="#" id="editButton" class="btn btn-small"&gt;&lt;i class="icon-pencil"&gt;&lt;/i&gt;&lt;/a&gt;' +
                              '&lt;a href="#" class="btn btn-small deleteButton"&gt;&lt;i class="icon-trash"&gt;&lt;/i&gt;&lt;/a&gt;', "Firefox 2", "Win 98+ / OSX.2+", 1.8, "A"],
              ['&lt;div class="btn-group" style="float: left"&gt;' +
                                  '&lt;a class="btn btn-small dropdown-toggle" data-toggle="dropdown" href="#"&gt;Actions' +
                                      '&lt;span class="caret"&gt;&lt;/span&gt;' +
                                  '&lt;/a&gt;' +
                                  '&lt;ul class="dropdown-menu"&gt;' +
                                      '&lt;li&gt;&lt;a href="#"&gt;Approve&lt;/a&gt;&lt;/li&gt;' +
                                      '&lt;li&gt;&lt;a href="#"&gt;View&lt;/a&gt;&lt;/li&gt;' +
                                  '&lt;/ul&gt;' +
                              '&lt;/div&gt;' +
                              '&lt;a href="#" id="editButton" class="btn btn-small"&gt;&lt;i class="icon-pencil"&gt;&lt;/i&gt;&lt;/a&gt;' +
                              '&lt;a href="#" class="btn btn-small deleteButton"&gt;&lt;i class="icon-trash"&gt;&lt;/i&gt;&lt;/a&gt;', "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();
  });
  </code></pre>