Question about a modified tagged box

[David Gifford]

Hi all

I managed to get the .tagged box to align left under the tiddler title the way I wanted it. Looks nice. That way when I use the newhere plugin to create child tiddlers, I get a kind of an alphabetical table of contents off to the side.

I also created a miniplugin so that if there are no child tiddlers, the word tagged doesn't appear.

But now if I add text to the tiddler, it is off to the right, which is fine, but when the tiddler text is longer and extends below the tagged box, the text wraps all the way to the left, under the tagged box.

Is there a way to make it so that
1. if there are no child tiddlers, the tiddler text is all the way over to the left, but
2. if there are child tiddlers, the right edge of the tagged box is the left margin for the tiddler text?

In other words, not to allow tiddler text wrapping around the tagged box?

Dave

[Scott Simmons]

Hi, Dave —

I'm not in front of my TWs right now to check, but I *think* this will render the tagging (and/or tagged) box invisible if there's nothing to display (which would solve part of your problem):

.tagging { display:none; }

.tagged { display:none; }

As for the other, it might be as simple as this:

.tagged { height:100%; }

... or it may require something more than than.  (100% heights in CSS are tricky, and I'm not sure if the .tagged box inherits some styling from elsewhere that could cause a problem.)

Sorry for not testing these to see if they work — but you should be able to try them quickly enough and see if they make any difference.  Hope it helps!  :)

[David Gifford]

Thanks Scott,

I know that doing the display none you suggest won't work because it will make it invisible whether there are tags or not, and obviously I want it visible when there are tags.

I tried .tagged .tiddlyLinkNonExisting {display:none;}, but that did not change anything.

I tried the 100% height idea, which was similar to what I was looking for, but it didn't do anything. However, margin-bottom 100% got me there. So thank you for the inspiration! However, there was a problem: bulleted lists did not move all the way to the right as the rest of the text did. And...100% means 100% of the screen, apparently, because about a screen length down, the text wrapped to the left again. I tried increasing the margin-left for the bulleted lists, but that didn't work right.

So I tried a different tack, also inspired by what you said: since the tiddlers with the tagged boxes and the tiddlers with content are mutually exclusive in my case, I decided to do 100% width for the tagged box. So now the tagged box shows up correctly where there are tags, and is invisible but pushes the text down ever so slightly when there are no tags. This will work for me. However, it WOULD be nice to have a working solution similar to margin-bottom 100% that goes all the way to the bottom of the tiddler. I have a feeling it involves creating a separate div element for the tagged box, and placing that element to the left of the element in which the tiddler text appears. But I am not sure how to do that.

[Scott Simmons]

Messy, but it sounds like it's doing the trick for the moment.

Maybe you could try setting the widths of the .viewer and .tagged/.tagging DIVs permanently:

.tagging, .tagged { width: 20%; }

.viewer {width:80% }

I think that will give you a permanent triptych-style tiddler with 40% of the tiddler's space devoted to two sidebars of tag data (each 20% wide) and a central column of content 60% wide.  (Adjust percentages as needed if it works.)

As for the display:none trick, I checked last night, and I'm using this to great effect in my TiddlyWikis:

.tagging { display:none; }

It just sets the default display property to "none," but when the .tagging section is wrapped in the .isTag DIV (i.e., when there's something to display), .isTag's display:block; property overrides it.  I'm not 100% sure it will work the same way with .tagged (since I want the "no tags" DIV displayed when a tiddler doesn't have tags), but it works for me with .tagging.  :)