Discussion on Midone - Tailwind 4+ HTML Admin Dashboard Template

Discussion on Midone - Tailwind 4+ HTML Admin Dashboard Template

Cart 2,270 sales
Well Documented

Left4code supports this item

Supported

This author's response time can be up to 2 business days.

444 comments found.

Hi, I want to but one version of your template, I am developing with larval for backend and Vue.js for front end witch version do you advise me to take the Vue version or the HTML one?

Hi JigSnow,

Thank you for your interest to our template. Looking at your stack, I really recommend you to buy the Vuejs version which include 3 projects inside.

- HTML version

- Vuejs version (Created from vue cli)

- Laravel + Vuejs version (Vue SPA with laravel in a single project)

I think the Vuejs version can afford your needs.. :)

Hope this helps,

Best regards, Left4code

Hi I recently purchased Midone theme and it’s a great APP, 1 issue i am facing the summer-note order list and unorder list is not working in Post section. route : http://127.0.0.1:8000/page/side-menu/post

I am using Laravel version, please help me out how to solve this issue.

Thanks.

Regards: Hamad.

Hi hamadpervaiz,

Sorry, I can’t see your purchased badge. Can you post your question in the item that you have purchased?

Hello, im tryng to use datatables bootstrap 4 version: https://datatables.net/examples/styling/bootstrap4.html

but incliding the datatables bootsrap4 verison causing conflict to the templates : https://prnt.sc/v5vn4c

Hi diand_el,

As version 2 above released, we don’t use any plugins that has jquery dependency including datatable.

Now we use Tabulator library as our officially supported datagrid plugin.

Hope this helps

so why embedding datatables bootsrap4 verison causing templates unusable?

Maybe it caused by the plugin itself, since it’s built for bootstrap framework it shouldn’t be used on templates that built with other framework than bootstrap. There may be a conflict or missing between utility classes.

You may need to use the datatable plugin without bootstrap dependencies.

what is plugin ’./highlight’ used for?

Hi diand_el,

It used to highlight the code example, you can remove it on production level.. :)

Hello. i’m having issue with the tail select when using js to add dynamic field.. the initial field is okay, but the next additional field cannot be clicked after clicking the ”+” button, however, not using the tail select properties [ class=”tail-select w-full” data-search=”True”]

the code is here, ready to run: https://jsfiddle.net/mjogu4ck/

Simply add “search: true” to the Tailselect options.

tail(this, { classNames: 'w-full', search: true });

You can check all the Tailselect properties on their documentation page.

https://github.com/pytesNET/tail.select/wiki/public-options

hello im updating the css and js asset on here using global plugin https://jsfiddle.net/w5m3x7p0/ so you can test and see the result directly:

however beside should be able to clone functioning tail select it should be able to clone every field inside class=”mt-3 form-row” like code below (there already a js at the bottom that handly any kind of field) https://jsfiddle.net/g41sxd6z/

Hi diand_el,

I can only provide a support for the template features, functionality, and usage of third party plugins. You may need a developer to hire if you want to customize your code and guide you to achieve your expected result.

Hello, im trying to use datatable linked to CDN, but not work, im trying to load the datatables css & js, below after app.css and below app.js. aplied to the tables but not working the table doestn change, im using class “small-table”, please i need a solution asap… Thanks

Hi diand_el,

I just tried your code and find out the issue why it’s not working. It’s because you put the datatable intialization js code before the plugin (jquery & datatable), so the errors occured.

To fix the problem just put the datatable intialization js code after the jquery & datatable js script tag.

<script type="text/javascript" charset="utf8" src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script> <script type="text/javascript" class="init"> $(document).ready( function () { $('#myTable').DataTable(); }); </script>

Thank you so much! solved my problem!!

You’re welcome! :)

the latest version doesnt have datables integrated? im trying to use datatable linked to CDN, but not work, im prung to laod below after app.css and below app.js. not working the table doestn change, im using class “small-table”

hello? anyone?

I just replied to your latest comment, please check it.. :)

Let me know if you have any other questions.

is this theme support rtl ?

Hi onlinesa,

Sorry, we don’t have support for RTL layout.

Hi - Laravel version : I test with new install it’s working fine but I have problem,

If I create new site with Laravel 8 + Jetstream / livewire : for make Authorize system to use login/ log out / user management of Jetstream

how to include your theme to my project

Hi omeletmatter,

You may need to check the Laravel mix configuration and package.json file to check the template dependencies.

Then copy all the assets from ”/resources” directory. Thats all, some other details you will know after you do the configuration.

Does this template come with Tables such as DataTables? I thought it would but after buying quickly realized it was not in the menu as a page to display.

Hi skylerrichard,

Sorry for the inconvenience,

After the release of version 2 We removed support for jquery in our templates as well as all plugins that use jquery.

For that as a replacement we use the Tabulator for the datagrid plugin. Please check the demo here: https://midone.left4code.com/side-menu-light-tabulator.html And here is the official documentation: http://tabulator.info/docs/4.8/quickstart

