Расширение бутстрап-таблицы - выпадающее меню в строках столбцов под табличным контейнером

Question

Я использую раскрывающееся окно начальной загрузки в каждой строке таблицы, в которой используется bootstrap-table extension, написанный wenzhixin. Сам раскрывающийся список отлично работает, однако, когда я открываю выпадающее меню в нижней части таблицы, он показывает вертикальную полосу прокрутки, и параметры появляются под содержащим div для таблицы. Я играл с CSS некоторое время без радости.

Кто-нибудь столкнулся с этой проблемой и нашел решение?

Answer 1

Это может быть немного «хак», но это просто и понятно. Расширение создает таблицу с классом fixed-table-body. Как только это будет удалено, он отображает без ограничения выпадающего списка бутстрапов.

$('#table').bootstrapTable({ 
    onPostBody: function(data) { 
     $('#table') 
      .find('.fixed-table-body') 
      .removeClass('fixed-table-body'); 
    } 
}); 

Answer 2

хорошо работает, если вы использовать расширение самозагрузки-таблицы Контекстное https://github.com/prograhammer/bootstrap-table-contextmenu

это, чтобы создать кнопку, что переключения ниспадающее меню

<ul id="userstable-context-menu" class="dropdown-menu"> 
    <li data-item="edit"><a>Edit</a></li> 
    <li data-item="resetPwd"><a>Reset</a></li> 
</ul 

В вас таблице вы добавляете:

<th class="editButton" data-field="editButton" data-formatter="editFormatter"></th> 

Javascript:

$(function() { 
    $("#userstable").bootstrapTable({ 
     pagination: true, 
     pageSize: 10, 
     pageList: [10, 25, 50, 'All'], 
     search: "true", 
     showRefresh:"true", 
     url: "api/users/{{user.userId}}/{{user.role}}", 
     contextMenu: '#userstable-context-menu', 
     contextMenuButton: '.userstable-button' 
    }); 
}) 

$('#userstable').on('contextmenu-item.bs.table', function (e, row, $el) { 
     if($el.data("item")== "edit"){ 
      var x = "do something"; 
     } 
} 

function editFormatter(value, row, index) { 
     return [ 
      '<div class="btn-group btn-group-xs">', 
      '<button type="button" class="btn btn-default dropdown-toggle userstable-button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">', 
      '<span class="fa fa-pencil"></span>', 
      '<span class="sr-only">Toggle Dropdown</span>', 
      '</button></div>' 
      ].join(''); 
    }