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

[TW_Tones]

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?

[pmario]

@TW_Tones

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.

[EricShulman]

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

[TW_Tones]

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.

[arunnbabu81]

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.

[TW_Tones]

@arunnbabu81

Will that be useful for your purpose.

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.

[Brian_Radspinner]

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;
}

[TW_Tones]

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.

[Brian_Radspinner]

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;
}

[TW_Tones]

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;

• 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.

[Matteo]

I apologize for reopening this old topic but I need some advice on something discussed here

@Brian_Radspinner

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;
}

I’ve used and enjoyed this stylesheet for a long time.
But recently I ran into a problem when I decided to use the setting that turns tiddler titles into links. ($:/ControlPanel > Settings > Tiddler Titles / Optionally display tiddler titles as links)

• Now this happens:

This happens not with all tiddlers, but with some of a certain length. But it happens often enough.

• With non-link titles: (works perfectly)

I’ve been going crazy for a couple of days looking for a solution, but I can’t figure out how to make it behave as before.
Do you have any idea how to do it?

---

If you want to test this happen in a empty copy of TiddlyWiki
(Screen size shouldn’t matter much because this also happens when shrinking the window)

The tiddler with the stylesheet:
$ example-_Style_Titles_testing.json|attachment (535 Bytes)

[TW_Tones]

Look in $:/core/ui/ViewTemplate/title which contains the title code by default, this should be where the styles are applied and not correctly when links are activated by changing $:/config/Tiddlers/TitleLinks to yes.

[Brian_Radspinner]

I can’t remember the exact behavior I was trying to get with those styles, but getting rid of them will still have the Tiddler Controls go above the Title Bar if the either one is too long.

Here is the title bar without any additional styling applied:

[Matteo]

@TW_Tones

Look in $:/core/ui/ViewTemplate/title which contains the title code by default, this should be where the styles are applied and not correctly when links are activated by changing $:/config/Tiddlers/TitleLinks to yes.

I’m not having much luck. I’ve also tried removing all references to $:/config/Tiddlers/TitleLinks, but that doesn’t change anything.
I’ll make other attempts. wish me luck

@Brian_Radspinner

but getting rid of them

But I like your work, I don’t want to get rid of it

[twMat]

Here’s a variant:

<style>
.tc-titlebar .tc-title {background:white;}
.tc-titlebar .tc-tiddler-controls {position:absolute; right:0; background-color:rgba(255,255,255,0.9); z-index:-1;}
.tc-titlebar:hover .tc-tiddler-controls {z-index:1;}
</style>

One question is how a multi-line title should behave. Should it “reflow” if the toolbar shows? And if a title splits into more lines when the toolbar shows, should the submenu and text fields be pushed down, or covered?