Issue with Table Layout Expansion in Custom Checklist on DHIS2

Hi DHIS2 community,

I’m working on implementing a custom checklist within DHIS2, but I’m encountering a persistent issue with table layout that I hope you can help me resolve.

Problem Description:

The checklist I’ve designed includes several columns (e.g., Criteria, Indicators, Score, Percentage, Observations) that work perfectly in my local development environment (VS Code). However, when I deploy the same checklist in DHIS2, the table expands horizontally beyond the container or page bounds, specifically causing layout misalignment beyond the buttons (like “Next” and “Previous”).

What I’ve Tried:

  1. CSS Adjustments:
  • I reduced the width of specific columns (e.g., “Score” and “Percentage”) by applying max-width, table-layout, and width properties. These adjustments work locally but don’t seem to have any effect in DHIS2.
  1. Text Wrapping:
  • I’ve implemented word wrapping and text truncation using CSS (word-wrap: break-word, text-overflow: ellipsis) to ensure that long data elements don’t expand the table, but this still doesn’t resolve the issue on DHIS2.
  1. Responsive Design:
  • I’ve tried applying responsive layout techniques using media queries to control the table layout across different screen sizes, but the expansion problem persists only within DHIS2.

Potential Causes:

  • DHIS2 Global Styles: I suspect that DHIS2’s global CSS might be overriding my custom styles and causing the table to expand.
  • Mapped Data: The data I’m mapping from DHIS2 into the table might contain long strings or data elements that are handled differently by the platform, which could be contributing to the issue.

My Question:

Has anyone else experienced similar issues with custom table layouts expanding beyond their container in DHIS2? If so, are there any known workarounds or suggestions for better controlling table widths within the DHIS2 platform? Could there be a way to prevent DHIS2’s global styles from overriding my custom styles?

Any guidance or insights would be greatly appreciated! Thank you in advance.

Additional Context: I’ve attached screenshots showing the issue in both the local environment (where everything looks fine) and DHIS2 (where the table expands beyond its expected width).

Thanks,

Hi @Ishimwe_Christabella

It could help if you share the code so one could test on play? Did you try using the !important tag in your CSS?

I’d like to add that it might be a better option to start testing using the available formats because

What version of DHIS2 are you using? Did you try using sections for your data set?