[TW5] Applying Styles to list-filter results while avoiding the line wrap problem

[Douglas Counts]

Hey everyone,

I'm trying to apply a yellow background to all listed shadow tiddlers that have been altered in the list.

This way I can quickly scroll down the very lengthy list of shadow tiddlers and quickly discern which ones are defaults and which ones are not.

I can successfully display the shadow tiddlers in a list like so:

<$list filter="[all[shadows]sort[title]]"/>

And the altered shadow tiddlers have a slightly lighter black color which is hard to quickly discern in such a lengthy list.

So, I decided to attempt to give the altered shadow tidders within the list, a yellow background color to quickly set them apart from the others.

But if I do something like shown below, the listed shadows simply line wrap and are not listed one per line. All the shadow tiddler titles are now listed on a single line which is not desired.  Although the yellow highlight does successfully distinguish the altered shadow tiddlers now: 

<style>

.my-class .tc-tiddlylink.tc-tiddlylink-resolves {

    background-color: yellow;

}

</style>

@@.my-class

<$list filter="[all[shadows]sort[title]]"/>

@@ 

Anyone know how I can fix this line wrap problem?  

Thanks,

-Doug

[Ton Gerner]

Hi Douglas,

Try:

<style>
.my-class .tc-tiddlylink.tc-tiddlylink-resolves {
        background-color: yellow;
}
</style>


@@.my-class

<div>

<$list filter="[all[shadows]sort[title]]"/>

</div>
@@

Cheers,

Ton

[Douglas Counts]

Sweet,

Adding the divs and the blank lines fixed the issue entirely. 

Thank you so much,

-Doug

[Eric Shulman]

On Friday, February 17, 2017 at 10:14:27 AM UTC-8, Douglas Counts wrote:

I can successfully display the shadow tiddlers in a list like so:

<$list filter="[all[shadows]sort[title]]"/>

The <<list-links>> *macro* can be used to quickly display filter results, one per line, with bullets.

The <$links> *widget* is the underlying mechanism that the <<list-link>> macro uses.

When used without a matching </$list> (i.e, by using a closing "/>" in the "<$list .../>" syntax), it simply outputs the matching tiddler titles, without any other special formatting.  This is as intended.  To output the <$list> results with desired formatting, you must specify the output format *inside* of <$list>...</$list>, like this:

<$list filter="..."> <<currentTiddler>><br> </$list>

Note: within the <$list> widget content, <<currentTiddler>> is the value of each matched tiddler title.  Thus, in the above example, each matched title is display, one per line, using <br> to separate them.

<style>

.my-class .tc-tiddlylink.tc-tiddlylink-resolves {

    background-color: yellow;

}

</style>

@@.my-class

<$list filter="[all[shadows]sort[title]]"/>

@@

That is 99% correct.  If you fix your usage for <$list>...</$list> as described above, your CSS tweak should work just fine.

Let me know how it goes.

-e

Eric Shulman

TiddlyTools: Small Tools for Big Ideas! (tm)

InsideTiddlyWiki: The Missing Manuals

[Douglas Counts]

Eric,

While Ton Gerner's advice worked great, I'm always looking to see what other techniques work and why.  So I gave your advice several failed attempts and could not get a single attempt to work properly.

Adding a closing tag like you seem to suggest as shown below doesn't line wrap either and the yellow background was not applied to the altered shadow tiddlers either:

@@.my-class

<$list filter="[all[shadows]sort[title]]"></$list>

@@

Essentially, that left me with the same problem that I had initially.

This next attempt did show the list of shadows with one per but with no yellow background applied to the altered shadow tiddlers:

@@.my-class

<$list filter="[all[shadows]sort[title]]">

</$list>

@@

These next three attempts displayed some wrapping problems on some lines but not on others: 

@@.my-class

<$list filter="[all[shadows]sort[title]]"> <<currentTiddler>><br> </$list>

@@

and:

@@.my-class

<$list filter="[all[shadows]sort[title]]"> <<currentTiddler>><br> </$list>

@@

and this didn't work either:

@@.my-class

<div>

<$list filter="[all[shadows]sort[title]]"> <<currentTiddler>><br> </$list>

</div>

@@

For whatever reason, only Ton Gerner's suggestion appears to work properly.  Am I missing something?

Thank you,

-Doug

[Eric Shulman]

On Friday, February 17, 2017 at 12:37:14 PM UTC-8, Douglas Counts wrote:

Eric,

While Ton Gerner's advice worked great, I'm always looking to see what other techniques work and why.  So I gave your advice several failed attempts and could not get a single attempt to work properly.

Hmmm.... Try this:

1) Go to www.TiddlyWiki.com

2) Press New Tiddler (+) button

3) Paste the following into the text of the tiddler

<style>
.my-class .tc-tiddlylink.tc-tiddlylink-resolves {
    background-color: yellow;
}
</style>

@@.my-class
<$list filter="[all[shadows]sort[title]]"><$link><$text text=<<currentTiddler>>/></$link><br></$list>
@@

4) Press "done".

notes:

* On www.TiddlyWiki.com, there aren't many altered Shadow tiddlers, so only a few titles are shown with yellow background.  Try clicking a link to a shadow, edit/save the shadow (so it is "changed"), then go back to the list... the yellow background should now appear on that tiddler link.

* The <$link><$text.../><$link> syntax ensures that the display of the <<currentTiddler>> title is a single clickable link, even if the title is not a proper WikiWord.  This might also address some of the "word wrapping" problem, since the link text isn't being rendered as separate pieces as before.

again, let me know how it goes,

enjoy,

[Douglas Counts]

Awesome, that works well and is more comprehensible as to why and how it works.

Thank you very much for your time and gift of knowledge,

-Doug