CSS is refusing to apply styles to anything generated with <$list> widget with an ID

#1

I’m trying to apply CSS to the content inside a <$scrollable> container, which should visible in a lot of my tiddlers via {{||$:/TTA/Timeline}} template. Each tiddler has an ID that corresponds with a <div> element.

Below is part of the code, where the <div> ID is applied using {{{ [<event>get[tiddler-id]] }}}:

<$list filter="[tag<year>nsort[order-inUniverse]]" variable="event">
  <div id={{{ [<event>get[tiddler-id]] }}} class="tta-timeline-event-container" style={{{ [<event>get[coords-x]addprefix[top: calc( ]addsuffix[px - 50% + 15px);]] }}}>
    <div class="tta-timeline-event-icon">
      <$link to={{{ [<event>get[title]] }}}/>
    </div>
  </div>
</$list>

If I were to create a static element, the CSS would work normally.

Also, if I were to create a <$button> widget and tried to push it, I get an error:

<$button>
<$action-sendmessage $message="tm-scroll" $name="selector" $value={{!!tiddler-id}} animationDuration="0"/>
scroll
</$button>

This is the error pictured below:

error
error781×193 6.57 KB

This is the full code of tiddler $:/TTA/Timeline:

<style>
.tta-timeline {
  position: absolute;
	border: 1px solid white;
	width: calc(100% - 10px);
	height: 400px;
	color: white;
	overflow-y: scroll;
}
.tta-timeline-year-container {
	position: relative;
	border: 1px solid white;
}
.tta-timeline-year-caption {
	position: sticky;
	top: 0px;
	border: 2px solid blue;
	background-color: lightblue;
	color: black;
	font-weight: bold;
	font-size: 12px;
	padding: 0;
	border-radius: 5px;
	display: block;
	width: 100px;
	text-align: center;
}
.tta-timeline-event-container {
  position: absolute;
	top: 0px;
	height: 100%;
	width: 50px;
	border: 1px solid red;
}
.tta-timeline-event-icon {
  position: absolute;
	top: calc(50% - 15px);
	width: 300px;
	border: 1px solid blue;
}
#{{!!tiddler-id}} .tta-timeline-event-icon {
	border-left: 1px solid yellow !important;
	border-right: 1px solid yellow !important;
}
</style>
<$scrollable class='tta-timeline'>
	<$list filter="[tag[$:/TTA/Year]]" variable="year">
		<div class="tta-timeline-year-container" style={{{ [<year>get[width]addprefix[height: ]addsuffix[px]] }}}>
			<span class="tta-timeline-year-caption">
				<$text text={{{ [<year>get[caption]] }}}/>
			</span>
			<$list filter="[tag<year>nsort[order-inUniverse]]" variable="event">
				<div id={{{ [<event>get[tiddler-id]] }}} class="tta-timeline-event-container" style={{{ [<event>get[coords-x]addprefix[top: calc( ]addsuffix[px - 50% + 15px);]] }}}>
					<div class="tta-timeline-event-icon">
						<$link to={{{ [<event>get[title]] }}}/>
					</div>
				</div>
			</$list>
		</div>
	</$list>
</$scrollable>

I have attached all the json files that are need for this part of the project:

Below is a sample image of my project, which is currently working on TWC:

episode.PNG
episode.PNG873×725 71.9 KB

On the very bottom is the part I am currently having trouble with, where when a tiddler is selected it scrolls to the element and puts a yellow border on the left and right side of the icon.

timeline
timeline883×212 68.1 KB

That’s what I am trying to do with:

#{{!!tiddler-id}} .tta-timeline-event-icon {
	border-left: 1px solid yellow;
	border-right: 1px solid yellow;
}

The current project is running on TWC and can be found here at The Temporal Accord.

#2

I figured out what my problem was.

I had to change the id from VOY/2x18@0000(prime) to VOY-2x18-0000-prime. For some reason id didn’t like the other format. This was strange because it worked on TWC.

The reason why the button wasn’t working is that I originally had this code:

<$button>
<$action-sendmessage $message="tm-scroll" $name="selector" $value={{!!tiddler-id}} animationDuration="0"/>
</$button>

Where the $value needed to have a # sign in there, so simply using addprefix[#] solved that problem.

<$button>
<$action-sendmessage $message="tm-scroll" $name="selector" $value={{{ [<storyTiddler>get[tiddler-id]addprefix[#]] }}} animationDuration="0"/>
</$button>
#3

If you want to select by id, doesn’t your selector need to start with a hashtag (e.g. #TNG/7x26@0000(altTime) ) ?

#4

Yeah, I figured that out already. My solution was:
$value={{{ [<storyTiddler>get[tiddler-id]addprefix[#]] }}}.

#5

I also had to change the format of the id to TNG-7x26-0000-altTime. There is just something in the old format that id didn’t like.

#6

Hi @RedAsset ,

you can also use the escapecss[] filter operator if there are special characters in the id-name

just:

{{{ [<storyTiddler>get[tiddler-id]escapecss[]addprefix[#]] }}}