Base solution for your next web application
Open Closed

UI Issue with DataTables After Migration from v10.5 to v13.4 (MVC) #12569

User avatar
0
[email protected] created

Hello ASP.NET Zero Support Team,

We are in the process of migrating our project from version 10.5 to 13.4 (MVC) and are encountering UI issues on index pages.

The main problem appears with DataTables — the table headers are broken and misaligned, and when there are multiple columns, the headers overflow outside the table area. We tried regenerating the pages using the Power Tools, but the issue still persists.

Below is the code snippet we are using to render the table: <table id="ShipmentsTable" class="table align-middle table-row-dashed fs-6 gy-5 dataTable dtr-inline no-footer" width="100%">

We’ve attached screenshots below to demonstrate the issue:

  • Current UI (v13.4): Headers broken and overflowing

  • Old version (v10.5): Headers and layout perfectly aligned

Additionally, we would like to know how to properly align the sorting arrows with the column text in the latest version.

Could you please assist us in fixing this layout issue or share the recommended approach for DataTables styling in v13.4?

Thank you for your support and guidance.

Best regards,

Markdown is supported
Copy & paste or drag & drop images (max 30 MB per image)
Go to accepted answer
3 Answer(s)
  • User Avatar
    0
    oguzhanagir created
    Support Team

    Hi @mnihal

    Make sure that the DataTables script and style files are correctly included in the bundles.json file (13.4 Bundles.json). Then, run the bundle and minify command. Also, ensure that these files are installed in the project as npm packages. In addition, verify that the metronic/assets/plugins/custom/datatables/datatables.bundle.css file provided by Metronic is present in your project.

    Generate Bundle Command npm run create-bundles or yarn create-bundles

    If these are added correctly, sending your project to [email protected] will help us give you a more specific answer.

    Thank you.

    Markdown is supported
    Copy & paste or drag & drop images (max 30 MB per image)
  • User Avatar
    0
    [email protected] created

    Hi,

    I have added my bundles.Json class below for you to check and also verified that the datatables.bundle.css file is present in the respective folder. also tried bundle command and still same issue persist

    Should I send you the Base version of our 13.4 version. How can I send the project securely.

    bundles.Json

    Markdown is supported
    Copy & paste or drag & drop images (max 30 MB per image)
  • User Avatar
    0
    oguzhanagir created
    Support Team

    Hi @mnihal

    You can send your project to [email protected] via e-mail. This way, we can examine your issue in more detail.

    Thank you.

    Markdown is supported
    Copy & paste or drag & drop images (max 30 MB per image)
Assignee
No one
Labels
None yet