Как разместить выпадающее меню на бесплатной верхней панели инструментов jqgrid ⇐ CSS

[Anonymous]

Раскрывающееся меню Bootstrap 5 размещается на бесплатной панели инструментов jqgrid с помощью

Код: Выделить всё

$("#list").jqGrid({
toppager: true,

colModel: [
{ name: "name", label: "Client", width: 53 },
{
name: "invdate",
label: "Date",
width: 75,
align: "center",
sorttype: "date",
formatter: "date",
formatoptions: { newformat: "d-M-Y" },
},
{ name: "amount", label: "Amount", width: 65, template: "number" },
{ name: "tax", label: "Tax", width: 41, template: "number" },
{ name: "total", label: "Total", width: 51, template: "number" },
{
name: "closed",
label: "Closed",
width: 59,
template: "booleanCheckbox",
firstsortorder: "desc",
},
{
name: "ship_via",
label: "Shipped via",
width: 87,
align: "center",
formatter: "select",
formatoptions: { value: "FE:FedEx;TN:TNT;DH:DHL", defaultValue: "DH" },
},
],
data: [
{ id: "10", invdate: "2015-10-01", name: "test", amount: "" },
{
id: "20",
invdate: "2015-09-01",
name: "test2",
amount: "300.00",
tax: "20.00",
closed: false,
ship_via: "FE",
total: "320.00",
},
],
guiStyle: "bootstrap4",
iconSet: "fontAwesome",
idPrefix: "gb1_",
})

document.querySelector("#list_toppager > div").insertAdjacentHTML(
"afterend",
`
Dropdown button

[list]
[*][url=#]Action[/url]
[*][url=#]Another action[/url]
[*][url=#]Something else here[/url]
[/list]
`
)

https://jsfiddle.net/gvna6myp/2/
При нажатии кнопок раскрывающегося списка меню не отображается:


Похоже, что выпадающее меню обрезано так, что его не видно внешняя панель инструментов div. Как сделать выпадающее меню видимым?

Подробнее здесь: https://stackoverflow.com/questions/791 ... op-toolbar