Bootstrap 5 dropdown menu is placed to free jqgrid toolbar using
$("#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",
`<div class='dropdown'><button class="btn btn-secondary dropdown-toggle" type="button"
data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>`
)
https://jsfiddle.net/gvna6myp/2/
Clicking in dropdown buttons does not show menu:
It looks like dropdown menu is clipped so that it is not visible outside toolbar div. How to make dropdown menu visible ?