LIMITING THE NUMBER OF TEXT BOX CHARACTERS SHOWN IN A RECORD LIST COLUMN TO A SHORT SINGLE LINE - Nov 16th, 2022


By default (at least through V 3.57) if you included a text box field in the record list display of a multi-record
editor, the entire content of that field was displayed, making it difficult to display multiple records.

Thanks to Jeff Shields, a very knowledgeable coder and CMSB user, there’s now some easy ways to limit the number of
characters displayed in a record list column.

He offered 2 basic approaches. One using only CSS in a custom.css file that won’t get overwritten when you upgrade the
core CMSB files, and another that changes one of the core files and offers more granularity, but will be overwritten on
a CMSB upgrade.

I used the custom.css approach, and found hat I had to make some modifications to get the code to work.

First Jeff’s code. (You’ll have to change some of the specific values in order to make the code work for your
application.) Followed by my modified implementation.

Global Change (affects all tables) insert the following code block in a file called custom.css, in your root cmsb
folder.


table.data td {
white-space: nowrap;
overflow: hidden;
max-width: 180px;
max-height: 30px;
text-overflow: ellipsis;
}

Limiting the effect to a single table

table.data[data-table="blog"] td {
white-space: nowrap;
overflow: hidden;
max-width: 200px;
max-height: 30px;
text-overflow: ellipsis;
}

And if you wanted to change only a specific column (in this example, the column (myColumn) in the specific table (blog),
you would first change the lib/menu/default/list_functions.php core file on line 629 (Referencing V3.57), From this:
(UNTESTED)

$tdAttributes = "style='text-align:left'";

To this:

$tdAttributes = "style='text-align:left' data-column='$fieldname'";

And then create a custom.css file with the following code;

[data-table="blog"] [data-column="myColumn"] {
white-space: nowrap;
overflow: hidden;
max-width: 200px;
max-height: 30px;
text-overflow: ellipsis;
}


I found it necessary to modify the code slightly to achieve a truncated single line display for a text box field column.

It seems that although all the CSS above did truncate any text that didn’t fit in the predefined max-width, each line
break in the text triggered the display of a new line with a new max-width of its own. This made my column display many
short lines, each with an ellipsis.

I really wanted only a short, single line of text to indicate that the field had actually been filled in, so I added the
following to my custom.css file.


[data-table="myColumn"] br {
display: none;
}

I also found that the max-height had no effect on the display so I removed it from my CSS. (You may get different
results)

I had a a rather lengthy section description field in my table, so I had to change all the line breaks to <p> so that
the text would appear correctly at the top of the record list.



The materials on this web site have been created for use with CMS Builder content management software. CMS Builder software is published and licensed for use by InteractiveTools.com. Please contact Interactive Tools for information on the downloading of the software or the purchasing of licenses.


Terms of Service