590 comments found.
Search on top-bar of Tinker v3.0.5 not responsive, i try remove properties ‘hidden’ css then appears like this https://icloud.inet.vn/s/7re8q98DPJiWf5b If i dont remove ‘hidden’ then it doesn’t appear to input value search
hi Left4code, please check this
Hi,
Sorry for the late reply,
Please check the following example code.
<!-- BEGIN: Search -->
<div class="intro-x relative mr-4 sm:mr-6">
<div class="search">
<input
type="text"
class="search__input form-control border-transparent !w-auto focus:!w-auto sm:!w-60 sm:focus:!w-60"
placeholder="Search..."
@focus="showSearchDropdown"
@blur="hideSearchDropdown"
/>
<SearchIcon class="search__icon dark:text-slate-500" />
</div>
<div class="search-result !w-[320px] sm:!w-[450px] left-0 sm:left-auto" :class="{ show: searchDropdown }">
<div class="search-result__content">
<div class="search-result__content__title">Pages</div>
<div class="mb-5">
<a href="" class="flex items-center">
<div class="w-8 h-8 bg-success/20 dark:bg-success/10 text-success flex items-center justify-center rounded-full">
<InboxIcon class="w-4 h-4" />
</div>
<div class="ml-3">Mail Settings</div>
</a>
<a href="" class="flex items-center mt-2">
<div class="w-8 h-8 bg-pending/10 text-pending flex items-center justify-center rounded-full">
<UsersIcon class="w-4 h-4" />
</div>
<div class="ml-3">Users & Permissions</div>
</a>
<a href="" class="flex items-center mt-2">
<div class="w-8 h-8 bg-primary/10 dark:bg-primary/20 text-primary/80 flex items-center justify-center rounded-full">
<CreditCardIcon class="w-4 h-4" />
</div>
<div class="ml-3">Transactions Report</div>
</a>
</div>
<div class="search-result__content__title">Users</div>
<div class="mb-5">
<a v-for="(faker, fakerKey) in $_.take($f(), 4)" :key="fakerKey" href="" class="flex items-center mt-2">
<div class="w-8 h-8 image-fit">
<img alt="Midone Tailwind HTML Admin Template" class="rounded-full" :src="faker.photos[0]" />
</div>
<div class="ml-3 truncate">{{ faker.users[0].name }}</div>
<div class="ml-auto w-48 truncate text-slate-500 text-xs text-right">
{{ faker.users[0].email }}
</div>
</a>
</div>
<div class="search-result__content__title">Products</div>
<a v-for="(faker, fakerKey) in $_.take($f(), 4)" :key="fakerKey" href="" class="flex items-center mt-2">
<div class="w-8 h-8 image-fit">
<img alt="Midone Tailwind HTML Admin Template" class="rounded-full" :src="faker.images[0]" />
</div>
<div class="ml-3 truncate">{{ faker.products[0].name }}</div>
<div class="ml-auto w-48 truncate text-slate-500 text-xs text-right">
{{ faker.products[0].category }}
</div>
</a>
</div>
</div>
</div>
<!-- END: Search -->
it’s work, thank for help
Glad to help.. 
Hi Team,
How can i set tom-select :value=”{ id: item.id, text: item.name }” and use tom-select input tag.
I want to get id and text for tom-select.
Thank you.
Hi there,
Thank you for reaching out,
You may need to store the options in an array and retrieve the `id` and `name` according to the selected option. Please check the following code.
<template>
<TomSelect v-model="select" class="w-full">
<option v-for="(option, optionKey) in options" :key="optionKey" :value="option.id">{{ option.name }}</option>
</TomSelect>
</template>
<script setup>
import { ref, computed } from "vue";
const options = [{
id: 1,
name: "foo 1"
},
{
id: 2,
name: "foo 3"
},
{
id: 3,
name: "foo 3"
}]
const select = ref(1);
// Selected option
const selectedOption = computed(() => {
return options.filter((option) => {
return option.id == select.value
}))
})
</script>
It’s work, thanks for help.
You’re very welcome..
How can i remove darkmode?
Hi Dev-Nair,
Thank you for reaching out,
You can simply remove the `dark-mode` switcher component at `layout` component. Example for the `side-menu` layout.
File: /src/layouts/side-menu/Main.vue https://i.imgur.com/B0NTfJH.pngHello Team,
I have setup enigma vue theme in our project. After initial dashboard & header panel with account dropdown configured. I am facing account dropdown window showing even after logout from panel. If i click anywhere else in the screen window it’ disappear. I also checked in original theme and facing same issue. It may be issue around global-components/dropdown.js file which did not clear the respective class once click on any dropdown menu(profile, logout etc..).
However I recorded short video from original theme panel for your reference. pls share email so i can send
Let me know if anything require from my side.
Looking positive reply ASAP.
Thanks & Regards, Dev Nair
Hi there,
Thank you for reaching out,
Can you try the following code? https://i.imgur.com/HVZ0ZqQ.png https://i.imgur.com/Dz1db1B.pngHey, tailwind has a few outdated options, please fix.
warn – As of Tailwind CSS v2.2, `lightBlue` has been renamed to `sky`. warn – Update your configuration file to silence this warning.
warn – As of Tailwind CSS v3.0, `warmGray` has been renamed to `stone`. warn – Update your configuration file to silence this warning.
warn – As of Tailwind CSS v3.0, `trueGray` has been renamed to `neutral`. warn – Update your configuration file to silence this warning.
warn – As of Tailwind CSS v3.0, `coolGray` has been renamed to `gray`. warn – Update your configuration file to silence this warning.
warn – As of Tailwind CSS v3.0, `blueGray` has been renamed to `slate`. warn – Update your configuration file to silence this warning.
Hi there,
Thank you for reaching out,
Please change line 19 in `tailwind.config.js` to the following to remove the warning.
rgb: toRGB({
inherit: colors.inherit,
current: colors.current,
transparent: colors.transparent,
black: colors.black,
white: colors.white,
slate: colors.slate,
gray: colors.gray,
zinc: colors.zinc,
neutral: colors.neutral,
stone: colors.stone,
red: colors.red,
orange: colors.orange,
amber: colors.amber,
yellow: colors.yellow,
lime: colors.lime,
green: colors.green,
emerald: colors.emerald,
teal: colors.teal,
cyan: colors.cyan,
sky: colors.sky,
blue: colors.blue,
indigo: colors.indigo,
violet: colors.violet,
purple: colors.purple,
fuchsia: colors.fuchsia,
pink: colors.pink,
rose: colors.rose,
sky: colors.sky,
stone: colors.stone,
neutral: colors.neutral,
gray: colors.gray,
slate: colors.slate,
}),
Let me know if you still have any further question.
I bought this theme a few days ago, unfortunately, it doesn’t come with boilerplate, this means that I need to spend immense amount of time just getting rid of the views/components.. It’s time wasitng
Hi,
Thank you for the advice.
Unfortunately, for now we still don’t have time to provide boilerplate due to some updates that we have to work on.
I try to edit JavaScript files but it’s builded, how to edit it ? Because I didn’t find the source of JavaScript files
Hi AshrafGalalMo,
Thank you for reaching out,
Are you using the HTML version?
Yes
Please check the `Source` version to use the HTML version. You will find the `/Source/src` directory to update the JS files.
Find it, but charts & icons not included
Hi AshrafGalalMo,
You can see the chart and icon initialization in the following 2 files:
- /src/js/chart.js
- /src/js/lucide.js
Hi,
You can do something like this.https://i.imgur.com/HVZ0ZqQ.png
https://i.imgur.com/Dz1db1B.png
Please check the dropdown page to check more API.
where is the primary colors define for html theme? i want to change blue shade into red?
Hi,
Please check the following file: /src/assets/css/_colors.css
there is 2 themes comes with vue package i am asking about the HTML one how can i change the colors for that? not asking about vue right now
like right now in rubick html version all side bar, buttons etc are blue i want all to be red
It has the same structure, you can check it at ”/src/assets/css/_colors.css”. I hope you’ve read the documentation for Midone HTML, you can check it in the “Customizing Colors” section.
in HTML version of theme, i could not see any reference of using src/ folder can you explain?
basically i am using HTML version and documentation is not clear.
Hi,
Can you explain in more detail what your question means (`using /src folder`)? Maybe you can explain what you want to do or something.
like when i am trying to use TomSelect it gives undefined tomselect and same when i try to use toastify .. in most of themes we have dedicated page for example with js and all its assets but in rubick case its all messed.
Seems like you want to use a plugin outside of `app.js`, is that right?
If so, you can follow the steps on the `Global Third-Party Libraries` documentation page.
yes correct, but i could not able to use Toastify externally. I have html page in which only 2 links referred app.js and app.css from dist folder but when i try to import something from src into dist/js/app.js and i keep getting errors
basically i am trying to use Toastify and tom select but i can’t .. its really complex and bad structure for beginners i think and even docs is not even clear enough
the main thing which i can’t understand is why there is 2 folders when you are using only 1 for whole theme like i have not see any use of src folder in any page?
Hi,
You don’t need to change anything in the ”/dist” directory, if you follow the documentation you will be directed to install dependencies and run the “yarn run watch” or “npm run watch” commands.
This command will compile all JS/CSS code in ”/src” directory into ”/dist” including minify code. It will also automatically see the code changes in ”/src” and recompile to the ”/dist” directory while the compiler is running.
You can follow the steps on the “Global Third-Party Libraries” page to use certain plugins. https://i.imgur.com/DrzEVTU.pngI need vue3 template with laravel integration in comments you provide some users the sample integration for that so send me as well at marsadakbar@gmail.com
Hi,
Email sent, kindly check your email.
Hi sorry, I have found some difficulty, so i need to make sure sth, after i compiled my asset like after i run “npm run dev”, can i use toastify inside my blade file ? or should i add inside autoload ?
here is another one, what is the diffrent between the bootstrap.js and app.js inside the src folder , you defined everything there, i still dont understand, please help me out
i already ask u about this, but i cant find it in my email so i hope u can help me with answer this , greatly appreciate your help, thankyou.
Hi leonarudu,
Thank you for reaching out to us,
Sorry but it looks like your support license has expired, please extend your support license to keep getting support from our team.
Best regards, Left4code Team
is there any guide how we can integrate this in laravel 9?
i need laravel+vue sample integration please send at marsadakbar2@gmail.com asap
Hi,
Thank you for reaching out,
Email sent, kindly check your email.
How can i remove darkmode?
Hi hirenpatelh2,
Thank you for reaching out to us,
Sorry, it looks like you are using a different account from your purchase account.
Can you please use your purchase account?
Best regards, Left4code Team
how to turn off drag and drop full calendar
Hi there,
Thank you for reaching out,
Please check the following documentation. https://fullcalendar.io/docs/event-dragging-resizingSome updates have arrived, is there any way I can get this update easily? I don’t want to download the theme again
Hi,
You can run `yarn add chart.js` to install the latest chart.js version and replace the following components.
- /src/global-components/chart
- /src/global-components/tab
Hope this helps.
I am trying to run the `Midone Vue/Vue Version/Rubick v4.0.4/Source`,
but I am getting this error:
[plugin:vite:css] Invalid or unexpected token D:/Projects/vuejs/vuejs-admin-dashboard/Midone Vue/Vue Version/Rubick v4.0.4/Source/src/assets/css/app.css
PS D:\Projects\vuejs\vuejs-admin-dashboard\Midone Vue\Vue Version\Rubick v4.0.4\Source> node—version v16.14.2 PS D:\Projects\vuejs\vuejs-admin-dashboard\Midone Vue\Vue Version\Rubick v4.0.4\Source> yarn—version 1.22.18
Any tips?
If I remove tailwind from postcss.config.js then it compiles without error, seems to work … of course no CSS.
// require(“tailwindcss”)(”./tailwind.config.js”)
Hi klodoma,
Thank you for reaching out,
Are there any config modifications?
Can you please send step by step to reproduce the issue?
Hi
I tried it in a VM and it worked.
On local I removed C:\Users\{User}\AppData\Roaming\npm folder cleared all the cache and then it worked.
It must have been something with the npm cache.
All good now. Thank you
Hi,
That’s great!
Let me know if you need further assistance.
Hi Left4code, Tab components do not working with “v-for” on TabList and TabPanel, i’m has two Arrays for TabList and TabPanel, when DOM created still showing both but can’t reactive TabList or really show content TabPanel
I resolved the issue by add value ‘active’ in class TabList and TabPanel, thanks
Hi,
We just released an update for the chart.js plugin and the tab component. You can run `yarn add chart.js` to install the latest chart.js version and replace the following components.
- /src/global-components/chart
- /src/global-components/tab
Hope this helps.
Hi Left4code, please check the issues I sended
Hi,
Thank you for reaching out,
Just replied to your comment, let me know if you still need more help.
This is actually the expected behavior because the parent wrapper uses the `grid` property. You may need to increase the width of the parent to get proper results.
<div class="col-span-12">
<div class="intro-y box">
// Content here
</div>
</div>
You can use `flex-wrap` property for that.
https://i.imgur.com/Dbew06m.png
https://tailwindcss.com/docs/flex-wrap
it’s work. thank so much
Great, let me know if you have further question.
Hi,
Since `tom-select` doesn’t have a feature to open the dropdown up, then a reasonable solution is to leave enough space at the bottom of the form. You can use `margin-bottom` on the `box` class as follows.
https://i.imgur.com/9EaP2pP.pnghi, thank for help
Hi there,
Thank you for reaching out,
Email sent, kindly check your email.
Hi quocdat254,
Sorry for the late reply,
We just checked this issue and found that it is an issue of chart.js version 2+. This issue has been fixed in version 3+, so the solution for now is to upgrade to version 3+.
You can check the following link on codepen.
// Chart.js 2+ https://codepen.io/rizkimuhammada/pen/VwyzZGx // Chart.js 3+ https://codepen.io/rizkimuhammada/pen/jOYLNvEWe will update the chart.js version to version 3 in the next Midone update.
thanks you, I’m looking forward to the next upgraded version
Hey! Great work! I’m a developer and have to recommend a theme for a new project in Vue 3, so I thought yours is a really good choice. Playing around with the demos I found an issue: In the CKEditor, the link editor is really hard to see in dark mode. ¿Would you fix it in the shot time? I have to make a demo of your theme proposal, it would be nice if I can say the fix is coming.
KR,
Carlos
Hi there,
Thank you for reaching out,
Can you please attach a screenshot? We will check it immediately.
Hi,
Sorry for the late reply,
We just released an update for this issue and will update the live preview soon. https://i.imgur.com/2tOajCe.pngThanks!
