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)

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

By gkornbluth - November 14, 2022

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

By gkornbluth - November 15, 2022

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

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

if you prefix the br css with [data-table=‘listen-live’] then it will only impact the table not ever single BR on the list page

[data-teble="listen_live"] br {
 display: none;
}

I think the br prevented the cell from hitting the 180px width. 

Jeff Shields

By gkornbluth - November 15, 2022

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

By kitsguru - November 15, 2022

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

By gkornbluth - November 15, 2022

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