444 comments found.
purchase code:-683ac82c-0ce3-4d06-99d3-07b5413b2cad / While trying to implement modal popup in the theme. The modal popup html gets created outside the page form tag and hence we are not able to use postback and other features. Can you please help with the same
Thanks in advance
Hello,
We apologize for the delay in addressing your message. We understand that you’re encountering an issue with the implementation of a modal popup in the theme. The problem you described, where the modal HTML is created outside the page’s form tag, can affect the usage of postback and other features.
We want to assure you that this behavior is a common pattern found in many libraries. In React, it is referred to as “Portals,” and in Vue, it is known as “Teleport.” These mechanisms are designed to render elements outside their parent containers, which might have restrictions such as `overflow` or `z-index`.
To provide further assistance, could you please provide us with more detailed information about the issue? Specifically, explain how the modal HTML is being positioned outside the form tag and the specific challenges it presents. This will enable us to offer you a more tailored solution that ensures the modal works seamlessly within your intended context.
We appreciate your understanding and patience as we work towards resolving this matter for you.
Hi, I’m trying to integrate this into a Rails 7 project (uses esbuild, postcss, and rails asset pipeline), and am slowly working my way through the issues. The previous comments and answers here have been very helpful.
However, one issue is that my CI pipeline uses yarn audit, and postcss-for is pretty old and uses a vulnerable version of postcss, which triggers a failure for us. Any recommendations?
here’s a snippet from the package.json of postcss-for:
```
“dependencies”: {
“postcss”: “5.0.0”,
“postcss-simple-vars”: “2.0.0”
},
```
those versions are old 
I’m not hugely familiar with the node ecosystem, so what is the best way to resolve this?
Thanks!
Hi,
I’m glad to hear that the previous comments and answers have been helpful to you. I understand that you’re facing an issue with the yarn audit in your CI pipeline due to the outdated version of postcss used by postcss-for.
To resolve this, I recommend the following steps:
Update the dependencies in the package.json file of postcss-for:
"dependencies": {
"postcss": "^8.3.6",
"postcss-simple-vars": "^6.0.0"
}
By specifying the latest versions of postcss and postcss-simple-vars, you can ensure that you’re using the most up-to-date and secure versions.
Run `yarn install` or `npm install` to update the dependencies based on the updated package.json file. Verify that the issue is resolved by running yarn audit again. Updating the dependencies should address the vulnerability issue and allow you to pass the yarn audit in your CI pipeline.
Actually, we also use a similar library that you can use in your template, called `postcss-advanced-variable`. You can check it out at the following link:
https://www.npmjs.com/package/postcss-advanced-variables
Feel free to explore this library as an alternative option. If you have any more questions or need further assistance, please let us know. We’re here to help!
Best regards, Left4code Team
Hi,
I hope this will be my last question 
I’ve noticed that the css sm: prefix doesn’t affect view. My code is shown below:
<div class=”mt-4 grid grid-cols-2 sm:grid-cols-1 gap-3”> <div class=”form-control”> <label for=”password” class=”form-label”>{{ __(‘common.password’) }}</label> <input id=”password” name=”password” type=”password” class=”form-control w-full”> </div> </div>
<div class="form-control">
<label for="permission" class="form-label">{{ __('common.rePassword') }}</label>
<input id="rePassword" name="rePassword" type="password" class="form-control w-full">
</div>My expectation is that the two elements stand side by side in browser mode, and position one under the other in mobile view.
But it’s not working
Can you help me?
Hello,
I’m really sorry for the delay in getting back to you. I understand how frustrating it can be to have to wait for a response. Thank you so much for your understanding and patience.
In the code above, the input element has a display status of inline-block, which means it will appear side by side. To make it stack vertically on mobile screens, you can add the following class to the input element (form-control): `block sm:inline-block`.
By adding this class, the input element will be displayed as a block-level element on mobile screens, causing it to stack vertically. On larger screens, it will revert to the default inline-block display.
I hope this helps! Let me know if you have any further questions or need any additional assistance.
Sorry, i couldn’t add my question properly. Actually problem is not input element, as you see problem is grid system. I add this class: “grid grid-cols-2 sm:grid-cols-1” My expectation is in browser mode 2 columns, in mobile mode one column. But “sm:grid-cols-1” does not work as i expect
Hello,
I apologize for the misunderstanding. Sorry if my previous response didn’t quite hit the mark.
The responsive mechanism in Tailwind follows a mobile-first approach, so you can modify it as follows: `grid grid-cols-1 sm:grid-cols-2`. This will make the grid display one column on mobile devices and two columns on larger screens.
Hope that helps! Let me know if you have any more questions.
It did not work. I think i make mistake somewhere:
Hi there,
Thank you for your reply. I noticed that you’re using Laravel based on the code you shared. Have you added the PHP extension to your `tailwind.config.js` file? If not, it’s important to add it so that the compiler can recognize the classes you’re using in your Blade files. Just a friendly reminder, remember to run the compiler whenever you make any changes to your code.
If you have any other questions or need further assistance, feel free to let me know. I’m here to help!
I think it’s already added:
Also, that sample code does not work in midone source html files.
I solved my problem that way: <div class=”grid-cols-2 sm:grid gap-3”>
Thanks for interesting. Just a little suggestion: You should add more form examples to your template
Hi again, When i want to use toast javascript throws error: Uncaught ReferenceError: Toastify is not defined
My code is like that: $(”.btn-outline-secondary”).on(“click”, function () { Toastify({ node: $(”#notification-with-buttons-below-content”) .clone() .removeClass(“hidden”)[0], duration: -1, newWindow: true, close: true, gravity: “top”, position: “right”, stopOnFocus: true, }).showToast(); });
I think this is a spesific error about my project but i hope you can offer something to me.
Thank you.
Hello,
Thank you for reaching out to us. We apologize for the error you’re experiencing with the Toastify library. The “Uncaught ReferenceError: Toastify is not defined” error typically occurs when the library is not properly loaded or imported into your project.
To resolve this issue, please open this file ”/src/js/bootstrap.js” and add these lines.
By adding it to the window object, you make the Toastify variable accessible globally throughout your application. This allows you to use Toastify anywhere in your code without needing to import it again.
In summary, the code imports the Toastify library and makes it available globally by assigning it to the window object. This ensures that the Toastify functionality can be used in any part of your application without the need for re-importing.
If the issue persists or if you have any further questions, please feel free to let us know. We’re here to assist you.
Best regards, Left4Code Team
Great! Thank you
You’re welcome! If you have any more questions, feel free to ask. I’m here to help!
Hi, I am using Midone Enigma-v1.05 as dashboard top and left navigation. and using w2ui in the contents part. But I have a problem when w2ui form check field. The problem is that when click check box, there is nothing checked mark but the value is still alive.
I think there must be conflict w2ui form check and Midone check box. can you tell me how to disable Midone Enigma check box ?
thanks
Hello,
Thank you for reaching out to us. We’re sorry to hear that you’re experiencing an issue with the check boxes in the Midone Enigma-v1.05 dashboard. We understand that there might be a conflict between the w2ui form check field and the Midone check box.
To disable the Midone Enigma check box, you can try to open this file ”/src/css/app.css” and comment this import CSS file.
If you need further assistance or if you have any other questions, please feel free to let us know. We’re here to help.
Best regards, Left4Code Team
Hi, How can i use jquery in enigma? i added $(document).ready(); after app.js but it throw error.
Probably it’s easy but i didnt find how
Hello,
Thank you for reaching out to us. To use jQuery in Enigma, you need to follow these steps:
Make sure you have jQuery installed in your project. You can either download the jQuery library and include it in your project manually or use a package manager like npm or yarn to install it.
yarn add jquery
After installing jQuery in your project, open this file ”/src/js/bootstrap.js”, and update these lines to change our built-in `dom` library with jquery.
Next, you must run “yarn run watch” to recompile the updated code. Let me know if you have any further questions or issues. I’m here to help!
Best regards, Left4code Team
Thank you, it worked
Hello,
You’re welcome! We’re glad to hear that the solution worked for you and that the issue is resolved now.
If you have any more questions or need further assistance in the future, please feel free to reach out. We’re here to help!
Best regards, Left4Code Team
Hello, I hope you are well. I used this template and customized it. But when deploying a test version, I have a problem when I refresh a page. The server message is: ‘404 Not Found nginx/1.18.0 (Ubuntu)’.
I really don’t know what additional configurations to add. I’ve done some research but nothing concrete. Seeing previews on http://midone.left4code.com/ makes me think that you have solved this problem.
Thanks in advance, I hope you will help the beginner developer that I am.
FrontEnd beginner
RainsongHello,
Thank you for reaching out to us. We would be more than happy to help you with your issue! However, we kindly request that you provide your question on the discussion page of the corresponding item/template. This will ensure that we can provide you with the best possible assistance.
Also, please note that we are currently unable to locate your purchased license in the comments. If you could provide us with your purchase details, we will be better able to assist you.
Thank you for your understanding, and we look forward to hearing from you soon!
Hi,
Thank you for your response. We appreciate your feedback. Regarding your query, could you kindly provide us with more detailed step-by-step information on reproducing the issue? Additionally, it would be helpful to know if this issue occurs on all pages or specific ones.
By providing us with more information, we can better understand the problem and offer a more accurate solution. We’re here to assist you, so please don’t hesitate to share any additional details or concerns you may have.
Thank you for your cooperation. We look forward to resolving this matter for you.
Hi!
The issue occurs everytime I refresh a page. When loading, the main page is displayed very well, but will show this : ‘404 Not Found nginx/1.18.0 (Ubuntu)’, if I refresh it. And this is the behaviour of all views.
When in the App.jsx file we change BrowserRouter by HashRouter, a ’#’ is added after the root url and everything is displayed normally. Seeing the demo http://enigma-react.left4code.com/, we understand that it is possible to solve the problem while using BrowserRouter.
We think that the problem is related to Vite.js and project configs.
Hello,
Thank you for bringing this issue to our attention. We apologize for any inconvenience you’ve experienced.
The issue you’re facing with the 404 error when refreshing pages in your React app is likely related to the server configuration rather than Vite.js or project-specific settings. It seems that the server is not correctly handling the routing of your app.
To resolve this issue, you can try configuring the server to redirect all requests to the root URL, which will allow your React app to handle the routing internally.
In the case of Nginx, you can modify the server configuration as follows:
server {
listen 80;
server_name yourdomain.com;
root /path/to/your/react/app/build;
location / {
try_files $uri $uri/ /index.html;
}
}
By using the try_files directive with the /index.html fallback, Nginx will attempt to serve the requested files first. If they don’t exist, it will rewrite the request to the index.html file, allowing your React app to handle the routing.
Please make sure to replace yourdomain.com with your actual domain name and /path/to/your/react/app/build with the correct path to your React app’s build directory.
After making these changes, restart or reload Nginx for the configuration to take effect. This should resolve the issue with refreshing pages in your React app.
If you continue to experience difficulties or have any further questions, please let us know, and we’ll be happy to assist you further.
Thank you for your understanding.
Best regards, Left4code Team
Hello,
Thank you for reaching out to us. We would be more than happy to help you with your issue! However, we kindly request that you provide your question on the discussion page of the corresponding item/template. This will ensure that we can provide you with the best possible assistance.
Also, please note that we are currently unable to locate your purchased license in the comments. If you could provide us with your purchase details, we will be better able to assist you.
Thank you for your understanding, and we look forward to hearing from you soon!
Have you ever integrated bootstrap-table.com library into Midone template? I’m try to use them together but some css class or code are crashing. Also, I tried to add it to the Midone build but it was unsuccessful.
Hi davidcorderochanto,
We apologize for the late reply, and we appreciate your patience. We’re sorry to hear that you’re experiencing some issues with the integration.
Regarding the crashing of CSS classes or code, it could be due to conflicts between TailwindCSS and Bootstrap CSS. We recommend that you try to isolate the conflicting styles and override them using the appropriate TailwindCSS classes.
As for the unsuccessful integration, can you please provide more details on the steps you took and the errors you encountered? It will be easier for us to help you if we have a clearer understanding of the issue.
Looking forward to your response!
Dear Author,
To use Enigma_v1.0.5 and apply it to our system, I first set up the environment and build it. I encountered a problem during this process and are reaching out to you.
There are three types of build process. 1. Build up as is: 1.1 Download and unzip and copy Enigma_v1.0.5 1.2 set up following on the Enigma root folder 1.2.1 yarn 1.2.2 yarn watch 1.2.3 watching index.html file at brower and it looked exactly the same as the preview in the browser 1.3 It works well
2. Build up after upgrading all package in packages.json recommended by ncu command. 2.1 replace package version number as noticed by ncu(npm-check-update) 2.2 yarn watch and fix some problems 2.2.1 change simplebar/src/simplebar.css > simplebar/dist/simplebar.css in src/css/app.css 2.2.2 change 2 lines import xlsx from 'xlsx' to import * as xlsx from 'xlsx' and import Tabulator from 'tabulator-tables' > import { Tabulator } from ‘tabulator-tables’ 2.3. watching index.html file in browser and it work well: it looked exactly the same as the preview in the browser.
3. exactly same 2nd case except create html folder in Enigma_v1.0.5 root folder and move all html file. 3.1 create html folder and move all html files to html folder. 3.2 keep package.json file from case 2 3.3 rm -rf node_modules and yarn.lock 3.4 yarn and yarn watch 3.5 move dist folder to html folder. 3.6 the main point is that creating dist folder without html. 3.7 watching html/index.html file at browser and it looked some broken. top menu and side menu looks good but contents broken I want to why this happened.
Please let me know.
Dear iriveroaks,
Thank you for reaching out, and I apologize for the delayed response. Based on your comment, it seems that you are encountering some issues while trying to set up and build Enigma_v1.0.5 for your system.
From the three types of build processes you have listed, it seems that you were able to successfully build and run Enigma_v1.0.5 on the first and second processes. However, you encountered some problems on the third process, particularly with the contents being broken when you moved the ”/dist” folder to the ”/html” folder.
To move files to a new directory, for example, ”/html,” you need to adjust the “tailwind.config.js” settings so that the JIT compiler can read the utility classes used. Please check the following example.
content: [
"./src/**/*.{php,html,js,jsx,ts,tsx,vue}",
"./resources/**/*.{php,html,js,jsx,ts,tsx,vue}",
"./node_modules/@left4code/tw-starter/**/*.js",
".//*.html",
// Add this line
"./html"
],
Let us know if you have any further questions or concerns. We’re always happy to help!
Best regards, Left4code Team
it works. thanks
it works, thanks. I add ”./html/*.html” instead of ”./html”
Hi there, no worries! I’m glad to hear that it’s working for you now. Thank you for letting me know about the correction you made to the file path – I appreciate the update. Don’t hesitate to reach out if you have any further questions or issues. Have a great day!
Hi again. We’re having great success with this theme and your support is amazing. Thanks again for the help so far.
This is about merging the tailwinds colors into your core css. Is it possible?
For example, comparing to bootstrap, if you want to make a special class called a bd-callout-nnnnn with some styling, but you want that class to follow the same expanded color set as ALL of bootstrap colors, you might use something like this in your scss file:
@each $color, $value in $theme-colors {
.bd-callout-#{$color} {
border-left-color: $value !important;
}
}
and this would make classes for every root color, like bd-callout-primary, bd-callout-danger, etc. with the correct color in the style declaration.
I’m wondering if there is a way to do this with some of your classes – specifically the btn-nnnnnn and btn-outline-nnnnnnn classes. Currently they ONLY work with the root set and they do not work with the tailwinds color sets.
Example:
btn-primary works, but btn-blue-600 does not work.
Do you know of a clever function or preprocess code to make this work?
Since watch and prod clean up the rendered css to be as small as possible, having these options would be great!
Thanks again!
Hello there! We are absolutely thrilled to hear that our theme is working well for you and that our support has been helpful. We’re always happy to assist in any way we can.
Regarding your question, the good news is that there is a solution! You can use the built-in `addComponents` function from Tailwind, which is documented in the following links:
https://tailwindcss.com/docs/functions-and-directives https://tailwindcss.com/docs/plugins#overviewTo help you get started, here’s an example configuration that you can use.
plugin(function ({ theme, addComponents }) {
for (const [key, value] of Object.entries(theme("colors"))) {
addComponents({
[".bd-callout-" + key]: {
borderLeftColor: value,
},
});
}
})
We hope that helps! If you have any other questions or concerns, please don’t hesitate to reach out to us. We’re always here to help.
Thank you for choosing our theme!
Thank you very much. I will give this a try! Much appreciated!
You’re welcome! I’m glad to hear that my suggestion was helpful. Don’t hesitate to reach out again if you have any further questions or concerns.
plugins: [
require("@tailwindcss/forms"),
require("tw-elements/dist/plugin"),
plugin(function({ theme, addComponents }) {
for (const [key, value] of Object.entries(theme("colors"))) {
addComponents({
[".btn-" + key]: {
background-color: value,
},
});
}
}),
],
I took the dash out of background-color and my syntax warnings went away but then of course, it did nothing. I’m pretty lost.
I did include the line at the top of this file
const plugin = require('tailwindcss/plugin'); after finding that instruction on their docs, but it didn’t seem to do anything.
Sorry to ask you. I know you teaching us about tailwinds is not your responsibility, but tailwinds is very convoluted for newcomers.
Thanks for your help.
Hi there! I’m sorry to hear that you’re still having trouble getting the code to work. From your explanation, it seems like you have the right idea by adding the code to your tailwind.config.js file. However, it looks like there might be some issues with the syntax of the code that you added.
Just to clarify, the tailwind.config.js file is where you can configure various settings for your Tailwind CSS installation, including customizing the default color palette. To add a custom color to the palette, you can use a plugin like the one you found and then include it in your plugins array.
Based on the code you provided, it looks like you might have some syntax errors, such as using a dash instead of camelCase for property names. Here’s an example of what your code might look like with the correct syntax:
const plugin = require('tailwindcss/plugin');
module.exports = {
theme: {
extend: {
colors: {
customColor: '#FF0000'
}
}
},
plugins: [
require('@tailwindcss/forms'),
require('tw-elements/dist/plugin'),
plugin(function({ theme, addComponents }) {
for (const [key, value] of Object.entries(theme('colors'))) {
addComponents({
['.btn-' + key]: {
backgroundColor: value
}
});
}
})
]
};
Keep in mind that this is just an example and you’ll need to customize it to fit your specific needs. Also, make sure to run the appropriate commands to regenerate your CSS after making changes to your tailwind.config.js file.
I hope this helps! Let me know if you have any further questions or concerns.
I’ve made no other changes that should have caused this error. To clarify, I’ve done very little to the icewall theme after purchasing it, so I don’t think we should be too worried about something I may have done getting in the way of this.
I’m not really sure why background-color was incorrect and backgroundColor would be correct, since background-color is the correct css stylename and I can find no ‘component’ named backgroundColor anywhere. This loses me a bit, but that’s ok if I can get past it. lol
Thanks again. Sorry to be noisy.
Hello,
Thank you for reaching out and providing more information about the issue you’re facing with the Icewall theme. Based on the screenshot you shared, I’m not quite sure how it’s related to our template, so would you mind helping me out by providing more information on how to reproduce the issue?
Regarding the issue with “background-color” versus “backgroundColor”, it’s possible that this is related to the way that CSS properties are handled in JavaScript. While CSS uses hyphens to separate words in property names (e.g. “background-color”), JavaScript uses camelCase notation (e.g. “backgroundColor”). When working with React components, you’ll typically use the camelCase notation for CSS property names.
If you continue to experience issues, please don’t hesitate to reach out to me with additional information or screenshots. I’m happy to help you resolve this issue and get your project back on track.
Best regards
It’s not “related” to your template but you provided previous steps that I tried and they didn’t work, but got close. I was just hoping you were able to look back at our thread and see if I translated something badly.
You can ignore the background-color part. I’m only really referring to how to make this components code you suggested work. And since there is already a bunch of custom code in there from the icewall template, we’re having trouble getting this help from anywhere else.
I made a statement that we hadn’t changed code from what we purchased not as a way to find blame on you, but to help you understand that if you send me code that works for you, it would probably work for me, since it’s nearly identical… That’s all.
Thanks!
Hello!
I’m sorry for any confusion caused. The configuration we shared should have worked seamlessly, so I can understand your frustration.
Would it be possible for you to share the full configuration from your ‘tailwind.config.js’ file? This will enable us to investigate the issue more thoroughly and provide you with more specific assistance. Thank you very much.
const colors = require("tailwindcss/colors");
const {
toRGB,
withOpacityValue,
} = require("@left4code/tw-starter/dist/js/tailwind-config-helper");
module.exports = {
mode: "jit",
content: [
"./src/**/*.{php,html,js,jsx,ts,tsx,vue}",
"./resources/**/*.{php,html,js,jsx,ts,tsx,vue}",
"./node_modules/@left4code/tw-starter/**/*.js",
"./node_modules/tw-elements/dist/js/*.js"
// ".//*.html",
],
darkMode: "class",
theme: {
extend: {
colors: {
rgb: toRGB(colors),
primary: withOpacityValue("--color-primary"),
secondary: withOpacityValue("--color-secondary"),
success: withOpacityValue("--color-success"),
info: withOpacityValue("--color-info"),
warning: withOpacityValue("--color-warning"),
pending: withOpacityValue("--color-pending"),
danger: withOpacityValue("--color-danger"),
light: withOpacityValue("--color-light"),
dark: withOpacityValue("--color-dark"),
slate: {
50: withOpacityValue("--color-slate-50"),
100: withOpacityValue("--color-slate-100"),
200: withOpacityValue("--color-slate-200"),
300: withOpacityValue("--color-slate-300"),
400: withOpacityValue("--color-slate-400"),
500: withOpacityValue("--color-slate-500"),
600: withOpacityValue("--color-slate-600"),
700: withOpacityValue("--color-slate-700"),
800: withOpacityValue("--color-slate-800"),
900: withOpacityValue("--color-slate-900"),
},
darkmode: {
50: withOpacityValue("--color-darkmode-50"),
100: withOpacityValue("--color-darkmode-100"),
200: withOpacityValue("--color-darkmode-200"),
300: withOpacityValue("--color-darkmode-300"),
400: withOpacityValue("--color-darkmode-400"),
500: withOpacityValue("--color-darkmode-500"),
600: withOpacityValue("--color-darkmode-600"),
700: withOpacityValue("--color-darkmode-700"),
800: withOpacityValue("--color-darkmode-800"),
900: withOpacityValue("--color-darkmode-900"),
},
},
fontFamily: {
roboto: ["Roboto"],
},
container: {
center: true,
},
maxWidth: {
"1/4": "25%",
"1/2": "50%",
"3/4": "75%",
},
strokeWidth: {
0.5: 0.5,
1.5: 1.5,
2.5: 2.5,
},
},
},
plugins: [
require("@tailwindcss/forms"),
require("tw-elements/dist/plugin")
],
variants: {
extend: {
boxShadow: ["dark"],
},
},
};
Hello,
We sincerely apologize for the delay in our response. We understand that waiting can be frustrating, and we appreciate your patience. Regarding your query, I’d be happy to provide you with more information.
In the default configuration of Tailwind, the color configuration will return an object in the following format:
To see it in the console, simply use the following code.
So, to iterate through each color code, you can use the following example code.
plugin(function ({ theme, addComponents }) {
for (const [key, value] of Object.entries(theme("colors"))) {
if (typeof value === "string") {
addComponents({
[".btn-" + key]: {
backgroundColor: value,
},
});
} else {
for (const [subKey, subValue] of Object.entries(value)) {
if (
typeof subValue !== "object" &&
typeof subValue !== "function"
) {
addComponents({
[".btn-" + key + "-" + subKey]: {
backgroundColor: subValue,
},
});
}
}
}
}
}),
Please don’t hesitate to reach out if you have any further questions or require additional assistance. We are always here to help and ensure that you have a positive experience.
Hi and thanks. I do appreciate the effort. After putting in that code into my tailwind.config.js as provided I get an Unable to locate Mix file: /dist/css/app.css. error. Mix yields 6 errors when it runs. Each of them says Module build failed: ReferenceError: plugin is not defined
https://www.screencast.com/t/HhD8J4oI4nT https://www.screencast.com/t/64eu5fQcmAj (this is truncated)ERROR in ./node_modules/@fullcalendar/common/main.css
ERROR in ./node_modules/@fullcalendar/daygrid/main.css
ERROR in ./node_modules/@fullcalendar/list/main.css
ERROR in ./node_modules/@fullcalendar/timegrid/main.css
ERROR in ./public/dist/css/_app.css [1] Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js): [1] ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js): [1] ReferenceError: plugin is not defined
1 ERROR in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details)
However, trying to interpret what you’ve provided – does it seem that only the backgroundColor is being changed? If so, would this need to be so elaborate to manually include every single possible style in order for these btn-<color> style sets to be created? Like hover, outline, border, text, etc. I figured it would be different, but similar in scope to the way bootstrap allows for this, but if what I’m interpreting is true, then it’s 40 to 1 the amount of work required. With bootstrap, if you add a color to the theme, all styles work automatically. I thought there would be a tailwind way to do similar, but it seems not. I guess if I could get what you’re proposing to work, it would make more sense, but it hasn’t worked so far. Sorry to be a pain… Thanks again.
Hello.
Thank you for your help with Enigma v1.0.5 – No Animation the other day.
I have a question: does this use jQuery? I noticed jQuery syntax like $(this) in the source files such as /src/js/side-menu.js.
Thank you in advance.
Hi there!
Thank you for contacting us. I apologize for the delay in getting back to you.
Regarding your question about jQuery, we have developed a built-in library that emulates the main functionality of jQuery. The syntax is very similar to jQuery, which makes it easy for users to understand and replace our library with jQuery if needed.
Please don’t hesitate to let us know if you have any other questions or concerns. We’re always here to help!
Thank you for reaching out to us.
I see! That’s the function of it. Thank you.
On a different topic, why is ckeditor separated into individual files in webpack.mix.js like below? Can’t it be installed normally via npm?
mix.js(“src/js/app.js”, “dist/js”) .js(“src/js/ckeditor-classic.js”, “dist/js”) .js(“src/js/ckeditor-inline.js”, “dist/js”) .js(“src/js/ckeditor-balloon.js”, “dist/js”) .js(“src/js/ckeditor-balloon-block.js”, “dist/js”) .js(“src/js/ckeditor-document.js”, “dist/js”) .css(“dist/css/_app.css”, “dist/css/app.css”) .options({ processCssUrls: false, }) .copyDirectory(“src/json”, “dist/json”) .copyDirectory(“src/fonts”, “dist/fonts”) .copyDirectory(“src/images”, “dist/images”);
Hi there!
I’m glad to hear that you found the information helpful. Regarding your question about the separation of CKEditor files in webpack.mix.js, the CKEditor dependency can actually be installed through npm. However, due to limitations with CKEditor, it’s not possible to use two or more different types of editors on the same page as it can cause errors. That’s why we split each editor bundle into separate files.
Please let us know if you have any other questions or concerns. We’re always happy to help!
Hello I need to use jQuery and dataTables with Editor Earlier Comments says “to install jQuery using the command ‘yarn add jquery’.”
yarn add jquery yarn add datatables.net yarn add datatables.net-dt
Downloaded template zip file has multiple folders In which folder I have to run these commands
ok I am able to add jQuery and DataTables However I need to know how to include DataTables Editor?
Ok I able to add it myself, thank you
after including jQuery, datatables and editor, I am getting the following error message app.js:25018 Uncaught TypeError: webpack_require(...) is not a function at ./src/js/datatables.js (app.js:25018:109) Uncaught TypeError: $.fn.dataTable.Editor is not a constructor
Hello there,
Thank you so much for reaching out to us. I’m sorry for the delay in my response, and I’m here to help you with your DataTables issue.
To use DataTables with jQuery, you need to install the required dependencies. You can do this by running the following commands:
yarn add jquery yarn add datatables.net yarn add datatables.net-dt
Now, regarding the error message you mentioned, it seems that there is a conflict between the “dom” library and jQuery. Our Midone template uses a library that is similar to jQuery to avoid such conflicts. So, to resolve the issue, you will need to remove the “dom” library and replace it with jQuery.
Here are the steps you can follow:
1. Open the ”/src/js/bootstrap.js” file. 2. Find the following line:
window.$ = dom;
Replace it with:
import $ from 'jquery';
window.$ = $;
3. Save the changes.
This will import jQuery and assign it to the `$` symbol, allowing you to use jQuery without any conflicts. You should now be able to use DataTables without any issues.
If you have any further questions or concerns, please don’t hesitate to reach out to us. We’re always here to help.
Best regards, Left4code Team
Thank you for providing the steps. Same error even after replacing dom with jquery in bootstrap.js
Thank you for getting back to me. I apologize for the inconvenience. Since Midone doesn’t use `Datatables` plugin by default, could you please provide me with step-by-step instructions to reproduce the issue you’re encountering? This will help me better understand the problem and provide a more effective solution. Thank you.
hello hop everything is fine, first of all thanks for he work and hopeful your product will be fantastic i would like to ask about the kanban feature i don’t know if on my license i have that right to ask for any feature. but i would like if you consider my request
Hi there,
Thank you for reaching out and your kind words about our product. We’re glad to hear that you’re excited about it! In regards to your question about the Kanban feature, we’d be happy to consider your request.
As an esteemed customer, we appreciate your feedback and will do our best to accommodate your needs. Please let us know if you have any further questions or concerns, and we’ll be more than happy to assist you.
Thank you for your support!
Your previous assistance has really helped a lot with being able to navigate this. For example, it was pretty easy to add a new modal/slide over size (xxl). I’m hoping to ask fewer questions as we settle. Thank you very much for your previous help.
Hi there! I’m glad to hear that my previous assistance was helpful to you. Regarding your question about tom-select, it’s definitely possible to customize the dropdown multiselect to your liking. You can remove the dropdown input and add a header by modifying the plugin options at this file ”/resources/js/tom-select.js”.
// Disable dropdown input
let options = {
plugins: {
// dropdown_input: {},
},
};
// Disable dropdown header
if ($(this).data("header")) {
options = {
...options,
plugins: {
...options.plugins,
// dropdown_header: {
// title: $(this).data("header"),
// },
},
};
}
I suggest checking out the documentation on tom-select’s website for more information and examples on how to achieve this. Don’t hesitate to reach out if you have any further questions or if there’s anything else I can help you with. Have a great day!
Hi, and thanks. I did find my way to that file and attempted to split out the feature. The thing is, I don’t want to disable it for my whole project. I will need to be able to selectively add/remove it from one dropdown to the next. Perhaps by associating the feature to a specific individual class like “ts-dropdown-header” or something. The tomselect docs weren’t helpful there either to me. I’m maybe just asking for more than I understand. I’ll get deeper with my backend team and see if they can help. Cheers.
Hello!
Thank you for reaching out to us, and I’m sorry for the delay in getting back to you. I understand that you need to selectively add or remove the Tom-select feature from dropdowns and don’t want to disable it for your whole project.
One possible solution is to attach the Tom-select library to the window object, making it accessible globally outside of “app.js”. You can achieve this by adding the following code to the ”/resources/js/bootstrap.js” file:
With this approach, you can instantiate Tom-select specifically for a certain page or elements, which can give you more flexibility and control.
import TomSelect from 'tom-select';
window.TomSelect = TomSelect;
I hope this solution works for you, but if you have any further questions or concerns, please don’t hesitate to let me know. I’m always here to help!
Hiya. Close. But I don’t want to selectively remove the entire tom-select function from individual elements. I just want to disable a single tom-select ‘feature’ from an element on a page AND still be able to use that feature on a different element on the same page. Specifically, the dropdown input. Is there a way to remove the dropdown_input feature from EVERY instance of the tom-select default and add it by requiring using its own class, for example? So I would have an element WITH the dropdown_input that had classes “tom-select ts-dropdown-input” and one that I did NOT want that dropdown_input feature I would just use “tom-select” as the class… This would be idea for us. Thanks
Thank you for clarifying your question about Tom-select. To selectively remove a specific feature from an element while still being able to use that feature on a different element on the same page, you can modify the Tom-select configuration file located at ”/resources/js/tom-select.js”.
You can add the following code to the configuration file:
https://i.imgur.com/TfIZaHf.png
if ($(this).data("no-dropdown-header") !== undefined) {
delete options.plugins.dropdown_header;
}
if ($(this).data("no-dropdown-input") !== undefined) {
delete options.plugins.dropdown_input;
}
By using the “options” parameter, you can exclude specific plugins by setting the “data” property only when it is not needed. For example:
<select
class="w-full tom-select"
data-placeholder="Select your favorite actors"
data-no-dropdown-input
data-no-dropdown-header
>
<option value="1">Leonardo DiCaprio</option>
<option value="2">Johnny Deep</option>
<option value="3">Robert Downey, Jr</option>
<option value="4">Samuel L. Jackson</option>
<option value="5">Morgan Freeman</option>
</select>
In the above example, the “data-no-dropdown-input” and “data-no-dropdown-header” properties are set to exclude the “dropdown_input” and “dropdown_header” plugins respectively.
I hope this helps. If you have any further questions or concerns, please don’t hesitate to ask.
Please use incognito if you are using chrome or use another browser if you can’t open the above link.
Thanks for your help. Let me know if I’m unfairly asking for your help when I should be looking elsewhere. That’s ok. My front end expertise is kind of weak.
I apologize for the delay in my response. Thank you for your understanding, and I’m glad that my suggestion was helpful to you.
It seems that this is the default behavior of TomSelect, and on the documentation, we can disable the search input using the `controlInput` property. However, it seems that this is not working or only works for specific versions.
For now, you can use a tricky solution by wrapping the select element with a div element and applying the class `w-.ts-input>input">200px:invisible [&.ts-input>input]:absolute` to give a fixed width to TomSelect and hide the search input using CSS.
<div class="w-[200px] [&_.ts-input>input]:invisible [&_.ts-input>input]:absolute">
<select
class="tom-select"
data-placeholder="Select your favorite actors"
>
<option value="1">Leonardo DiCaprio</option>
<option value="2">Johnny Deep</option>
<option value="3">Robert Downey, Jr</option>
<option value="4">Samuel L. Jackson</option>
<option value="5">Morgan Freeman</option>
</select>
</div>
If you have any further questions or concerns, please don’t hesitate to reach out.
Hi Again.
I’m finding missing col-spans in the rendered app.css file. For example: “sm:col-span-10” doesn’t exist. Nor does “col-span-11” at any breakpoints.
Is there something I’m missing? I’ve not made any changes other than the _btn.css recommendation you provided earlier, which worked well.
Tailwinds core has all of these. Can’t figure out why they would be missing now.
Thanks!
I’m also not finding any basis classes either. There must be a problem I can’t figure out. Can you tell me where I can start to dig for this?
Would you be willing to do some screenshare support to help us line this up. We are really self sufficient but getting this one started is baffling us some. We’d be happy to pay by the hour, maybe with a minimum, a couple hundred dollars or something? Thanks
Hello and thanks for reaching out! I’m sorry for the delayed response as our customer support team is not available on weekends.
Regarding the missing col-span-* classes, these should be generated by the compiler when you run TailwindCSS JIT mode. It’s a feature of TailwindCSS that reads your code in real-time and generates the necessary classes in your app.css file. Therefore, you need to run the compiler when there are changes to the PHP code where you use these classes. This can be done by running the npm run dev command or the npm run watch command in your terminal.
As for screenshare support, unfortunately, we are unable to accommodate this request at the moment. However, we do provide free video support through YouTube if you need it.
If you have any other questions or concerns, please don’t hesitate to ask. We’re always here to help you out!
Ah – Ok well that makes a ton of sense. I had not been prepared for that. (Classes not existing in rendered reference files at all until included in page files.) So, that being said, is there a development environment sort of command that WILL include them all? Or a config setting? See, I use browser inspectors A LOT for very fast small changes once initial layout is created. Having to change the working file, wait for watch to run, refreshing the page, (potentially opening a modal, or off canvas or something, for every single tweak is really inefficient. It would be great to have a full stylesheet during that work, then a compressed, streamlined version for production or even for UAT.
On the screenshare request, that’s too bad. But I do understand. You might consider a premium service of that nature. It could help a lot of people out. I do understand it could be risky, having to charge people for maybe not being able to help them, or for fixing something in 3minutes that they then have to pay for an hour for.
Anyway – if you have anything on that dev mix thing, I’d love to hear about it. Otherwise, thanks for the help!
Cheers.
Hi there!
I’m glad that I could help shed some light on how Tailwind works. As far as I know, there isn’t a development command or configuration setting that will include all the classes upfront without JIT mode. However, you might want to check out the discussion in the link provided below, as there are some tricky ways to accomplish this.
https://github.com/tailwindlabs/tailwindcss/discussions/6347#discussioncomment-1905577I totally understand the frustration of having to wait for the watch to run and refresh the page for every tweak during development. Unfortunately, I don’t have any suggestions for a premium service like the one you mentioned, but it’s definitely a good idea to consider.
Anyway, feel free to let me know if you have any other questions. Have a great day!
Hiya. Each time I make changes to _app.css, to colors, etc. mix runs and makes the correct app.css file, which renders as expected. As soon as I save an HTML (blade) file, the _app.css file is overwritten with some default (back to its original state), writing over my changes completely. I’m using PHPstorm as an IDE, but we’re having trouble tracking this behavior as it doesn’t do it in any of our other projects. Any ideas? Thanks
Hi tradeart,
Sure, I apologize for the confusion. Based on your previous comment, I assumed that you were using Laravel as your development framework, and that is why I mentioned the directory structure for Laravel.
If you are using HTML, then the file you should be editing is located in /src/css/app.css, and the compiled result will be located in /dist/css/app.css. Editing files directly in the /dist directory may cause your changes to be overwritten during the compilation process.
Similarly, in Laravel version, you should only edit the `/resources/css/app.css` file, which will be compiled to `/public/build/assets/*` along with other assets.
As for the issue you mentioned in your previous comment, the CSS code for the success button color is located in the NPM package `@left4code/tw-starter,` in the file `/node_modules/@left4code/tw-starter/dist/css/_btn.css`.
You can copy this file to your local project directory, for example, `/resources/css/components/_btn.css`. Then, open the file `/resources/css/app.css` and change the line
@import "@left4code/tw-starter/dist/css/_btn.css";
to
@import "./components/_btn.css";
Finally, you can change the button success color in the following block in `/resources/css/components/_btn.css`.
.btn-success {
@apply bg-success border-success text-white dark:border-success;
}
Let me know if this helps, and if you have any further questions.
Hi Left4Code.
Thanks a lot for the help. No worries. This has a lot going on.
And yes we are using Laravel.
While we start to dig into this, we found a small discrepancy and would like to clear that up before we get too deep.
There is no /public/build/assets/ but there is /public/dist (/css, /js, etc.) and maybe that is what you mean? I’ve seen a few instructions in your docs that refer to an “assets” folder that we don’t have, so maybe if we translate that right, it will help with confusion. Maybe we are also looking at incorrect docs?
I think if you can confirm that, we can start to work through this and see if it solves our issues.
Thanks
While poking around in there we did find the files you mentioned. There is no assets directory anywhere but I assume this is a config or maybe only HTML versions; maybe not Laravel. The rest of your explanation once translated worked perfectly, and we’re getting a feel for how these things are tied together thanks to your assistance. Thanks again!
Hi Tradeart,
Apologies for the late response. I’m glad to hear that you found the files I mentioned and that my explanation was helpful in getting a feel for how things are tied together. It’s possible that some of the instructions in our docs refer to an “assets” folder that is not present in your specific configuration.
If you have any further questions or run into any issues, don’t hesitate to reach out. I’m happy to help.
Best regards.
Hiya. Great theme. Big fan. Your Success Colors for buttons has dark text and we’d like to change that to white globally. Is there a mix or something that is calculating that? Something I can adjust? Or will I need to write a ‘text-white’ in my success buttons? Super new to scss/mix Thanks!
Sorry. I found this answer myself, which led to another problem I’ll post separately. Thanks
No problem, glad you were able to find the answer you were looking for! Let us know if you have any other questions or issues.
Hi,
I need to know how to remove the events added by the dom.js file. We are using the html file for now.
Using importmaps on ruby on rails with hotwire in some cases we need render the same page and js witch will give us a lot of duplicated events
because this JS uses a lot of events with anonymous functions.
Hello hdlp09,
Thank you for reaching out to us regarding the issue you’re facing with the dom.js file. We understand the concern about duplicated events when using importmaps with Ruby on Rails and Hotwire.
The “dom.js is a built-in mini library created to manipulate the dom element inspired by jQuery. We wrote this library to keep the final code size small by removing unnecessary functions in jQuery. You can access the code of dom.js at the following path /node_modules/@left4code/tw-starter/dist/js/dom.js. To remove events attached with this library, you can use the following code example:
$("#selector").replaceWith($('#selector').clone());
https://stackoverflow.com/questions/9251837/how-to-remove-all-listeners-in-an-element#answer-28375061
We hope this solution will be helpful in resolving your issue. If you need further assistance, please don’t hesitate to reach out to us again.
Best regards, Left4code Team
It worked. I think you should include this in another release, and maybe add something closer to jQuery off method to avoid this type of issues. Because now for every event a need to remove and clone all elements, not a very clean solution.
Hi there,
Thank you for the feedback! I’m glad to hear that the solution worked for you. We strive to continuously improve our package, so we appreciate any suggestions from our users.
Actually, I have some good news for you! We have just released an update for the `.off()` method that includes a cleaner solution to avoid these types of issues. To update the package, please run `yarn add @left4code/tw-starter`.
Thank you for using our package and for your valuable feedback. If you have any other suggestions or issues, please don’t hesitate to reach out to us.
Best regards.
Hello, I have purchased the tabulator-tables. I have purchased the tabulator-tables, but after changing the tabulator-tables from ver. “4” to “5”, I get an error with npx mix. The error is
WARNING in ./src/js/tabulator.js 17:20-29 export ‘default’ (imported as ‘Tabulator’) was not found in ‘tabulator-tables’ (possible exports: AccessorModule, AjaxModule, CalcComponent, CellComponent, ClipboardModule, ColumnCalcsModule, ColumnComponent, DataTreeModule, DownloadModule, EditModule, ExportModule, FilterModule, FormatModule, FrozenColumnsModule, FrozenRowsModule, GroupComponent, GroupRowsModule, HistoryModule, HtmlTableImportModule, ImportModule, InteractionModule, KeybindingsModule, MenuModule, Module, MoveColumnsModule, MoveRowsModule, MutatorModule, PageModule, PersistenceModule, PopupModule, PrintModule, PseudoRow, ReactiveDataModule, Renderer, ResizeColumnsModule, ResizeRowsModule, ResizeTableModule, ResponsiveLayoutModule, RowComponent, SelectRowModule, SortModule, Tabulator, TabulatorFull, TooltipModule, ValidateModule)
Can you solve it?
Sorry, I purchased Midone, not tabulator-tables, and I would like to upgrade the tabulator-tables version to Series 5.
The tabulator-tables case has been resolved. When I refresh the page, the elements fade in. Can this be changed to no fade-in?
Hello uwsolu,
Thank you for reaching out to us regarding the tabulator-tables issue. We’re glad to hear that the issue has been resolved, and the elements are fading in when you refresh the page.
Regarding your request to change the fade-in effect, we would be happy to assist you with that. Can you please provide more information on what exactly you want to change and how you would like the fade-in effect to be? This will help us better understand your requirements and provide an accurate solution.
Looking forward to hearing back from you soon.
Best regards, Left4code Team
Hello, Thanks for the reply. Specifically, I would like to disable the fade-in effect for each of the side menu items.
Thanks for your reply. To disable the fade-in effect for each of the side menu items, you can open this file `/src/assets/css/components/_side-nav.css` and comment the following lines.
https://i.imgur.com/g2vfYt6.png
Please use incognito if you are using chrome or use another browser if you can’t open the above link.
Please let me know if you have any further questions or concerns. I am here to help.
Best regards, Left4code Team
Thanks for your reply. Does `/src/assets/css/components/_side-nav.css` mean `/src/css/components/_side-nav.css`? I changed it and did npx mix, but it doesn’t change. Also in ‘dist/css/_app.css’ of ‘mix.css(“dist/css/_app.css”, “dist/css/app.css”)’ written in ‘webpack.mix.js’ Can I rewrite it?
Hello uwsolu,
Thanks for reaching out to us again. In order to better assist you with your issue, could you please provide us with your email address and the version of the Midone theme you are using? This will help us to send you an example project without the side-nav animation.
Regarding the mix command, you can change the dist/css/_app.css to dist/css/app.css in the webpack.mix.js file if that’s what you would like.
We are looking forward to hearing back from you soon.
Best regards, Left4code Team
Hello. Thank you Left4code. The version will be Enigma v1.0.5. I asked this question because it would be more convenient for content that frequently goes back and forth between menus without fading. Can I write my email address here?
Of course! You can feel free to email us at leftforcode@gmail.com with your email address. We would be more than happy to send you the example project without the side-nav animation. Thank you for choosing Enigma v1.0.5 and we hope you find it to be a convenient solution for your content.
