447 comments found.
I use jquery-validation and add jquery 3.6.0. i have error : Uncaught TypeError: Window.getComputedStyle: Argument 1 is not an object.
<script src=”<?=base_url(‘backend/dist/js/app.js’);?>”></script> <script src=”<?=base_url(‘backend/vendor/jquery-3.6.0.js’);?>”></script> <script src=”<?=base_url(‘backend/vendor/jquery-validation/jquery.validate.min.js’);?>”></script> </head>
Halo,,can you help me?
Hi,
Thank you for reaching out to us,
Please run “yarn add jquery” or “npm install jquery” to install jquery.
Next, replace the following line in ”/src/js/bootstrap.js”.
https://prnt.sc/26kgqt5
Run “yarn run watch” to compile the assets and you can retry to use the validation plugin.
Please use incognito if you are using chrome or use another browser if you can’t open the above link.
Access your console, then navigate to the project’s root directory. Run yarn install to start installing dependencies. After the installation is complete, run yarn run watch to run the compiler.
I run Installing Dependencies, but result is not good. https://ibb.co/wR5x1JHWhat is your file extension? If you are using an extension other than HTML, you may need to change the Tailwind configuration. Please check the following example.
https://i.imgur.com/uwGLbxF.png
i use with Codeigniter
I cannot show image
Please use incognito if you are using chrome or use another browser if you can’t open the above link.
Can you send your package.json file?
Can your try with this code?
https://i.imgur.com/3b41VdZ.png
still error
Can you try with our original source code? Since we can’t reproduce the issue.
https://i.imgur.com/3b41VdZ.png
can you remote my laptop please ? maybe tomorrow
Hi,
What you’re asking for is actually a customization of the item, which unfortunately is not something included in your support purchase. You can read more about the definition of support here.
https://themeforest.net/page/item_support_policy
oke, solved
Hi,
Glad it worked!
Hi! I have trouble using tailwind in this project, I have tried to use some classes from tailwind but those classes are not called or not working, I already run yarn run watch
Hi there,
Thank you for reaching out to us,
Is there any error in the terminal/cmd while doing compile? Can you provide more details like screenshots or else?
Hi!
Here I attach more details https://drive.google.com/drive/folders/1eM1hCab5mOm2fghZUmmrFG626oAobf9V?usp=sharingThank You!
Hi,
Thank you for your reply,
Just checked the screenshot, you need to use the “underline” class if you want to use text underline offset. Please check the example code below.
<p class="underline underline-offset-8">The quick brown fox...</p>
Hi,
Thank you for your reply,
I already add classs “underline” now the text have underline, but the class “underline-offset-8” still not called.
Here I attach the details https://drive.google.com/drive/folders/1eM1hCab5mOm2fghZUmmrFG626oAobf9V?usp=sharingLooks like the JIT compiler doesn’t read the underscore-offset class you’re using, can you test it on our original source?
I have test it on original source, and the compiler still doesn’t read the “underline-offset-8” class. And sometime, the compiler make the app,css file crash, and I must copy app,css from original source and replace it in my project.
Here I attach the details https://drive.google.com/drive/folders/1eM1hCab5mOm2fghZUmmrFG626oAobf9V?usp=sharing
Did you make any changes to tailwind.config.js? Or are you using a file extension other than HTML?
We have tried on the latest version but found no similar issue. Please check the link below.https://i.imgur.com/uKMqrjv.png
https://i.imgur.com/Evo2kG9.png
Are there certain steps we can try to reproduce this issue?
Hi,
Thank you for your reply,
I didn’t change the tailwind.config.js file. But I use .php extension.
I can’t open the link, it say “You don’t have authorisation to view this page.”
I just run “yarn install” and run “yarn run watch” and start to code with the source.
You may need to change the extension in tailwind.config.js if you are using an extension other than HTML.
Please use chrome incognito or another browser if you can’t open the link, thanks.
Okay, I’ll try it. Thank You
Sure, please let me know if the issue still appears.
I already tried, now I have some error in terminal. ‘colors.rgb.slate.200’ was found but does not resolve to a string. I tried to comment ‘colors.rgb.slate.200’ in tailwind.config.js, and the error change to ‘colors.rgb.slate.100’.
https://drive.google.com/drive/folders/1eM1hCab5mOm2fghZUmmrFG626oAobf9V?usp=sharingOkay, it was fixed. I just run the ‘yarn run watch again’.
And I already try to change tailwind config to .php format. And It Works!
I think JIT compiler just generate styles of class in root directory. I tried to call class ‘underline-offset-8’ in file that placed in root directory and it works. When I try in file that placed inside folder in root directory, it’s not work. Maybe I can try to change tailwind config file to make JIT compiler can read classes that I call in file inside folder in root directory.
Thank You
Glad it works.. 
Colour Pallet changing option is not available I am using the HTML one in the version that I purchased which was React+HTML
Hi there,
Thank you for reaching out to us,
Sorry, could you move on to the react version item discussion?
Are you able to provide me with some screenshots?
Hi,
i’m using the html version of the midtone theme. Now i want to use the fullcalender plugin, without changing the app.js file. I want to use a custom.js file and do something like:
$(“owncalendar”),FullCalender() ...
How can is use this plugin in my js file?
Hi,
Thank you for reaching out to us,
Unfortunately, you will need to make a little modification to be able to use the plugin outside `app.js`. Please open this file ”/src/js/bootstrap.js” and add these lines.https://i.imgur.com/HGnMQSs.png
import { Calendar } from "@fullcalendar/core";
import interactionPlugin, { Draggable } from "@fullcalendar/interaction";
import dayGridPlugin from "@fullcalendar/daygrid";
import timeGridPlugin from "@fullcalendar/timegrid";
import listPlugin from "@fullcalendar/list";
window.Calendar = Calendar;
window.interactionPlugin = interactionPlugin;
window.Draggable = Draggable;
window.dayGridPlugin = dayGridPlugin;
window.timeGridPlugin = timeGridPlugin;
window.listPlugin = listPlugin;
Run `yarn run watch` to compile the assets. This will make the fullcalendar plugin globally accessible and you can use the plugin without changing the `app.js`.
Hi,
i’m using the html version of the midtone theme. Now i want to use the fullcalender plugin, without changing the app.js file. I want to use a custom.js file and do something like:
$(”#owncalendar”),FullCalender() ...
How can is use this plugin in my js file?
Hi,
Thank you for reaching out to us,
Unfortunately, you will need to make a little modification to be able to use the plugin outside `app.js`. Please open this file ”/src/js/bootstrap.js” and add these lines.https://i.imgur.com/HGnMQSs.png
import { Calendar } from "@fullcalendar/core";
import interactionPlugin, { Draggable } from "@fullcalendar/interaction";
import dayGridPlugin from "@fullcalendar/daygrid";
import timeGridPlugin from "@fullcalendar/timegrid";
import listPlugin from "@fullcalendar/list";
window.Calendar = Calendar;
window.interactionPlugin = interactionPlugin;
window.Draggable = Draggable;
window.dayGridPlugin = dayGridPlugin;
window.timeGridPlugin = timeGridPlugin;
window.listPlugin = listPlugin;
Run `yarn run watch` to compile the assets. This will make the fullcalendar plugin globally accessible and you can use the plugin without changing the `app.js`.
I have trouble using data table, upload file, js cannot run due to conflict with app.js. the template is not pure html css and js, I cannot customize it into my project. My project is netcore.
Hi,
Thank you for reaching out to us,
Sorry, but I’m not sure I fully understand your question, can you explain in more detail about pure html css and js?
when integrating the template into the project, all jquery fails to run. all scripts in app.js, I don’t know how to make it compatible with other skins. if split js components into individual files is fine for me. jquery is in conflict, can’t run my other scripts.
Please open this file ”/src/js/bootstrap.js” and replace with the following code.
// Load plugins
import helper from "./helper";
import * as Popper from "@popperjs/core";
// import dom from "@left4code/tw-starter/dist/js/dom";
import jQuery from "jquery";
// Set plugins globally
window.helper = helper;
window.Popper = Popper;
// window.$ = dom;
window.$ = window.jQuery = jQuery;
Run `yarn add jquery` to install jquery and recompile the JS assets with `yarn run watch`.
How to laravel 9 integrate??
Hi,
Thank you for reaching out to us,
Unfortunately, integrating to Laravel 9 are outside the scope of what we able to support for this item. If you would like to work with Laravel 9, you can consider buying the Laravel version of Midone, and follow the configuration we have provided there.
Hi, how do I implement the laravel jetstream?
Hi,
Thank you for reaching out to us,
Unfortunately, integrating to Jetstream are outside the scope of what we able to support. If you would like to work with someone more closely to help you to integrate the template with Jetstream, you could consider working with a freelancer or one of the Envato Studio providers.
Hi,
I have implemented the template on CODEIGNITER framework PHP.
I’m not able to use custom script which are relevant to specific pages only. Here is an example where the tabulator is not working with the below code. Please advise.
<!- BEGIN: JS Assets->
< script src=" /assets/dist/js/app.js"></ script >
<!- END: JS Assets->
< script >
(function () {
console.log("test");
var tableData = [
{id:1, name:"Billy Bob", age:"12", gender:"male", height:1, col:"red", dob:"", cheese:1},
{id:2, name:"Mary May", age:"1", gender:"female", height:2, col:"blue", dob:"14/05/1982", cheese:true},
]var table = new Tabulator("#allcompanies", {
data:tableData, //set initial table data
columns:[
{title:"Name", field:"name"},
{title:"Age", field:"age"},
{title:"Gender", field:"gender"},
{title:"Height", field:"height"},
{title:"Favourite Color", field:"col"},
{title:"Date Of Birth", field:"dob"},
{title:"Cheese Preference", field:"cheese"},
],
});
</ script >});Hi,
Thank you for reaching out to us,
Everything inside `app.js` will be scoped including variables, functions and plugins. Since you are placing your JS code outside of `app.js`, you need to attach the plugin as a global object.
Please add this line to ”/src/js/bootstrap.js”.
// Load plugins
import helper from "./helper";
import * as Popper from "@popperjs/core";
import dom from "@left4code/tw-starter/dist/js/dom";
// Add this line
import Tabulator from "tabulator-tables";
// Set plugins globally
window.helper = helper;
window.Popper = Popper;
window.$ = dom;
// And add this line
window.Tabulator = Tabulator;
Run `yarn run watch` to recompile the JS assets.
Hello, thank you for a wonderful template.
I bought HTML version because I wanted to integrate it with a server-side web framework. After downloading I realized buying the Vue version would provide a clear separation of components, thus making integration much easier (as I could separate components in the same way).
Is it possible to “upgrade” to Vue version? I’m ofc willing to pay a difference for it.
Best, Jakub
Hi,
Thank you for reaching out,
Yes we can help you with that, please make a purchase for the vue version and you can submit a refund request for the HTML version at the following link.
https://themeforest.net/refund_requests/new
We will process it immediately.
Hey,
The Enigma React starter template has a bug. When you refresh the page the menu disappears a little until it’s entirely gone.
Steps to reproduce
In chrome or Edge
Navigate to http://localhost:3000/top-menu/page-1
Then refresh the page and you’ll see the Page 1 and Page 2 menu items slide up a little.
Hi,
Thank you for reporting the issue,
We have released an update for this, please replace this file ”/src/assets/css/components/_top-nav.css”.
Let me know if you still need further help.
Awesome thank you just tested and it’s fixed #shipit
Your’e welcome..
I have difficulties on integrating tabulator to my laravel 8 project, i imported tabulator.js bellow app.js and then it seems working however my filters are not working, maybe for better understanding of better from stackoverflow https://stackoverflow.com/questions/72571735/tabulator-are-not-working-on-midone-template
Hi,
Thank you for reaching out,
You can’t always check `table.setFilter()` or `table.download()` directly in the console. Everything imported in `app.js` will be bundled and scoped in an internal object so you need to make it global to access the object from the console.
For example, you can add this line after the tabulator initialization.
let table = new Tabulator("#tabulator", {
...
});
// Add this line
window.table = table;
Now, you should be able to access the object from the console. You may also need to check if the `onClick` event is working correctly.
Hello,
do I need to purchase Tailwind https://tailwindui.com/pricing also with Midone tempalte or it’s complete html+css+js template ready for use?
Hi,
Thank you for reaching out to us,
In short, the answer is no you don’t need to purchase TailwindUI license. We have built-in components ready to use.
hi, i just bought this template and i have difficulties on how to integrate this template with laravel
Hi there,
Thank you for reaching out to us..
It’s really simple since we used the same assets bundler `Laravel Mix`. However, you may need a little tweak to make it works. Please follow the following steps.
1. Copy the config files to your root project directory. postcss.config.js tailwind.config.js webpack.mix.js
2. Open package.json and adjust the dependencies to your project dependencies.
3. Copy the assets from `/src` to `/resources`.
You can load the assets with Laravel `mix()` directives.
<link rel="stylesheet" href="{{ mix('dist/css/app.css') }}" />
<script src="{{ mix('dist/js/app.js') }}"></script>
I notice I already had webpack.mix.js and packange.json, should i over write? or merge my files with yours?
So i did copy config files to my root folder, merged my webpack.mix.js and package.json with yours, then run npm run dev. But i got this error
webpack-cli { errno: -2, code: ‘ENOENT’, syscall: ‘lstat’, path: ’/Applications/XAMPP/xamppfiles/htdocs/WORK/new_project/src/json’ } npm ERR! code ELIFECYCLE npm ERR! errno 2 npm ERR! enigma@1.0.4 development: `mix` npm ERR! Exit status 2 npm ERR! npm ERR! Failed at the enigma@1.0.4 development script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in: npm ERR! /Users/martinchristopher/.npm/_logs/2022-06-09T07_52_46_274Z-debug.log npm ERR! code ELIFECYCLE npm ERR! errno 2 npm ERR! enigma@1.0.4 dev: `npm run development` npm ERR! Exit status 2 npm ERR! npm ERR! Failed at the enigma@1.0.4 dev script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in: npm ERR! /Users/martinchristopher/.npm/_logs/2022-06-09T07_52_46_310Z-debug.log
what did i do wrong?
I recommend to merge the config and dependencies, but if you’ve never used it before you can just replace it.
About the error, can you try compiling the HTML version? And what is your Node and NPM version?
sorry but i don’t know how to compile the error for html version, my node v14.17.5 and npm v6.14.14
It seems you need to update your Node & NPM version.
You can run `npm run install` to install the dependencies and `npm run watch` to start the compiler.
ok, i’ve updated my node to v16.15.1 and npm to v8.12.1. then i tried to run ‘npm run install’ it said missing script install, i tried to run ‘npm run watch’ it said ``` > concurrently “postcss ./src/css/app.css -o ./dist/css/_app.css—watch” “mix watch”
sh: concurrently: command not found ``` and when i tried to run ‘npm run dev’ it said ``` [Error: ENOENT: no such file or directory, lstat ’/Applications/XAMPP/xamppfiles/htdocs/WORK/new_project/src/json’] { errno: -2, code: ‘ENOENT’, syscall: ‘lstat’, path: ’/Applications/XAMPP/xamppfiles/htdocs/WORK/new_project/src/json’ } ```
Have you installed dependencies with ‘npm install’?
Sorry, it was my fault, the command should be `npm install`.
ok, i’ve run ‘npm install’ then tried npm run watch i got this error ’’‘Input Error: You must pass a valid list of files to parse’’’ and anything on copyDirective…. are error, ’’’.copyDirectory(“src/json”, “dist/json”) .copyDirectory(“src/fonts”, “dist/fonts”) .copyDirectory(“src/images”, “dist/images”)’’’ i got this message ’’‘[Error: ENOENT: no such file or directory, lstat ’/Applications/XAMPP/xamppfiles/htdocs/WORK/new_project/src/json’]’’’ i keep getting this error no such file json
You need to adjust the `copyDirectory` configuration according to your project directory structure.
For example:https://i.imgur.com/i1ImQqs.png
ok, i’ve successfully compile everything using ‘npm run dev’ then ‘npm run watch’ however i’m still unable to type ‘tailwind’ on console, it said ‘tailwind is undefined’ however, on html template i’ve downloaded when i type ‘tailwind’ on console it recognize it. I need it to trigger show modal using jQuery
Have you loaded the compiled javascript file? You may need to check if the javascript file is properly loaded.
<script src="{{ mix('dist/js/app.js') }}"></script>
turns out i need to restart it then it worked, thanks for step by step integration
Glad to help..
Hello,
I’ve trouble using the i tag with data-lucide attribute. The icon is not rendered in my page. I already included app.css and app.js from Compiled folder.
For now I can make the icon shown by using the svg tag from the rendered page that I copied from Chrome Developer Tools
Hi,
Thank you for reaching out to us,
Is there an error in the chrome console?
There is no error in the chrome or at least I don’t see one. There is no error 404 also when loading the assets, so I assumed all assets are loaded. I forget to mention that when I open the side-menu-light-icon.html from the Compiled folder the icon is rendered just fine, but when I try to copied the necessary files to my own projects, the icon doesn’t get rendered.
Can you send a very simple example to reproduce the issue? An online demo with just a blank page would be very helpful.
Hello!
Would it be possible to create any installation documentation for Rails with Esbuild?.
I think you’ll find that there is a large community of Rails developers who are migrating to Tailwind that would love to use this template. However, the installation process right now is very very difficult as it seems like this template was originally designed for PHP projects.
Hi alexcohenis,
Sorry for the late reply,
The package we are using `Laravel Mix` is actually a wrapper of webpack. We can use it standalone without being associated with Laravel or any other PHP framework.
However, we seem to be able to add a setup with `esbuild` to the documentation.
Hi, Just bought the HTML package. i want to add multiple ,js custom files and i don’t want to compile anything…. is there a simple way? cause right now, i get this error when i add a custon .js :
Cannot set property children of #<Document> which has only a getter
what i try to do :
@section Scripts {
<script src="/js/login.js"></script>
<script src="/Theme/dist/js/app.js"></script>
}Hi there,
Thank you for reaching out to us,
You don’t need to compile anything, except you want to use the plugin imported inside `app.js`.
Can you send a very minimal steps to reproduce this issue?
Hi, is this HTML version the same as it is included in Lavarel+HTML version of this template? We bought that one but it can not be used as a normal HTML template (html+css+js). Thanks
Hi Jimmi08,
Sorry for the late reply,
Yes, this is the same version as the HTML version contained in the Laravel version. Is there anything we can help with integration?
How do I hide the Side Menu options, according to permissions?
Hi vcazacu,
Thank you for reaching out,
You can follow the following steps.
1. Attach user role to view composer, open `App\Http\View\Composers\MenuComposer.php`. https://i.imgur.com/ia2Hzdq.png
2. Update menu layout. Example for `side-menu` layout `/resources/views/layout/side-menu.blade.php`. https://i.imgur.com/wIpbVEp.png
3. Final step, add the `roles` property to every menu item `App\Main\SideMenu.php`. https://i.imgur.com/VHOHPA0.png
You can also store the entire menu and its roles in the database for further development.
Hi! I Recently buy this template, i want to use it in a Angular Project like any HTML template but i can’t, could u help me pls? thanks!
Hi,
Thank you for reaching out to us,
Integrating with frontend frameworks like angular, vue, or react will be quite time consuming, and this is not included in the support.
However we will answer every question on the integration process. If you are new to Tailwind you may want to take a look at the following documentation. https://tailwindcss.com/docs/guides/angularPlease include more detailed questions so we can help with the issue you are experiencing.