Toastify plugin is not accessible from window scope, app.js seems not exporting Toastify correctly. it always raise “Toastify is not defined” exception. I have to load it separately to make it work.

Hi AliMushtaq2016,

Not all plugins exported by default. All javascript code should be written inside /src/ dir and compiled through webpack/mix.

Therefore you need to use “source” version if you want to export additional plugins to become globally accessible.

Here’s the way:

- After following the installation step on the documentation (installing npm etc). - Next, modify ”/src/js/bootstrap.js” to export Toastify plugin: // Load plugins import cash from 'cash-dom' import helper from './helper' import Toastify from 'toastify-js' // Set plugins globally window.cash = cash window.helper = helper window.Toastify = Toastify - Remove import statement from toastify plugin example code at ”/src/js/toast.js”. Remove this line of code. import Toastify from 'toastify-js'

How to change the datepicker date format to match my db config?

You can use data property like below:

<input type="text" data-format="D MMM, YYYY">

Or you can modify the default format at ”/src/js/datepicker.js”.

Please check the litepicker docs to see more format. https://wakirin.github.io/Litepicker/

Hello guys, this template is just stunning, until i’m working on it, the app.js is include all js with 10mb! wich looks clean and simple on paper, but when its comes to load speed, it not very efficient. on some network would take so long for the page to load, can you guys provide the separated js? i see some of the repply to edit current app.js which is very unpractical for purchased template like this. Thanks.

Hi diand_el,

We use npm as our package manager. So there’s no way to separate every external library. We really pay attention to the best practices in the code that we do, we have long abandoned using an external library without a package manager.

Anyway you don’t need to setup anything to compile the assets, we’ve covered this with Laravel mix. All you need to do is only install the dependencies with yarn/npm.

Then simply run “yarn run watch” to build the assets.

Please follow the documentation below. https://prnt.sc/urie8p

the menu expand not working if the google map js API Key not included, which is a conflict if i don’t need to use a google map, please fix this imidiately.. the template is not usable this way, or please provide a solution for this. waiting to hear from you guys asap. thanks.

Hi diand_el,

Sorry for late reply,

Please check the following code, you can remove this code to work only with the basic features of the template.

For js code – App.js // 3rd Parties import bootstrap from './bootstrap' import chart from './chart' // remove import highlight from './highlight' // remove import feather from './feather' import slick from './slick' // remove import tooltipster from './tooltipster' import datatable from './datatable' // remove import datepicker from './datepicker' // remove import select2 from './select2' // remove import dropzone from './dropzone' // remove import summernote from './summernote' // remove import validation from './validation' // remove import imageZoom from './image-zoom' // remove import svgLoader from './svg-loader' import toast from './toast' // remove // Components import maps from './maps' // remove import chat from './chat' // remove import dropdown from './dropdown' import modal from './modal' import showModal from './show-modal' import tab from './tab' import accordion from './accordion' import search from './search' import copyCode from './copy-code' // remove import showCode from './show-code' // remove import sideMenu from './side-menu' import mobileMenu from './mobile-menu' import sideMenuTooltip from './side-menu-tooltip' For css code – App.scss // Fonts @import 'fonts/roboto'; // Breakpoint @import 'breakpoint'; // 3rd Parties @import '~slick-carousel/slick/slick'; // remove @import '~slick-carousel/slick/slick-theme'; // remove @import '~highlight.js/scss/github'; // remove @import '~tooltipster/dist/css/tooltipster.bundle.min'; @import '~tooltipster/dist/css/plugins/tooltipster/sideTip/themes/tooltipster-sideTip-shadow.min'; @import '~tooltipster/dist/css/plugins/tooltipster/sideTip/themes/tooltipster-sideTip-borderless.min'; @import '~daterangepicker/daterangepicker'; // remove @import '~select2/src/scss/core'; // remove @import '~dropzone/dist/dropzone'; // remove @import '~jquery-toast-plugin/src/jquery.toast'; // remove // Animations @import 'typing-dots'; @import 'zoom-in'; @import 'intro'; // Components @import 'top-bar'; @import 'app'; @import 'login'; @import 'mini-chat-box'; // remove @import 'mini-chat-list'; // remove @import 'mini-chat'; // remove @import 'table'; @import 'table-report'; // remove @import 'report-timeline'; // remove @import 'report-chart'; // remove @import 'search'; @import 'input'; @import 'button'; @import 'notification'; @import 'image-fit'; @import 'box'; @import 'report-box'; // remove @import 'global'; @import 'content'; @import 'top-nav'; @import 'side-nav'; @import 'breadcrumb'; @import 'tailwind'; @import 'top-bar-boxed'; @import 'mobile-menu'; @import 'pagination'; @import 'dropdown'; @import 'modal'; @import 'tab'; @import 'checkbox'; @import 'file'; // remove @import 'inbox-filter'; // remove @import 'inbox'; // remove @import 'scrollbar'; @import 'chat'; // remove @import 'boxed-tabs'; @import 'chat-dropdown'; // remove @import 'wizard'; // remove @import 'blog'; // remove @import 'news'; // remove @import 'pricing-tabs'; // remove @import 'accordion'; @import 'error-page'; @import 'tooltip'; @import 'datatable-wrapper'; // remove @import 'datepicker'; // remove @import 'select2'; // remove @import 'summernote'; // remove @import 'slick'; // remove @import 'jquery-validation'; // remove @import 'slick'; // remove @import 'search-result'; @import 'mini-report-chart'; // remove @import 'notification-content'; @import 'report-maps'; // remove @import 'pos-dropdown'; // remove @import 'pos'; // remove @import 'toast'; // remove @import 'post'; // remove

