Im using metronic 8, and its awesome. However there are some problems with dropdown.
First,
where is the dropdown examples? Like a simple dropdown but not the regular dropdown, but the bootstrap 5 version of dropdown?
The ones in metronic:
<a href="#%22%20class=%22btn%20btn-sm%20btn-light%20btn-flex%20btn-center%20btn-active-light-primary%20show%20menu-dropdown%22%20data-kt-menu-trigger=%22click%22%20data-kt-menu-placement=%22bottom-end" target="_blank" rel="noopener noreferrer">Actions
<i class="ki-duotone ki-down fs-5 ms-1"></i></a>
<!--begin::Menu-->
<div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-semibold fs-7 w-125px py-4 show" data-kt-menu="true" data-popper-placement="bottom-end" >
<!--begin::Menu item-->
<div class="menu-item px-3">
<a href="apps/ecommerce/sales/details.html%22%20class=%22menu-link%20px-3" target="_blank" rel="noopener noreferrer">View</a>
</div>
<!--end::Menu item-->
<!--begin::Menu item-->
<div class="menu-item px-3">
<a href="apps/ecommerce/sales/edit-order.html%22%20class=%22menu-link%20px-3" target="_blank" rel="noopener noreferrer">Edit</a>
</div>
<!--end::Menu item-->
<!--begin::Menu item-->
<div class="menu-item px-3">
<a href="#%22%20class=%22menu-link%20px-3%22%20data-kt-ecommerce-order-filter=%22delete_row" target="_blank" rel="noopener noreferrer">Delete</a>
</div>
<!--end::Menu item-->
</div>
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Actions
</button>
<ul class="dropdown-menu">
</p><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>
Hi,
Yes, our KTDro
At the moment we do not have such examples for Bootstrap Dropdowns however
you can try to use menu
makeup with Bootstrap Dropdowns. You can reset the dropdown padding using p-0
utility class and put the menu component from Metronic.
Regards.
Understood..but when the dropdown was appended through javascript, the dropdown doesnt work..
This is for appending table rows after javascript fetch..
But if not within fetch, its working..is there a reason for it?
Had to implement ktcomponents.init after appending, then the dropdowns work..
Because im making a simple script so its easy for me to use in any project, but if the project is using a different template, then it would be a problem..
Hi,
When a new dropdown HTML code appears in the document it must be initialized by the KTDropdown component to activate it so you will need to call KTComponents.init() whenever a new element is added to the DOM.
All KT components work this way. On page load they are auto-initized but when dynamically added via AJAX or another method they must be initialized explicitly once they are added to the DOM.
Regards.
Understood,
thank you so much for the information, however its a great template, well made, just need more exploring..
Hi ,
I am glad to like it. If you need any further clarifications please do let us know.
Regards.