Only one dropdown is working, others aren't
Hey,
In my view file, I have 3 components that are imported. Inside each component, I have button and dropdown. The issue that I have, that only first component work and 2 others aren't working. When I remove first component, 2nd starting to work normally.
In my opinion, it's maybe a issue in target dropdown from button, so my question is:
Can I precise for each button which dropdown I'm targeting? I looked into multiple buttons on metronic demo, but they have only these 3 settings
data-kt-menu-trigger="click"
data-kt-menu-placement="bottom-end"
data-kt-menu-flip="top-end"
Replies (3)
For everyone who are looking for the solution:
Button and dropdown needs to be wraped by a div.
Hi,
Sorry for the late reply.
Yes, button and dropdown should be wrapped with one root element div. Here is a demo:
<div class="me-n2">
<a
href="#"
class="btn btn-icon btn-sm btn-active-color-primary mt-n2"
data-kt-menu-trigger="click"
data-kt-menu-placement="bottom-start"
data-kt-menu-overflow="true"
>
<span class="svg-icon svg-icon-muted svg-icon-1">
<inline-svg src="media/icons/duotune/coding/cod001.svg" />
</span>
</a>
<div
class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-semobold py-4 fs-6 w-275px"
data-kt-menu="true"
>
...
</div>
</div>Regards,
Lauris Stepanovs,
Keenthemes Support Team
Thank you. That worked.
