Discussion on Acorn - Vite React Admin Dashboard (React 19)

Discussion on Acorn - Vite React Admin Dashboard (React 19)

Cart 1,861 sales
Recently Updated
Well Documented

ColoredStrategies supports this item

Supported

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

308 comments found.

i want to remove theme-button

Hi,

Theme switcher is defined and added in “js/scripts.js” file. Variable name for the switcher is themeColorsDom and to remove it from pages, you will need to delete below line.

$("body").append(themeColorsDom);

All the best.

Nice and great work that you did, but I have a question about the loading screen that appears when moving between pages, can you indicate where it is because I want to change it.

Hi,

Loading animation is done via show-spinner class and it is added body tags of the all pages.

You may find styles in css/main.css file under “Spinner” title.

Hiding it is done in js/dore.script.js file under “03.33. Showing Body” title.

All the best.

Hello! I would like to know how can I change the input form validation message (“This field is required’) in components Top Labels Over Line. Thanks!

Hi there,

I’d like to have the simple-icon-star filled with a color.

Is there a way to fill a “simple line icons”?

Thanks for your feedback

Hi,

Unfortunately, we do not have a filled version of the simple line icon set.

All the best.

Hi, Ok no problem, thanks for your feedback.

Hi I am able to load the login page in My asp.net MVC application but when I worked on the dashboard page it can not be load on the page. Please Help me out in this situation

Hi,

Check your console. Can you let us know if there is any possible js error. You probably made a mistake while adding the js files.

All the best.

Hi!

Post creation of sub-route (localhost:8001/auth/login), the theme could not find the CSS and JS. But when a single route like localhost:8001/ was created, the theme was working. I could not figure out why this is happening with the theme. We did not get this issue with other theme. I have the screenshots of errors.

Best regards,

HI,

All the assets paths are absolute to make it work on the file system wtihout need of a server. Maybe you should look into them and change the paths according to your setup.

All the best.

I bought the theme to use use it as reactjs only and not redux.

Hi, unfortunately there is not a reactjs only version of the template.

Is there a function to update chart data only when button clicked?

hi,

Unfortunately, we do not have an example that includes this scenario. The following article will help you.

https://www.chartjs.org/docs/master/developers/updates.html

All the best.

I’m using data-table-feature. When I put column less than 6, its not working. It stuck on loading. How can I solve this? I want the column to be less than 6 items

Hi,

Please make sure both head and body of the table has same number of cells. Also it is required to adjust $(”.data-table-feature”).DataTable implementation based on your data in dore.script.js file.

Hello,

For inputs with top labels over line, if the input is not focused the placeholder isn’t showing.

Thank you.

Hi,

Thanks for your reply. I’ve uploaded a screenshot with what happens. https://ibb.co/L9X9NV5

The left image has the email input unfocused, and the right image is with it focused. It happens in all the browsers.

You mean the actual placeholder. I somehow thought that you meant the labels.

Adding below lines in main.css file or another one that is used in the page should override the styling which hides the placeholder.

.has-float-label .form-control::placeholder { opacity: 1 !important; }

Hi,

Thank you. It worked.

Hi there,

Firstly, I’d like to say, the theme provide is of pretty quality. Great work!

I’m trying to use the responsive feature data table (.data-table-feature) with the ability to add child rows for more details for a given row.

The datatable itself works, however, I can either have the responsive toggling icon working (which will display columns that couldn’t be displayed as the screen is not wide enough) OR the child row (therefore displaying additional details for the clicked row) but not both at the same time.

I guess, there must be a clash in the two events somehow.

If you could assist me with this that would be greatly appreciated.

Best regards,

Manu

See below a code sample.

The HTML

<table class="data-table data-table-feature responsive nowrap"> <thead> <th /> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> <th>Column 4</th> <th>Column 5</th> <th>Column 6</th> <th>Column 7</th> </thead> </tbody> </table>

The JS

