button drop-down is partially displayed in bootstrap-table
See original GitHub issueHi, 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> ',
'<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('');
}
}]
});
Issue Analytics
- State:
- Created 9 years ago
- Comments:5 (1 by maintainers)
Top Results From Across the Web
Bootstrap button drop-down inside responsive table not ...
I have a problem with drop-down buttons inside tables when are responsive and scroll active because the drop-down is not visible because of...
Read more >Dropdowns
Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They're made interactive with the included Bootstrap dropdown ...
Read more >Dropdown In Bootstrap Table Responsive Not Visible ...
Create dropdown-menu appear perfectly on responsive bootstrap tables using ReactJS. I made a method that may not look good but can solve the ......
Read more >Table Options - Bootstrap Table
Description: Set this option to false to hide the button by default, the button is visible again when you add the data attribute...
Read more >React Bootstrap Table - Customization - GitHub Pages
Button group which contain the insert, drop, show only select and export CSV buttons, these button all grouped as btn-group class in bootstrap....
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
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);
*** 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
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?