Bug with data-kt-menu-offset in Vue demo2
When I add a data-kt-menu-offset="15, 10" attribute to the menu, the 15 doesn't work and the popup submenu is offset to the far left of the page.
Thank you for your help in troubleshooting the cause of the problem.
The sample code is shown below
<!--begin:Menu item-->
<div
v-if="item.heading"
data-kt-menu-trigger="{default: 'click', lg: 'hover'}"
data-kt-menu-placement="bottom-start"
data-kt-menu-offset="15, 10"
class="menu-item menu-lg-down-accordion menu-sub-lg-down-indention me-0 me-lg-2"
>
<!--begin:Menu link-->
<span
v-if="item.route"
class="menu-link py-3"
:class="{ active: hasActiveChildren(item.route) }"
>
<span class="menu-title">{{ translate(item.heading) }}</span>
<span class="menu-arrow d-lg-none"></span>
</span>
<!--end:Menu link-->
....
</div>
Replies (6)
<template>
<!--begin::Menu-->
<div
class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-800 menu-state-bg menu-state-color fw-semibold py-4 fs-6 w-275px"
data-kt-menu="true"
>
<!--begin::Menu item-->
<div class="menu-item px-3">
<div class="menu-content d-flex align-items-center px-3">
<!--begin::Avatar-->
<div class="symbol symbol-50px me-5">
<img alt="Logo" :src="getAssetPath('media/avatars/300-1.jpg')" />
</div>
<!--end::Avatar-->
<!--begin::Username-->
<div class="d-flex flex-column">
<div class="fw-bold d-flex align-items-center fs-5">
Max Smith
<span class="badge badge-light-success fw-bold fs-8 px-2 py-1 ms-2"
>Pro</span
>
</div>
</div>
<!--end::Menu separator-->
<!--begin::Menu item-->
<div class="menu-item px-5">
<router-link to="/pages/profile/overview" class="menu-link px-5">
My Profile
</router-link>
</div>
<!--end::Menu item-->
<!--begin::Menu item-->
<div class="menu-item px-5">
<router-link to="/pages/profile/overview" class="menu-link px-5">
<span class="menu-text">My Projects</span>
<span class="menu-badge">
<span class="badge badge-light-danger badge-circle fw-bold fs-7"
>3</span
>
</span>
</router-link>
</div>
<!--end::Menu item-->
<!--begin::Menu item-->
<div
class="menu-item px-5"
data-kt-menu-trigger="{default: 'click', lg: 'hover'}"
data-kt-menu-placement="left-start"
data-kt-menu-flip="center, top"
data-kt-menu-offset="15, 10"
>
<!--data-kt-menu-offset="-15px, 0"-->
<router-link to="/pages/profile/overview" class="menu-link px-5">
<span class="menu-title">My Subscription</span>
<span class="menu-arrow"></span>
</router-link>
<!--begin::Menu sub-->
<div class="menu-sub menu-sub-dropdown w-175px py-4" data-kt-menu="true">
<!--begin::Menu item-->
<div class="menu-item px-3">
<router-link to="/pages/profile/overview" class="menu-link px-5">
Referrals
</router-link>
</div>
<!--end::Menu item-->
<!--begin::Menu item-->
<div class="menu-item px-3">
<router-link to="/pages/profile/overview" class="menu-link px-5">
Billing
</router-link>
</div>
<!--end::Menu item-->
<!--begin::Menu item-->
<div class="menu-item px-3">
<router-link to="/pages/profile/overview" class="menu-link px-5">
Payments
</router-link>
</div>
<!--end::Menu item-->
<!--begin::Menu item-->
<div class="menu-item px-3">
<router-link
to="/pages/profile/overview"
class="menu-link d-flex flex-stack px-5"
>
Statements
<span class="ms-2 lh-0" v-tooltip data-bs-toggle="tooltip" title="View your statements">
<i class="ki-outline ki-information-5 fs-5"></i>
</span>
</router-link>
</div>
<!--end::Menu item-->
<!--begin::Menu separator-->
<div class="separator my-2"></div>
<!--end::Menu separator-->
<!--begin::Menu item-->
<div class="menu-item px-3">
<div class="menu-content px-3">
<label
class="form-check form-switch form-check-custom form-check-solid"
>
<input
class="form-check-input w-30px h-20px"
type="checkbox"
value="1"
checked
name="notifications"
/>
<span class="form-check-label text-muted fs-7">
Notifications
</span>
</label>
</div>
</div>
<!--end::Menu item-->
</div>
<!--end::Menu sub-->
</div>
<!--end::Menu item-->
<!--begin::Menu item-->
<div class="menu-item px-5">
<router-link to="/pages/profile/overview" class="menu-link px-5">
My Statements
</router-link>
</div>
<!--end::Menu item-->
<!--begin::Menu separator-->
<div class="separator my-2"></div>
<!--end::Menu separator-->
<!--begin::Menu item-->
<div
class="menu-item px-5"
data-kt-menu-trigger="{default: 'click', lg: 'hover'}"
data-kt-menu-placement="left-start"
data-kt-menu-flip="center, top"
>
<router-link to="/pages/profile/overview" class="menu-link px-5">
<span class="menu-title position-relative">
Language
<span
class="fs-8 rounded bg-light px-3 py-2 position-absolute translate-middle-y top-50 end-0"
>
{{ currentLanguageLocale.name }}
<img
class="w-15px h-15px rounded-1 ms-2"
:src="currentLanguageLocale.flag"
alt="language"
/>
</span>
</span>
</router-link>
<!--begin::Menu sub-->
<div class="menu-sub menu-sub-dropdown w-175px py-4">
<!--begin::Menu item-->
<div class="menu-item px-3">
<a
@click="setLang('en')"
href="#"
class="menu-link d-flex px-5"
:class="{ active: currentLanguage === 'en' }"
>
<span class="symbol symbol-20px me-4">
<img
class="rounded-1"
:src="getAssetPath('media/flags/united-states.svg')"
alt="English"
/>
</span>
English
</div>
<!--end::Menu item-->
<!--begin::Menu item-->
<div class="menu-item px-3">
<a
@click="setLang('es')"
href="#"
class="menu-link d-flex px-5"
:class="{ active: currentLanguage === 'es' }"
>
<span class="symbol symbol-20px me-4">
<img
class="rounded-1"
:src="getAssetPath('media/flags/spain.svg')"
alt="Spanish"
/>
</span>
Spanish
</a>
</div>
<!--end::Menu item-->
<!--begin::Menu item-->
<div class="menu-item px-3">
<a
@click="setLang('de')"
href="#"
class="menu-link d-flex px-5"
:class="{ active: currentLanguage === 'de' }"
>
<span class="symbol symbol-20px me-4">
<img
class="rounded-1"
:src="getAssetPath('media/flags/germany.svg')"
alt="German"
/>
</span>
German
</a>
</div>
<!--end::Menu item-->
<!--begin::Menu item-->
<div class="menu-item px-3">
<a
@click="setLang('ja')"
href="#"
class="menu-link d-flex px-5"
:class="{ active: currentLanguage === 'ja' }"
>
<span class="symbol symbol-20px me-4">
<img
class="rounded-1"
:src="getAssetPath('media/flags/japan.svg')"
alt="Japanese"
/>
</span>
Japanese
</a>
</div>
<!--end::Menu item-->
<!--begin::Menu item-->
<div class="menu-item px-3">
<a
@click="setLang('fr')"
href="#"
class="menu-link d-flex px-5"
:class="{ active: currentLanguage === 'fr' }"
>
<span class="symbol symbol-20px me-4">
<img
class="rounded-1"
:src="getAssetPath('media/flags/france.svg')"
alt="French"
/>
</span>
French
</a>
</div>
<!--end::Menu item-->
</div>
<!--end::Menu sub-->
</div>
<!--end::Menu item-->
<!--begin::Menu item-->
<div class="menu-item px-5 my-1">
<router-link to="/pages/profile/overview" class="menu-link px-5">
Account Settings
</router-link>
</div>
<!--end::Menu item-->
<!--begin::Menu item-->
<div class="menu-item px-5">
<a @click="signOut()" class="menu-link px-5"> Sign Out </a>
</div>
<!--end::Menu item-->
</div>
<!--end::Menu-->
</template>
<script lang="ts">
import { getAssetPath } from "@/core/helpers/assets";
import { computed, defineComponent } from "vue";
import { useI18n } from "vue-i18n";
import { useAuthStore } from "@/stores/auth";
import { useRouter } from "vue-router";
export default defineComponent({
name: "kt-user-menu",
components: {},
setup() {
const router = useRouter();
const i18n = useI18n();
const store = useAuthStore();
i18n.locale.value = localStorage.getItem("lang")
? (localStorage.getItem("lang") as string)
: "en";
const countries = {
en: {
flag: getAssetPath("media/flags/united-states.svg"),
name: "English",
},
es: {
flag: getAssetPath("media/flags/spain.svg"),
name: "Spanish",
},
de: {
flag: getAssetPath("media/flags/germany.svg"),
name: "German",
},
ja: {
flag: getAssetPath("media/flags/japan.svg"),
name: "Japanese",
},
fr: {
flag: getAssetPath("media/flags/france.svg"),
name: "French",
},
};
const signOut = () => {
store.logout();
router.push({ name: "sign-in" });
};
const setLang = (lang: string) => {
localStorage.setItem("lang", lang);
i18n.locale.value = lang;
};
const currentLanguage = computed(() => {
return i18n.locale.value;
});
const currentLanguageLocale = computed(() => {
return countries[i18n.locale.value as keyof typeof countries];
});
return {
signOut,
setLang,
currentLanguage,
currentLanguageLocale,
countries,
getAssetPath,
};
},
});
</script>
Hi,
Sorry for the late reply.
We have reproduced this problem and listed a new task to our dev backlog, we will investigate this problem further and include the fix in the next Metronic releases.
Regards,
Lauris Stepanovs,
Keenthemes Support Team
Hi,
Thank you for reaching out to us.
The data-kt-menu-offset should work correctly, do you have any errors in your browser's console?
You can read more about popper-js offset property in the official popper-js documentation.
https://popper.js.org/docs/v2/modifiers/offset/
Regards,
Lauris Stepanovs,
Keenthemes Support Team
The data-kt-menu-offset attribute, which works fine in the HTML demo, does not work in the Vue demo.
You can test this with the Vue demo2 by adding the data-kt-menu-offset="15, 10" attribute.
Where 10 is working and 15 is not.
No errors or warnings in the Console.
The data-kt-menu-offset attribute, which works fine in the HTML demo, does not work in the Vue demo.
You can test this with the Vue demo2 by adding the data-kt-menu-offset="15, 10" attribute.
Where 10 is working and 15 is not.
Please check the screenshot
https://drive.google.com/file/d/1gLR4oOfBrOYW1nW1hbWkzvAXT4NdMewG/view?usp=drive_link
Hi,
The MenuComponent.ts in our Vue version is the same component as menu.js in the HTML version.
If offset values don't work then it can be related to how you position your elements.
Could you please attach your entire menu element and toggle element?
Regards,
Lauris Stepanovs,
Keenthemes Support Team
