Limiting the number of Text Box Characters shown in a record list.

9 posts by 2 authors in: Forums > CMS Builder
Last Post: November 15, 2022   (RSS)

Hi All,

I have a text box field in a multi record editor and I’d like to show the existence of text in that field in the record list without showing the complete contents of the text box field for each record..

Currently, unless I’ve missed something, (highly likely) my only option is to show the entire contents of the text box field in the record list for each record, and when there’s more than a few lines of text in the box, that make the record list extremely hard do use.

Showing a simple ‘yes’ or ‘no’ or, the first few words of the contents would be preferable.

Any thoughts?

Jerry Kornbluth

The first CMS Builder reference book is now available on-line!







Take advantage of a free 3 month trial subscription, only for CMSB users, at: http://www.thecmsbcookbook.com/trial.php

By kitsguru - November 14, 2022 - edited: November 14, 2022

You can do this in the custom.css file in the cmsb folder.

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

You can play with the values to get it the way you want it

You can limit the effect to a specific table.

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

By kitsguru - November 14, 2022 - edited: November 14, 2022

If the TD cells were identified, then you could target the column but that would be a change to the core (HINT).

Adding a data-column="colName" would do it.

In lib/menu/default/list_functions.php

change line 629

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

THEN

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

Would target the myColumn for the blog table

Jeff Shields

Thanks Jeff,

I'll give it a try.

Appreciate your help

Jerry Kornbluth

The first CMS Builder reference book is now available on-line!







Take advantage of a free 3 month trial subscription, only for CMSB users, at: http://www.thecmsbcookbook.com/trial.php

Hi Jeff,

Thanks again for all your help.

I opted to go with a custom.CSS solution so that upgrades don't overwrite the solution.

However, it turns out that each <br> created a new line of text in the cell regardless of any CSS height or max-height settings (see image 1)

Here's what I came up with (unless you've got a more elegant approach):

table.data[data-table="listen_live"] td {
white-space: nowrap;
overflow: hidden;
max-width: 180px;
text-overflow: ellipsis;
}

br {
display: none;
}

The difference is most evident in the 'Performance Show Timings' column.

I also had to change any <br> in the section description to <p> to maintain formatting.

(Image 1, without br css)

(image 2, with br css)

Jerry Kornbluth

The first CMS Builder reference book is now available on-line!







Take advantage of a free 3 month trial subscription, only for CMSB users, at: http://www.thecmsbcookbook.com/trial.php
Attachments:

image1.jpg 131K

image 2.jpg 123K

Thanks for catching that, Jim. 

Do I need to add table.data as in the td css?

table.data[data-table="listen_live"] br

Jerry Kornbluth

The first CMS Builder reference book is now available on-line!







Take advantage of a free 3 month trial subscription, only for CMSB users, at: http://www.thecmsbcookbook.com/trial.php

actually you don’t need table.data at all if you have the [data-table=“…”], one or the other will work. 

table.data is common to all list pages where the data-table specified the actual table being used.

Jeff Shields

Great,

thanks

Jerry Kornbluth

The first CMS Builder reference book is now available on-line!







Take advantage of a free 3 month trial subscription, only for CMSB users, at: http://www.thecmsbcookbook.com/trial.php