Metronic: Data-KT-Menu Offset issues
I am writing regarding the documentation here: https://preview.keenthemes.com/metronic8/demo4/documentation/general/menu.html
The "data-kt-menu-offset" does not work. An extract of my code using this is as below
Please advise on the fix for this and let me know how to update the fix on my end.
Please ignore/delete my earlier post about this as I did not include my code. Thanks.
<!--begin::Filter-->
<div>
<button type="button" class="btn btn-light-danger me-3" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end" data-target="#kt_menu_623cb47b691e1" >
<!--begin::Svg Icon | path: assets/media/icons/duotune/general/gen019.svg-->
<span class="svg-icon svg-icon-2"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M17.5 11H6.5C4 11 2 9 2 6.5C2 4 4 2 6.5 2H17.5C20 2 22 4 22 6.5C22 9 20 11 17.5 11ZM15 6.5C15 7.9 16.1 9 17.5 9C18.9 9 20 7.9 20 6.5C20 5.1 18.9 4 17.5 4C16.1 4 15 5.1 15 6.5Z" fill="black"/>
<path opacity="0.3" d="M17.5 22H6.5C4 22 2 20 2 17.5C2 15 4 13 6.5 13H17.5C20 13 22 15 22 17.5C22 20 20 22 17.5 22ZM4 17.5C4 18.9 5.1 20 6.5 20C7.9 20 9 18.9 9 17.5C9 16.1 7.9 15 6.5 15C5.1 15 4 16.1 4 17.5Z" fill="black"/>
</svg></span>
<!--end::Svg Icon-->
<!--end::Svg Icon-->Filter</button>
<!--begin::Menu 1-->
<div class="menu menu-sub menu-sub-dropdown w-250px w-md-300px" data-kt-menu="true" data-kt-menu-offset="100,100" >
<!--begin::Header-->
<div class="px-7 py-5">
<div class="fs-5 text-dark fw-bolder">Filter Options</div>
</div>
<!--end::Header-->
<!--begin::Menu separator-->
<div class="separator border-gray-200"></div>
<!--end::Menu separator-->
<!--begin::Form-->
<div class="px-7 py-5">
<!--begin::Input group-->
<div class="mb-10">
<!--begin::Label-->
<label class="form-label fw-bold">Deposit Scheme:</label>
<!--end::Label-->
<!--begin::Input-->
<div>
<select class="form-select form-select-solid" data-kt-select2="true" data-placeholder="Select option" data-dropdown-parent="#kt_menu_623cb47b691e1" data-allow-clear="true">
<option></option>
<option value="1">MyDeposits</option>
<option value="2">Deposit Protection Service</option>
<option value="2">Tenancy Deposit Scheme</option>
<option value="2">No Deposit Held</option>
<option value="2">Deposit Unprotected</option>
</select>
</div>
<!--end::Input-->
</div>
<!--end::Input group-->
<!--begin::Input group-->
<div class="mb-10">
<!--begin::Label-->
<label class="form-label fw-bold">Held by:</label>
<!--end::Label-->
<!--begin::Options-->
<div class="d-flex">
<!--begin::Options-->
<label class="form-check form-check-sm form-check-custom form-check-solid me-5">
<input class="form-check-input" type="checkbox" value="1" />
<span class="form-check-label">Agent</span>
</label>
<!--end::Options-->
<!--begin::Options-->
<label class="form-check form-check-sm form-check-custom form-check-solid">
<input class="form-check-input" type="checkbox" value="2" checked="checked" />
<span class="form-check-label">Landlord</span>
</label>
<!--end::Options-->
</div>
<!--end::Options-->
</div>
<!--end::Input group-->
<!--begin::Input group-->
<div class="mb-10">
<!--begin::Label-->
<label class="form-label fw-bold">Include Ended Tenancies:</label>
<!--end::Label-->
<!--begin::Switch-->
<div class="form-check form-switch form-switch-sm form-check-custom form-check-solid">
<input class="form-check-input" type="checkbox" value="" name="notifications" checked="checked" />
<label class="form-check-label">Yes</label>
</div>
<!--end::Switch-->
</div>
<!--end::Input group-->
<!--begin::Actions-->
<div class="d-flex justify-content-end">
<button type="reset" class="btn btn-sm btn-light btn-active-light-danger me-2" data-kt-menu-dismiss="true">Reset</button>
<button type="submit" class="btn btn-sm btn-danger" data-kt-menu-dismiss="true">Apply</button>
</div>
<!--end::Actions-->
</div>
<!--end::Form-->
</div>
<!--end::Menu 1-->
</div>
<!--end::Filter-->Replies (4)
Hi,
Thanks for the head up. Good spot. We have fixed it by adding the below string to the int conversion condition:core/html/src/js/components/menu.js
<img src="https://i.imgur.com/y6pZ63c.png" class="w-100"/>
We will release the fix in the next update in a few days. In the meantime, you can try this fix.
Regards.
Great, thanks Sean. I will wait for the fix release in the next update as I am not yet competent in editing .js file and recompiling.
Where are you able to use it from the latest update ?
Please use the offset parameter on the toggle element following this documentation
Hello Sean,
Yes, all good. The offset parameters had to be attached to the triggering button for it to work (not the container with the menu as I did above)
