Shiraz: Dynamic Table set maximum column width or truncate very long values with ellipsis "…"

[Lamnatos]

Is there a way to constrain the maximum width of a dynamic table to always fit the Story River’s width?

I’m using @Mohammad’s Shiraz Dynamic Tables and whenever a field has a very long value, the whole table extends far out the Story River. It breaks the layout in all sorts of ways.

I’d like to keep the table strictly within the Story River width by forcing a vertical expansion of each row (instead of horizontally that breaks things). Alternatively I’d like to somehow set a max-length attribute on a column after which the value is truncated. Could this be done with a Dynamic Table Column Template?

In my case, I’d like to either constrain the URL column so the three of them stay within the Story River:

Title	URL	Tags
Example	https://some-kind-of-extremely-really-ridiculously-long-url.com/it-might-even-have-parameters/or-it-could-even-be-a-bookmarklet/the-sky-is-the-limit-tbh.com	tagA, tagB

Or adjust the URL column to something like this:

Title	URL	Tags
Example	https://some-kind-of-extre…	tagA, tagB

[dhjackal]

Why not just shrink the size of the URL?

But I see Mohammad is replying so probably best waiting for his answer smile:

[Mohammad]

I did a test on Shiraz 2.9.7 — create stylish contents in Tiddlywiki and it works. (here is the example tiddlers: Example.json (335 Bytes) )

[Mohammad]

@Lamnatos

Or adjust the URL column to something like this:

You can use a CSS class like below:

.truncate { 
 white-space: nowrap; /* Prevents the text from wrapping */
 overflow: hidden; /* Hides the overflowing text */
 text-overflow: ellipsis; /* Adds ellipsis (...) */
 max-width: 200px; /* Set a max-width for the cell */
}

Example

<table>
  <tr>
    <td class="truncate">This is a long text that will be truncated with an ellipsis.</td>
  </tr>
</table>

[Lamnatos]

Thank you for the example code. I’ve tried it with one of my bookmarklet bookmarks on the Shiraz page and it breaks the page:

RealLifeVeryLongURL.json (3.9 KB)

Also thanks for the CSS, can you please tell me how I would apply it on a Dynamic Table created table? How would I “inject” a class to apply the truncation you specified?

Edit: I forgot to mention earlier, I’m displaying the same very long URL field on the tiddler via a plain Markdown table. In there it displays properly without overflowing all over the page.

[Mohammad]

Can you create a static table on tiddlywiki.com without overflowing the tiddler using the above sample data?
I cannot! So, that is a TiddlyWiki issue and there some solutions discussed on the Talk forum!

For example, adding

.tc-tiddler-body{
	overflow-wrap:anywhere;
}

will make tiddly-body behave like tiddler edit preview and prevents overflowing.

[Mohammad]

@Lamnatos

Also thanks for the CSS, can you please tell me how I would apply it on a Dynamic Table created table? How would I “inject” a class to apply the truncation you specified?

1. Create a body template (a tiddler tagged with $:/tags/Table/BodyTemplate) using instruction Shiraz 2.9.7 — create stylish contents in Tiddlywiki
2. Use the truncate class (it should be already added as stylesheet) for the cell displays the Url.

Attached is a dirty quick solution
url-template.json (849 Bytes)

As I explained above, Shiraz does nothing with TiddlyWiki table, so if you can have the correct format using TW tables, then you can have the same in Shiraz.

[Lamnatos]

Can you create a static table on tiddlywiki.comwithout overflowing the tiddler using the above sample data?
I cannot!

Hm, something strange is happening here

First, here are the same tiddlers as before plus a ViewTemplate that displays the url and a few other fields in a plain Markdown table on all tiddlers having a url field (ie on the included BE tiddler)

RealLifeVeryLongURL-WithTemplate.json (4.5 KB)

The above does the following:

• TiddlyWiki.com: the markdown table breaks and cannot contain the long url within the Story River.
• Shiraz Demo Page & my own TW (with Shiraz and numerous other plugins installed): the markdown table works as intended and is properly contained.

I’ll try to apply the truncation steps you describe and I’ll report back.

[Lamnatos]

Firstly I want to thank you for your effort in my weird corner case.

Simply dropping your url-template.json on my TW, made the URL column display nothing at all. You can see the result in the image below. Removing or changing the tbl-column-list field to a value different than url makes the field appear in all its overflowing glory.

I also realized that truncation is already taking place in the Title column so the functionality is already there but not applied to the URL column:

Here’s the overflowing state that prompted my initial question:

[Mohammad]

This is tiddlywiki.com with Shiraz + your own tiddler example + the template I sent.

@Lamnatos

Removing or changing the tbl-column-list field to a value different than url makes the field appear in all its overflowing glory.

The tbl-column-list field with url tells Shiraz to use url-template when displays urls.

You may test with clean empty.html to find the source of error.
Anyway, this is not a Shiraz issue. if you can use a static table to show the long url, then you can use Shiraz no difference.