function format ( d ) { return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+ '<tr>'+ '<td>Additional Information:</td>'+ '<td>'+d.additional_info+'</td>'+ '</tr>'+ '</table>'; } $(document).ready(function() { var table = $(".data-table-feature").DataTable({ sDom: '<"row view-filter"<"col-sm-12"<"float-right"l><"float-left"f><"clearfix">>>t<"row view-pager"<"col-sm-12"<"text-center"ip>>>', ajax: '/get_my_data.json', columns: [ { "data": "column_1" }, { "data": "column_2" }, { "data": "column_3" }, { "data": "column_4" }, { "data": "column_5" }, { "data": "column_6" }, { "data": "column_7" }, { "className": 'details-control', "orderable": false, "data": null, "defaultContent": 'More' } ], drawCallback: function () { $($(".dataTables_wrapper .pagination li:first-of-type")) .find("a") .addClass("prev"); $($(".dataTables_wrapper .pagination li:last-of-type")) .find("a") .addClass("next"); $(".dataTables_wrapper .pagination").addClass("pagination-sm"); }, language: { paginate: { previous: "<i class="simple-icon-arrow-left" />", next: "<i class="simple-icon-arrow-right" />" }, search: "_INPUT_", searchPlaceholder: "Search...", lengthMenu: "Items Per Page _MENU_" }, }); // Add event listener for opening and closing details $('.data-table-feature tbody').on('click', 'tr', function () { var tr = $(this).closest('tr'); var row = table.row( tr ); if ( row.child.isShown() ) { // This row is already open - close it row.child.hide(); tr.removeClass('shown'); } else { // Open this row row.child( format(row.data()) ).show(); tr.addClass('shown'); } } ); });

Hi,

It looks like detail row and responsive row use child row and they don’t coexist. You may check out a detailed answer here if you haven’t already seen it: https://datatables.net/forums/discussion/42357/details-row-responsive-at-once

There is the modal display option as the admin suggested on the post above and another user come up with a solution which we have not tested. You may also use a right side modal of the template if that suits your needs like the one that is opened with add new button here: https://dore-jquery.coloredstrategies.com/Apps.Todo.List.html

All the best.

Hi,

Thanks a lot for your feedback, I did not thought of these options and potential solutions.

Thanks heaps!

Hello Sir, The theme is not loading and it shows the following error: http://gnestdev.pk/products/css/dore.light.greenlime.min.css net::ERR_ABORTED 404 (Not Found) loadStyle @ scripts.js:30 (anonymous) @ scripts.js:140 (anonymous) @ scripts.js:216

we are developing our application using laravel the theme works fine on the following page; http://gnestdev.pk/products/ but when we use this template further on the following url : http://gnestdev.pk/products/create

it shows the above mentioned error which reference to the js file line 30, head.appendChild(link);

hope you understand the error.

regards, waseem

Hi,

“products” directory on the paths looks suspicious if your template is not in a folder called Item.

Also, all the assets paths are absolute to make it work on the file system wtihout need of a server. Maybe you should look into them and change the paths according to your setup.

Cheers.

hi, How can I add a button to switch direction (RTL,LTR), like the one in the customizer tools?

Hi,

You can create the button you want to achieve by copying the method in the example.

All the best.

Hi,

Thank you for the reply, but what method do you mean? I didn’t find it.

All the best.

  $("input[name='directionRadio']").on("change", function (event) {
    var direction = $(event.currentTarget).data("direction");
    try {
      localStorage.setItem("dore-direction", direction);
      window.location.reload();
    } catch (error) { }
  });

Hello,

How to minimize or smaller the whole screen? including the menu icon on the left side.

Hi,

For this development; you will have to manipulate the spaces, icons, font sizes. You can do this development with media queries, but I regret to say that it will cause a heavy workload.

All the best.

Hello,

I just purchased your item. How do I activate the license key on my domain?

Hi,

After purchasing, you can use the theme in any domain you want. No license activation is required. Hope you keep enjoying the theme.

All the best.

When I add another column to any of the datatables in the template, it breaks the page – spins forever and does not load. Why is that, and how can I fix it?

https://dore-jquery-web.coloredstrategies.com/Ui.Datatables.Rows.html

Hi,

An error should have appeared in your browser console. Can you send us the error details?

All the best.

hello Your theme was awesome and really works great. I have some issues please rectify

1. Created logo as described(svg format and size) but it seems to be small as compared and couldn’t see clearly kindly rectify this 2. user name not showing in navbar when it opened in mobile. can i put user name and office name

Hi,

When adding a logo, you may need to override the predefined width height values on the css side.

Unfortunately, we are unable to give a positive response to your navbar development request at the moment. I will forward it to the development team, but I cannot give a clear answer to questions such as will they include it in the business plan or when the development will be completed.

All the best.

how to add a logo to this template and also want know how to change auth page background is there any specific dimension for image pls comment in detail

Hi,

You can change the path of the background image in the .fixed-background css class.

For the logo: There are 3 versions of the logo used in the project, namely “logos/white.svg”, “logos/white-full.svg”, “logos/mobile.svg”. You can physically change these files or update in the css file.

All the best.

Thanks for your reply but it doesn’t work. uploaded a new pic with extension jpeg and changed in css class ../img/login/ but it shows that balloon image pls explain

Hi,

scss files need to be compiled after modification. After making changes, you should run the gulp or gulp build command.

All the best.

How do I change date format to dd-mm-yyyy in text input field using input-group date?

how do I remove left navbar? When I remove the left navbar, it leave some indentation on left side of page. I want the content to be whole page when I remove left navbar.

Hi,

You must set the margin left of the “main” tag to 60px instead of 410px.

main {
margin-left: 410px -> 60px
..
..
}
All the best.
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