Bootstrap-table: button drop-down is partially displayed in bootstrap-table

[yungwei]

Hi, in the table below, I have a column that contains 3 buttons, one of which is a drop-down. When the drop-down button is clicked, a set of menu options will show up. The problem is that the drop-down is only partially displayed (please refer to the image below). It looks like the drop-down is considered part of the table and that's why the veritical scroll bar shows up. Note that the horizontal scroll bar will show up as well if more columns are displayed. How can I fix it? Thanks.

                $('#queryResult').bootstrapTable({
                    method: 'post',
                    url: '/protected/activities/ajax/query',
                    contentType: 'application/x-www-form-urlencoded',
                    queryParamsType: 'x',
                    queryParams: function getQueryParams(p) {
                        p['page.size'] = p['pageSize'];
                        p['page.page'] = p['pageNumber'];
                        p['JSESSIONID'] = getJSessionId();                      
                        return p;
                    },
                    responseHandler: function adaptData(res) {
                        return {
                            rows: res.content,
                            total: parseInt(res.totalElements)
                        };
                    },
                    sidePagination:'server',
                    pagination: true,
                    pageList: [5, 10, 25, 50],
                    smartDisplay: false,
                    search: true,
                    showColumns: true,
                    showRefresh: true,
                    minimumCountColumns: 2,
                    columns: [{
                        field: 'id',
                        title: 'ID',
                        align: 'center',
                        valign: 'middle',
                        sortable: true,
                        visible: false
                    }, {
                        field: 'shortName',
                        title: '主題簡稱',
                        align: 'center',
                        valign: 'middle',
                        sortable: true
                    }, {
                        field: 'startTime',
                        title: '開始時間',
                        align: 'center',
                        valign: 'middle',
                        sortable: true,
                        formatter: function (value, row) {
                            return value ? moment.utc(value).format("YYYY-MM-DD HH:mm") : '';
                        }
                    }, {
                        field: 'endTime',
                        title: '結束時間',
                        align: 'center',
                        valign: 'middle',
                        sortable: true,
                        formatter: function (value, row) {
                            return value ? moment.utc(value).format("YYYY-MM-DD HH:mm") : '';
                        }
                    }, {
                        field: 'location',
                        title: '<spring:message code="heading.activity.location" />',
                        align: 'center',
                        valign: 'middle',
                        sortable: true
                    }, {
                        field: 'action',
                        title: '',
                        align: 'left',
                        valign: 'middle',
                        sortable: false,
                        formatter: function(value, row) {
                            return ['<a id="updateActivity" href="/protected/activities/2" class="btn btn-xs btn-primary">修改</a>&nbsp;',
                                    '<div class="btn-group">',
                                    '    <button type="button" class="btn btn-xs btn-primary dropdown-toggle" data-toggle="dropdown">',
                                    ' 互動類別 <span class="caret"></span>',
                                    '    </button>',
                                    '    <ul class="dropdown-menu" role="menu">',
                                    '    <li><a href="/protected/letters/query?activityId=2">書信</a></li>',
                                    '    <li><a href="/protected/cards/query?activityId=2">賀卡</a></li>',
                                    '    <li><a href="/protected/calls/query?activityId=2">電話</a></li>',
                                    '    <li><a href="/protected/visits/query?activityId=2">拜訪</a></li>',
                                    '    <li><a href="/protected/outgoings/query?activityId=2">出陣報告</a></li>',
                                    '    <li><a href="/protected/participations/query?activityId=2">參與活動</a></li>',
                                    '    <li><a href="/protected/giftings/query?activityId=2">禮品</a></li>',
                                    '    <li><a href="/protected/faxes/query?activityId=2">傳真</a></li>',
                                    '    </ul>',
                                    '</div>',
                                    '<a id="deleteActivity" href="/protected/activities/delete/2" class="btn btn-xs btn-primary">刪除</a>'
                                    ].join('');
                        }
                    }]
                });

[yungwei]

Here's a not-so-perfect work-around.

[wenzhixin]

OK @yungwei , I know the reason of the problem, but I don't know how to solve it more perfect.
Close this issue.

[weibangtuo]

可以使用 position: fixed，然后z-index设置大一点，设置要位置就可以。

[mtaylor091]

Doing this prevents horizontal scrolling.

Open this example page:
http://issues.wenzhixin.net.cn/bootstrap-table/#options/large-columns.html

Then apply the fixed-table-body styling:
.fixed-table-body{
overflow:visible !important;
}

And you will not be able to scroll.

Can anyone help me with this?

[mtaylor091]

After looking around I found this solution. Basically if there is not enough room and there is a scrollbar we add padding to the table so it fits. If there is no scrollbar we either overflow the menu or use a dropup.

//Apply it after the table is created so there is a .fixed-table-body element
$(element).bootstrapTable(options);

            //Fixes dropdown display issue
           $('.fixed-table-body').on('shown.bs.dropdown', function(e) {
                 var fixedTableBody = $(this),
                    tableResponsive = fixedTableBody.parents('.table-responsive'),
                    btnGroup = $(e.target),
                    menu = btnGroup.find('.dropdown-menu'),
                    tableHeight = fixedTableBody.offset().top + fixedTableBody.height(),
                    menuHeight = menu.offset().top + menu.outerHeight(true),
                    padding = 20, // Space for shadow + scrollbar.   
                    btnGroupSpace = 50;
                // if scrolling cant have overflow
                if (fixedTableBody[0].scrollWidth > fixedTableBody.innerWidth()) {
                    if (btnGroup.height() + menu.height() + padding + btnGroupSpace > fixedTableBody.height()) {
                        // if the table is not big enough add padding
                        fixedTableBody.css('padding-bottom', ((menuHeight + padding) - tableHeight));
                    } else if (menuHeight + padding > tableHeight) {
                        btnGroup.addClass('dropup');
                    }
                } else {
                    if (btnGroup.height() + menu.height() + padding + btnGroupSpace > fixedTableBody.height()) {
                        fixedTableBody.addClass('overflow-all-visible');
                        tableResponsive.addClass('overflow-all-visible');
                    } else if (menuHeight + padding > tableHeight) {
                        btnGroup.addClass('dropup');
                    }
                }
            }).on('hidden.bs.dropdown', function(e) {
                $(e.target).removeClass('dropup');
                $(this).css({ 'padding-bottom': '' });
                $(this).removeClass('overflow-all-visible');
                $(this).parents('.table-responsive').removeClass('overflow-all-visible');
            });

* You will need to apply the same event handler when you have a toolbar. The toolbar will just need to find the table element and then do the same as above.

This is where I found my starting point and then applied my solution to this library.
https://github.com/twbs/bootstrap/issues/11037