Get 2024 Templates Mega Bundle!14 Bootstrap, Vue & React Templates + 3 Vector Sets
Get for 99$
Menu Component
Issues with menu position, and i cant understand why menu is jump to left-top.
I use default menu html inside card:
<!--begin::Menu wrapper-->
<div>
<!--begin::Toggle-->
<button type="button" class="btn btn-primary rotate" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-start" data-kt-menu-offset="30px, 30px">
Click to open menu
<span class="svg-icon svg-icon-3 rotate-180 ms-3 me-0">...</span>
</button>
<!--end::Toggle-->
<!--begin::Menu-->
<div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-800 menu-state-bg-light-primary fw-semibold w-200px" data-kt-menu="true">
<!--begin::Menu item-->
<div class="menu-item px-3">
<div class="menu-content fs-6 text-dark fw-bold px-3 py-4">Quick Actions</div>
</div>
<!--end::Menu item-->
<!--begin::Menu separator-->
<div class="separator mb-3 opacity-75"></div>
<!--end::Menu separator-->
<!--begin::Menu item-->
<div class="menu-item px-3">
<a href="#%22%20class=%22menu-link%20px-3" target="_blank">
New Ticket
</a>
</div>
<!--end::Menu item-->
<!--begin::Menu item-->
<div class="menu-item px-3">
<a href="#%22%20class=%22menu-link%20px-3" target="_blank">
New Customer
</a>
</div>
<!--end::Menu item-->
<!--begin::Menu item-->
<div class="menu-item px-3" data-kt-menu-trigger="hover" data-kt-menu-placement="right-start">
<!--begin::Menu item-->
<a href="#%22%20class=%22menu-link%20px-3" target="_blank">
<span class="menu-title">New Group</span>
<span class="menu-arrow"></span>
</a>
<!--end::Menu item-->
<!--begin::Menu sub-->
<div class="menu-sub menu-sub-dropdown w-175px py-4">
<!--begin::Menu item-->
<div class="menu-item px-3">
<a href="#%22%20class=%22menu-link%20px-3" target="_blank">
Admin Group
</a>
</div>
<!--end::Menu item-->
<!--begin::Menu item-->
<div class="menu-item px-3">
<a href="#%22%20class=%22menu-link%20px-3" target="_blank">
Staff Group
</a>
</div>
<!--end::Menu item-->
<!--begin::Menu item-->
<div class="menu-item px-3">
<a href="#%22%20class=%22menu-link%20px-3" target="_blank">
Member Group
</a>
</div>
<!--end::Menu item-->
</div>
<!--end::Menu sub-->
</div>
<!--end::Menu item-->
<!--begin::Menu item-->
<div class="menu-item px-3">
<a href="#%22%20class=%22menu-link%20px-3" target="_blank">
New Contact
</a>
</div>
<!--end::Menu item-->
<!--begin::Menu separator-->
<div class="separator mt-3 opacity-75"></div>
<!--end::Menu separator-->
<!--begin::Menu item-->
<div class="menu-item px-3">
<div class="menu-content px-3 py-3">
<a class="btn btn-light-primary btn-sm px-4" href="#">
Generate Reports
</a>
</div>
</div>
<!--end::Menu item-->
</div>
<!--end::Menu-->
</div>
<!--end::Dropdown wrapper-->Link: https://preview.keenthemes.com/html/metronic/docs/general/menu/advanced
Issue image:
Replies (4)
https://ibb.co/sKc22Dh
Style options for opened .menu:
z-index: 105;
position: fixed;
inset: 0px auto auto 0px;
margin: 0px;
transform: translate3d(0px, 0px, 0px);Fixed:
Trouble is here:
data-kt-menu-offset="30px, 30px"https://popper.js.org/docs/v2/tutorial/#offset
This package understand only number value. MenuComponent is give him string, its wrong.
Fix:
MenuComponent.ts:210
const offsetValue = this._getItemOption(item, "offset");
const offset = offsetValue
? offsetValue
.toString()
.split(",")
.map(function (offsetValue) {
return parseInt(offsetValue);
})
: [];
Please update example:
https://preview.keenthemes.com/html/metronic/docs/general/menu/advanced
https://ibb.co/pxJyMq0
Hi,
May I know which version of Metronic and framework are you using(React, Vue, Angular) ?
Regards.
