Width proportions problem in metronic vue project with respect to preview
Hello,
You see I have assembled the base project of vue from the official vue repository of metronic and when I implement any html code such as the dashboard of the demo 1, looking at the demo preview of the official website I notice that my dashboard is less wide and I do not understand why.
Regards,
<template>
<div class="flex grow">
<Sidebar />
<div class="wrapper flex grow flex-col">
<Header />
<main class="grow content pt-5" id="content" role="content">
<div class="container-fixed">
<!-- place your content here -->
<router-view />
</div>
</main>
<Footer />
</div>
</div>
<SearchModal />
</template>
<script lang="ts" setup>
import Sidebar from "../components/Sidebar.vue"
import Header from "../components/Header.vue"
import Footer from "../components/Footer.vue"
import SearchModal from "../components/SearchModal.vue";
import { nextTick, onMounted } from "vue";
import KTComponent from "../metronic/core/index";
import KTLayout from "../metronic/app/layouts/demo1.js";
onMounted(() => {
nextTick(() => {
KTComponent.init();
KTLayout.init();
});
});
</script>
Replies (4)
Hi,
Thank you for reaching out to us.
Please ensure your content does not have two container-fixed wrappers. There is already one wrapper defined in metronic-tailwind-html-integration/metronic-tailwind-vue/src/App.vue. You can either remove this class from your page content wrapper or delete this content wrapper from the App.vue.
Regards,
Lauris Stepanovs,
Keenthemes Support Team
I have done what you said and the dashboard occupies the full width but still without the same width proportions, I attach screenshots:
My vue project:
https://imgur.com/ubxMaYJ
The metronic preview project:
https://imgur.com/KUMHm1I
If you look at the metronic one it is wider.
Best regards,
Hi,
Thank you for providing us with details. Noted and we will check it further and get back to you the soonest.
Regards/
Hi,
I want to apologize for the late reply.
From your screenshots, it doesn't seem like the container difference, if the container on Metronic preview indeed is wider then I suggest you compare all the page content containers and make sure that your container classes match the classes on our preview page.
Regards,
Lauris Stepanovs,
Keenthemes Support Team
