Good theme update styling error
Hi,
Thought you should know that the top right icons are not horizontally aligned in the latest update to the Good admin dashboard.
Cheers
Replies (21)
For clarity: Search, notifications icon, etc are stacked horizontally.
Oh, also the sidebar is missing: https://preview.keenthemes.com/good/
Using Safari 15.4
Hi,
Could you please try to refresh your browser cache ? The new updates come with new layouts and styles. Also please try to reset the layout builder.
Regard.
Hi,
Yes, that seems to have fixed it.
I've installed via Laravel and followed your instructions but I still have a few errors:
DevTools failed to load source map: Could not load content for http://homestead.test/backend/assets/plugins/global/sourcemaps/tiny-slider.css.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILUREDoes the webpack.mix.js need updating after the latest update?
It looks like the plugins.bundle.js file is missing references.
Thanks again
One other thing. I seem to have a few additional plugin bundles missing.
I'm getting this error:
GET http://homestead.test/backend/assets/plugins/custom/datatables/datatables.bundle.js net::ERR_ABORTED 404 (Not Found)datatables.net does exist in my node_modules folder.
Thanks again in advance for your excellent customer support 
Hi Toby,
Please try to update the webpack.mix.js with the latest version. You do not need to replace it, but you can copy the content and move it into your existing webpack config file.
Also please check if the folder here exists? It will generate the datatable bundle file.
resources/assets/core/plugins/custom/datatables
Thanks
Hi Faizal,
Thanks for getting back to me.
I don't have a webpack.mix.js file in the downloaded theme, only a webpack.config.js and the plugins/custom folder does not exist.
I used the webpack.mix.js from the documentation under: Server Side Integration -> Laravel
Is this up to date?
Thanks again
One thing I am wondering about is that I needed to change the root path of the assets from /resources/src to /resources/backend/src
I have updated paths where I can, for example in webpack/plugins/plugins.js the local path now reads @/backend/src/
Is this correct?
P.S. I have no errors from: npm run dev
Hi Tody,
That mean, does it work now?
No, still as above. No errors on build but missing resources/assets/core/plugins/custom folder and the following errors in browser
GET http://homestead.test/backend/assets/plugins/custom/vis-timeline/vis-timeline.bundle.css net::ERR_ABORTED 404 (Not Found)
admin:37 GET http://homestead.test/backend/assets/plugins/custom/datatables/datatables.bundle.css net::ERR_ABORTED 404 (Not Found)
DevTools failed to load source map: Could not load content for http://homestead.test/backend/assets/plugins/global/sourcemaps/tiny-slider.css.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
admin:8426 GET http://homestead.test/backend/assets/plugins/custom/datatables/datatables.bundle.js net::ERR_ABORTED 404 (Not Found)
admin:8427 GET http://homestead.test/backend/assets/plugins/custom/vis-timeline/vis-timeline.bundle.js net::ERR_ABORTED 404 (Not Found)
plugins.bundle.css:1 GET http://homestead.test/backend/assets/plugins/global/fonticon.ttf?8c99757ffa673e941699f68d7b9547b2 net::ERR_ABORTED 404 (Not Found)
widget-3.js?f405:11 Uncaught TypeError: $(...).DataTable is not a function
at initDatatable (widget-3.js?f405:11:30)
at Object.init (widget-3.js?f405:69:13)
at HTMLDocument.eval (widget-3.js?f405:83:21)
initDatatable @ widget-3.js?f405:11
init @ widget-3.js?f405:69
eval @ widget-3.js?f405:83
widget-1.js?3de3:23 Uncaught ReferenceError: vis is not defined
at initTimelineDay (widget-1.js?3de3:23:22)
at Object.init (widget-1.js?3de3:584:13)
at HTMLDocument.eval (widget-1.js?3de3:598:23)
initTimelineDay @ widget-1.js?3de3:23
init @ widget-1.js?3de3:584
eval @ widget-1.js?3de3:598
plugins.bundle.css:1 GET http://homestead.test/backend/assets/plugins/global/fonticon.woff?8c99757ffa673e941699f68d7b9547b2 net::ERR_ABORTED 404 (Not Found)
plugins.bundle.css:1 GET http://homestead.test/backend/assets/plugins/global/fonticon.woff2?8c99757ffa673e941699f68d7b9547b2 net::ERR_ABORTED 404 (Not Found)Hey @Faizal,
Any ideas on this? I've noticed that the Laravel webpack suggested in the documentation doesn't seem to contain anything about the /plugins/custom folder. Can I copy things over manually?
Here are the steps to reproduce:
Install Laravel 9
Copy src across to /resources/backend
Copy tools/webpack to /resources/backend
Edit /resources/backend/src/sass/components/components.scss and change ../../../tools/node_modules/ to ~
Copy devDependencies and dependencies sections from theme/tools/package.json and paste them into /package.json - Make sure to leave laravel-mix in devDependancies
Run npm install - which returns error: ERESOLVE unable to resolve dependency tree
Run npm install --force
Copy webpack.mix.js content from documentation to /webpack.mix.js
Replace resources/ with resources/backend/
Replace public/assets with public/backend/assets
Run npm run dev
Could it be these lines in webpack.mix.js as resources/backend/src/plugins/custom doesn't exist?
// Raw plugins
(glob.sync(`resources/backend/src/plugins/custom/**/*.js.json`) || []).forEach(
(file) => {
let filePaths = JSON.parse(fs.readFileSync(file, "utf-8"));
const fileName = path.basename(file).replace(".js.json", "");
mix.scripts(
filePaths,
`public/backend/assets/plugins/custom/${fileName}/${fileName}.bundle.js`
);
}
);There is a resources/backend/src/webpack/plugins/custom but none of the child folders contain any files with a *.js.json extension.
Sorry to pester you on this but it feels like I'm close and I'm keen to use this theme in my project.
Thanks again
Hi Toby,
The error says that the file seems does not to exist. Please check the config file for the import vis-timeline plugin here.
Please check the import file inside.
backend/assets/plugins/custom/vis-timeline/vis-timeline.json
Thanks
Hi,
Thanks for getting back to me.
I do not have a backend/assets/plugins/custom folder.
Is the copy missing from the Laravel webpack code in your documentation?
Hi,
Sorry for the inconvenience. In that case, could you please try to remove this code block from the webpack.config.js file? Then rerun the "npm run dev".
(glob.sync(`resources/backend/src/plugins/custom/**/*.js.json`) || []).forEach(
...Thanks
Thanks for your reply, I have removed the code
// Raw plugins
// (glob.sync(`resources/backend/src/plugins/custom/**/*.js.json`) || []).forEach(
// (file) => {
// let filePaths = JSON.parse(fs.readFileSync(file, "utf-8"));
// const fileName = path.basename(file).replace(".js.json", "");
// mix.scripts(
// filePaths,
// `public/backend/assets/plugins/custom/${fileName}/${fileName}.bundle.js`
// );
// }
// );Still no backend/assets/plugins/custom folder 
I have noticed that the following function is included in the webpack.config.js that came with the theme but does not appear in the Laravel webpack file from your documentation
function importExtraPlugins() {
// Optional: Import datatables.net
extraPlugins.push(new MergeIntoSingle({
files: {
'plugins/custom/datatables/datatables.bundle.js': [
"node_modules/datatables.net/js/jquery.dataTables.js",
"node_modules/datatables.net-bs5/js/dataTables.bootstrap5.js",
path.relative('./', demoPath) + "/src/js/vendors/plugins/datatables.init.js",
"node_modules/jszip/dist/jszip.min.js",
"node_modules/pdfmake/build/pdfmake.min.js",
"node_modules/pdfmake/build/vfs_fonts.js",
"node_modules/datatables.net-buttons/js/dataTables.buttons.min.js",
"node_modules/datatables.net-buttons-bs5/js/buttons.bootstrap5.min.js",
"node_modules/datatables.net-buttons/js/buttons.colVis.js",
"node_modules/datatables.net-buttons/js/buttons.flash.js",
"node_modules/datatables.net-buttons/js/buttons.html5.js",
"node_modules/datatables.net-buttons/js/buttons.print.js",
"node_modules/datatables.net-colreorder/js/dataTables.colReorder.min.js",
"node_modules/datatables.net-colreorder-bs5/js/colReorder.bootstrap5.js",
"node_modules/datatables.net-fixedcolumns/js/dataTables.fixedColumns.min.js",
"node_modules/datatables.net-fixedcolumns-bs5/js/fixedColumns.bootstrap5.js",
"node_modules/datatables.net-fixedheader/js/dataTables.fixedHeader.min.js",
"node_modules/datatables.net-fixedheader-bs5/js/fixedHeader.bootstrap5.js",
"node_modules/datatables.net-responsive/js/dataTables.responsive.min.js",
"node_modules/datatables.net-responsive-bs5/js/responsive.bootstrap5.min.js",
"node_modules/datatables.net-rowgroup/js/dataTables.rowGroup.min.js",
"node_modules/datatables.net-rowgroup-bs5/js/rowGroup.bootstrap5.js",
"node_modules/datatables.net-rowreorder/js/dataTables.rowReorder.min.js",
"node_modules/datatables.net-rowreorder-bs5/js/rowReorder.bootstrap5.js",
"node_modules/datatables.net-scroller/js/dataTables.scroller.min.js",
"node_modules/datatables.net-scroller-bs5/js/dataTables.bootstrap5.js",
"node_modules/datatables.net-select/js/dataTables.select.min.js",
"node_modules/datatables.net-select-bs5/js/dataTables.bootstrap5.js",
"node_modules/datatables.net-datetime/dist/dataTables.dateTime.min.js",
],
'plugins/custom/datatables/pdfmake.min.js.map': [
'node_modules/pdfmake/build/pdfmake.min.js.map',
],
'plugins/custom/datatables/datatables.bundle.css': [
"node_modules/datatables.net-bs5/css/dataTables.bootstrap5.css",
"node_modules/datatables.net-buttons-bs5/css/buttons.bootstrap5.min.css",
"node_modules/datatables.net-colreorder-bs5/css/colReorder.bootstrap5.min.css",
"node_modules/datatables.net-fixedcolumns-bs5/css/fixedColumns.bootstrap5.min.css",
"node_modules/datatables.net-fixedheader-bs5/css/fixedHeader.bootstrap5.min.css",
"node_modules/datatables.net-responsive-bs5/css/responsive.bootstrap5.min.css",
"node_modules/datatables.net-rowreorder-bs5/css/rowReorder.bootstrap5.min.css",
"node_modules/datatables.net-scroller-bs5/css/scroller.bootstrap5.min.css",
"node_modules/datatables.net-select-bs5/css/select.bootstrap5.min.css",
"node_modules/datatables.net-datetime/dist/dataTables.dateTime.min.css",
], // fullcalendar
'plugins/custom/fullcalendar/fullcalendar.bundle.js': [
'node_modules/fullcalendar/main.js',
'node_modules/fullcalendar/locales-all.min.js',
],
'plugins/custom/fullcalendar/fullcalendar.bundle.css': [
'node_modules/fullcalendar/main.min.css',
],
},
}));
}
Could this be why the files are not being copied?
I've tried adding it in with the correct paths but it didn't work either
OK, it's been a week with no fix. I think it might be time to seek a refund and look for another admin theme
Hi Toby,
Sorry for the inconvenience. How was the issue going? I saw you posted something.
Thanks
