Resizing column width in event & tracker capture

This guide explains the steps needed to give form labels more space in data entry.

In the image below there is a data element with a very long form name:

This looks bad because the text is spread across many lines and there is a large amount of dead space on the right hand side.

By inspecting the HTML that holds the data entry element we can see a class called absorbing-column:

This is the css which sets the relative widths of the field name and data entry columns. By clicking on the 70% it is possible to change the value and see this reflected in the data entry form (example below shows 50%).

However these changes are local and will not persist after a page refresh (and other users will not be able to see the change either). To make the change permanent, it needs to be stored on DHIS2.

Instructions

  1. Create a blank file and put in the style we want to use, for example to set the width to 50% we would enter: table td.absorbing-column {width: 50%;} into the file
  2. Save it as a .css file, for example style.css
  3. Custom style overrides are accessed via the api/files/style endpoint. So to add the style permanently to the system we sent a POST request to this endpoint eg:

curl @style.css https://play.dhis2.org/dev/api/files/style -H "Content-Type:text/css" -u admin:district

(Where the server url, username and password are updated for the server you are using)