Hello, is there a way to show / list every package size of all package installed in app.js before compiled? so i can consider wich to keep based on size?

Hi diand_el,

Unfortunately there’s no way to show the package size before it getting compiled. You might try separate the js vendor package by re-configure the Laravel mix settings.

Please check the illustration below, let’s say we want to extract the dropzone plugi:

Make new SASS file (/src/sass/dropzone.scss) @import '~dropzone/dist/dropzone'; Make new JS file (/src/js/dropzone.js) import from './dropzone' Configure Laravel mix: mix.js('src/js/dropzone.js', 'dist/js') .sass('src/sass/dropzone.scss', 'dist/css') Now remove dropzone plugin from app.js and app.scss. Then you can include the dropzone plugin to your HTML file. <head> <title>Midone</title> <link rel="stylesheet" href="dist/css/dropzone.css"/> <link rel="stylesheet" href="dist/css/app.css"/> </head> <script src="dist/js/dropzone.js"></script> <script src="dist/js/app.js"></script> Now you can see the size of the dropzone.js package on the network console. Here’s an example with app.js. https://prnt.sc/uzm2dw

udah sy bayar gan.. lg proses download…thanks

Oke gan.. :)

gan.. gimana cara pake chart donut dalam 1 line table dan kolom?

<canvas id=”donut-chart-widget” height=”50”></canvas> <canvas id=”donut-chart-widget” height=”50”></canvas> <canvas id=”donut-chart-widget” height=”50”></canvas>

saya coba rubah di app.js jadikan seperti ada arraynya tapi gak jalan…

var _ctx9 = cash('#donut-chart-widget')[1].getContext('2d');

Kemudian saya coba ganti ID canvas juga gak nongol.. caranya gmn yah? bingung… makasih gan..

Halo gan,

Maaf, maksudnya chart donut dalam 1 line table ini seperti apa ya?

Saya kurang paham, ada contoh gambarnya?

Hi.

Your Components > Grid > Tabulator page has an javascript error!

Hi sojupiter,

Can you describe in more detail the error you are referring to?

I can’t find it in the demo file. A screenshot will be very helpful .. :)

Hello, how are you ? The coding of this theme it is very confusing full of classes and it is not very clean the code could reverse the purchase made. Yesterday this theme was bought the midone.

Yes it is!

When you read about TailwindCSS you will know that it is a framework, and you should understand that the template are built with TailwindCSS.

Just like other CSS frameworks like MaterializeCSS, Bulma, or Foundation.

it must be specified! That is why you have the option of describing, describing what the topic is and not leaving it implied, it is not clear! I am very dissatisfied I want my money back!

I think like you don’t read the description carefully, I am very sorry We got so many sales and multiple reviews without having any problems with the description (Please check it at reviews tab).

You can apply for a refund according to the item you bought, we will process it according to the Envato refund policy at link below… :)

https://themeforest.net/page/customer_refund_policy

Hi how are you? I can’t download the HTML midone

Hi danilolimar,

Thank you for your purchase.. :)

You can download your item at “downloads” tab. Please check this link:

https://help.market.envato.com/hc/en-us/articles/202501014-How-To-Download-Your-Items
I am getting this error (8042:3) `@apply` cannot be used with `.text-current` because `.text-current` either cannot be found, or its actual definition includes a pseudo-selector like :hover, :active, etc. If you're sure that `.text-current` exists, make sure that any `@import` statements are being properly processed *before* Tailwind CSS sees your CSS, as `@apply` can only be used for classes in the same CSS tree.

Hi traceyjas,

Is your dependency installation running smoothly?

Can you please show me your package.json contents?

Is it possible to get a refund i purchased the html version instead of the laravel version and i want to purchase the laravel version

Hi traceyjas,

Yes, it’s possible but it may take a few days to be processed.

Please email me your Laravel version purchase code here muhammadrizki@left4code.com, and make a refund request then. We will process it immediately.. :)

by
by
by
by
by
by

Tell us what you think!

We'd like to ask you a few questions to help improve ThemeForest.

Sure, take me to the survey