Column display size should not become too large in listings

[Jari Häkkinen]

In many cases the table listings are hampered by too much information in columns. As an example, users using long description fields will get very long table rows in the listings since the column width stays reasonable but the number of lines grows to fit all information. The display of columns with much information should be limited to a number of characters and full information can either be linked to or displayed when triggered by a mouse-over event.

[Nicklas Nordborg]

I made some tests with this some time ago. It is rather easy to implement a central function that just cuts strings that are too long. This can for example, be done in the Cell class in the Table taglib. But it doesn't work very well since the values may contain HTML markup (including javascript) that just can't be cut at a given length.

I have also been playing around with CSS properties to try to set a max width for columns and try to use some intelligent javascript (onmouseover) that checks if parts of the text is hidden or not. This works slightly better, but there are also problems when values contains markup and scripts and with different browsers.

One solution to split the values when the table is generated. Eg something like.

<tbl:cell longvalue="....">short-value</tbl:cell>

But there are probably thousands of places to change and some values are not as simple as the example above. Eg. columns that has a list of child items.

[Nicklas Nordborg]

I have some more tests with a CSS/Javascript solution since I think that is the only way forward that doesn't require a lot of small changes everywhere. I am a bit more positive now. Here is what I have found:

• Trying to manipulate the tables seems to be a dead end, they will simply not do what you want unless all cell sizes (width and height) are explicitly set. But we don't want every cell to be same size. We need some dynamic layout to happen because a cell containing a single number should not be the same size as a cell with a long description.

• A better way seems to wrap the cell contents inside a <div> tag. It supports the "magic" attributes max-width and max-height which allows us to specify a maximum width and height of the <div> and hide the rest. The best part is that the table cell will follow the size of the <div>. Here is the CSS code that is required:

.constrained {
   max-width: 30em;
   max-height: 32px;
   overflow: hidden;
}

This creates a <div> that can hold about two lines of text that is max 30 characters wide. Now, we need a way to display the hidden content also. There is a very simple solution that involves only CSS:

.constrained:hover {
   max-height: none;
}

This removes the max height of the <div> inside the cell when the mouse is over it. The cell will automatically expand to display the rest of the text. This seems to work well on both IE and Firefox. There are a few drawbacks:

• There is no visual indication that text has been hidden
• The result is a bit "jumpy". As you move the mouse over the page, the table rows jump up and down as they are expanding and hiding.

The drawbacks can be probably be addressed with Javascript. By iterating over all tags in a page it is possible to check if text is hidden or not and then take some action depending on it.

for loop over all tags with class 'constrained'
{
  var isOverflowing = tag.clientWidth < tag.scrollWidth || 
     tag.clientHeight < tag.scrollHeight;
  if (isOverflowing)
  {
    .... do something
  }
}

This loop has to go through the entire page and it may take some time if the page contains a lot of information.

To get rid of the jumpiness the pure-CSS solution with :hover must be replaced with Javascript events. The for loop above can add event handlers to overflowing tags. The event handler can then execute some code that displays a floating, tooltip-like, box with the rest of the text.

[Nicklas Nordborg]

(In [4673]) Fixes #1186: Column display size should not become too large in listings

This has been implemented as an optional feature that is disabled by default. To enable go to File -> Preferences and select an option for "Display long texts". Note that the "On click" option may not perform well if the listing displays a lot of items and/or columns. Performance is best with Firefox and about 5-10 times slower on Internet explorer which may need several seconds to render a page with 100+ items.