Has anyone found a solution to title and button overflow on tiddlers?

Has anyone found a solution to title and button overflow on tiddlers?

  • This seems to me to be an outstanding “aesthetic bug” in TiddlyWiki’s user interface.

In case where you have a long title and/or a lot of buttons, as above, displayed, the two interfere and look ugly.

Has anyone found a solution to title and button overflow on tiddlers?

  • I have tried moving the buttons behind a hamburger menu but not sure when to do so
    • buttons with their own drop down such as the more plugin, do not work behind my hamburger menu
  • Is there any way to determine if the overflow state, ie the sum of the title and buttons length means an overflow is necessary?
  • Could some smart CSS help?
  • Could we hide the buttons behind a slider so only when we hover the slider do all the buttons appear, and only then split the title?
    • Ideally only use the slider when there is no space

Any fresh ideas?

I think there is no real solution. Even if you only have 1 icon, if the title text in long enough it will need to be broken up. Especially on a mobile device.

The more dropdown works very well for me. I don’t have that problem since my titles are short and I use max 4-5 icons at the same time.

1 Like

Perhaps a little CSS can help…

The following CSS will prevent the title text from word wrapping.

.tc-title { white-space:nowrap; }

However… if the text is longer than the width of the tiddler (which is based on the current story width), then the excess title text will be clipped and hidden from view which can make it difficult to differentiate titles that only vary in the last part.

Alternatively, you could limit the width of the tiddler toolbar so that heavily populated toolbars will wrap onto multiple lines, leaving more room for the tiddler title text (which will still wordwrap if needed):

.tc-tiddler-controls { width:30%; }

One drawback to this approach is that the tiddler controls will wrap even when the tiddler title is short enough for the entire tiddler toolbar to fit on one line.

-e

1 Like

Thanks Eric,

  • Perhaps I can introduce a toggle that applies a smaller tc-tiddler-controls width only to selected tiddlers when it occurs.
  • A feature to reduce the current tiddlers title font size will help.
  • I don’t know css enough to make it somehow conditional or calculated.

https://giffmex.org/stroll/stroll.html#Advanced%20stuff

In stroll there is some tweaking for tiddler title position. Will that be useful for your purpose.

1 Like

This is better than nothing, although ultimately it would be nice if it could be responsive to the number of buttons, title length and current zoom level.

  • Even a tiddler by tiddler customisation option we have to manually apply would go a long way.
  • Customisation can include
    • Title fonts can be reduced in size
    • Buttons behind a horizontal slider or hamburger
    • Buttons overflowing to the next line
    • Buttons moved up into the tiddler border like stroll but “trimmer”

It seems to me finding a good solution for this needs to be on our roadmap.

I’m okay with the Tid Controls moving above the Title just when they need to:

.tc-tiddler-view-frame .tc-titlebar {
   display: flex;
   flex-direction: row-reverse;
   justify-content: space-between;
   flex-wrap: wrap;
}

.tc-tiddler-view-frame .tc-titlebar span.tc-tiddler-controls {
   flex: 1 0 max-content;
   width: min-content;
   text-align: right;
}

.tc-tiddler-view-frame .tc-titlebar span + span {
   flex: 1 1 auto;
}

5 Likes

Thanks for showing an approach brian

I notice that titles with plain english and average length words is not bad even with the default. Where it still “fails” is with system tiddlers with no word breaks or perhaps hyphenated titles and large words.

As a result I wonder if we count words and length in the titles and use this info to determin how we present the title?

It would be great if css could calc the space available or used by title/buttons.

Another thought that arrises with system tiddlers is to divide them into words delimited by / which I did previously for long urls then let them wrap like your plain language example.

Try this edit for system tids. overflow-wrap: anywhere should help with long titles w/out spaces

.tc-tiddler-view-frame .tc-titlebar {
   display: flex;
   flex-direction: row-reverse;
   justify-content: space-between;
   flex-wrap: wrap;
}.tc-tiddler-view-frame .tc-titlebar span.tc-tiddler-controls {
   flex: 1 0 max-content;
   width: min-content;
   text-align: right;
}.tc-tiddler-view-frame .tc-titlebar span + span {
   flex: 1 1 auto;
   overflow-wrap: anywhere;
}

2 Likes

I wonder if in this arrangement, where the full title appears on the next line, it would be appropriate to display in the original location the caption if available or a description like “System Tiddler”, “Shadow Tiddler” etc…

As I suggested titles delimited with “/” could be split to look like this;

Snag_102e4fa

  • where the intermediate name links to the tiddler eg extended-search to $:/PSaT/extended-search allowing extra navigation options.

Of course these suggestions can be driven by a set of config options to suite the wiki owner.