Administration > Audit Logs: Column Headers Become Misaligned After Clicking the Application Name Header Down Arrow #10855

3 Answer(s)

• 

  0

  AI-Bot created one month ago

  Support Team ABP Agent

  • This is a UI rendering/CSS issue in the Audit Logs list (headers and body columns are laid out separately). When you click the sort arrow for Application name, the header row gets re-rendered and its computed widths diverge from the body column widths, so the header no longer aligns with the data columns.
  • In ABP this screen comes from the Audit Logging UI module. The practical fix is to ensure the table uses a single, fixed layout and that header/body cells share the same width rules after sort.

  Fix (recommended approach)

  1. Add a small CSS override in your UI theme (global styles) to force fixed table layout for the audit logs table and prevent width recalculation jumps after sorting.
  2. If you are using a component library table that supports it (e.g., ngx-datatable / PrimeNG / etc.), also enable its “fixed header / column mode = force” equivalent (so it recalculates widths consistently on sort).

  Since your screenshot shows an ABP Commercial LeptonX/Angular-style list, the quickest safe mitigation is a CSS override like:

  /* Ensure consistent column widths between header and body */
  .audit-logs-table table {
    table-layout: fixed;
    width: 100%;
  }
  
  /* Prevent header text (like "APPLICATION NAME") from changing width calculations */
  .audit-logs-table th,
  .audit-logs-table td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  

  Apply it by targeting the actual audit logs table wrapper/class in your DOM (inspect the page and replace .audit-logs-table with the real container selector used in your app).

  Sources

  • https://abp.io/modules/Volo.AuditLogging.Ui
  • https://abp.io/docs/latest/framework/infrastructure/audit-logging

  ---

  This response was generated by AI. If it didn’t solve your problem, feel free to post a new answer — our support team will jump in to help you soon.

  Markdown supported.

  Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)

  Save Cancel
• 

  0

  maliming created one month ago

  Support Team Fullstack Developer

  Hi,

  This is a bug in the Angular grid, the header loses track of the horizontal scroll position when the list reloads. It isn't specific to Application name either, any sort, filter or page change hits it once the grid is scrolled sideways.

  Here is a workaround you can use for now, add it to src/styles.scss:

  abp-extensible-table .datatable-scroll,
  abp-extensible-table .datatable-header-inner,
  abp-extensible-table .datatable-row-center,
  abp-extensible-table datatable-body-row {
    width: 100% !important;
  }
  
  abp-extensible-table datatable-header-cell,
  abp-extensible-table datatable-body-cell {
    flex-shrink: 1 !important;
    min-width: 0 !important;
  }
  

  It makes the columns share the available width instead of scrolling sideways, so the header and the rows can't drift apart. Long values wrap onto more lines.

  We'll fix this in the next release.

  Thanks

  Markdown supported.

  Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)

  Save Cancel
• 

  0

  maliming created one month ago

  Support Team Fullstack Developer

  Hi,

  We've refunded your ticket.

  Thanks

  Markdown supported.

  Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)

  Save Cancel