Changing Column Widths

In some cases, columns on checklist widgets will need to be made wider or more narrow, depending on the default font size or the font family that is specified to be used by the global branding template.

div#part_admissions table.table col:nth-child(4) {width: 300px !important;}

In the above code, you can set a specific width of a column. The checklist table above consists of four columns: the checklist icon, the checklist status, the checklist details, and the checklist date. The "nth-child" CSS selector in the above example uses "4", as "Date" is the 4th column of this table. Should other columns need adjustment, the "nth-child" selector can be updated accordingly. The table in question has a class of "table" and is nested inside, in this example, a div element with the id "part_admissions".

This kind of snippet can also be updated to target different parts of your portal view code. If one is using the 'Checklist By Section' widget, it could be helpful to set the same date column for all the checklist tables (section tabs) in one instruction. 

div[id^='part_checklist_'] table.table col:nth-child(4) {width: 15% !important;}

In general, the [attribute^=value] CSS selector matches every element whose attribute value begins with a specified value. In this example, we are targeting the 4th column of a table element with class of 'table' that is nested within any div element whose id attribute starts with the string "part_checklist_". This would set the width for that column for all the section tabs that are configured in that portal widget.

Depending on the desired adjustments, the width can be set to either a specific pixel width or percentage. The !important property indicates that subsequent rules on the element should be ignored.

Dot/Ellipsis after Checklist Icon

In some cases you may see a dot next to checklist icons ( ,  ). The dot is actually the beginning of an ellipsis which is displayed when there is too much text or content for a given element and the overflow setting on that element is configured in a particular way.

Institutions can either (a) increase the width of the first column using the technique described above or (b) unset the text overflow property of the table cells. Example for an Admissions Checklist table below:

#part_admissions table.table col:nth-child(1) {width: 28px !important;}

#part_admissions table.table>*>tr>td {text-overflow: unset !important;}

Text Wrapping within a Column

In some cases it may not be practical to adjust the table width. If checklist detail descriptions contain long strings, it might be better to allow the text to wrap onto 2 lines rather than adhering to a neat table row display:

#part_admissions table.table>*>tr>td {white-space: normal !important;}