View toolbar in footer obscured by next tiddler

1

Folks,

I was building a viewToolbar to use in the tiddlers footer however on drop downs such as the More dropdown it does not appear over the tiddler below, and in particular over the view Toolbar below.

  • However I can’t find a Z-index or other method to influence this for the viewTool bar footer which needs to be higher than the top viewToolbar.

Any ideas appreciated.

2

I’ve fiddled with such issues a lot previously so I can probably help you (…even if my CSS is likely a bit rusty at the moment). Could you post a tiddler or a wiki that shows the problem?

3

You’re welcome to hack on this, Tony. I’m providing it “as is”, tested on TW .com

\define title-styles()
fill:$(foregroundColor)$;
\end
\define config-title()
$:/config/ViewToolbarButtons/Visibility/$(listItem)$
\end
<div class="tc-tiddler-title bk-2nd-tbar">
<div class="tc-titlebar">
<span class="tc-tiddler-controls">
<$list filter="[all[shadows+tiddlers]tag[$:/tags/ViewToolbar]!has[draft.of]]" variable="listItem"><$reveal type="nomatch" state=<<config-title>> text="hide"><$transclude tiddler=<<listItem>>/></$reveal></$list>
</span>
<$set name="tv-wikilinks" value={{$:/config/Tiddlers/TitleLinks}}>
<$link>
<$set name="foregroundColor" value={{!!color}}>
<span class="tc-tiddler-title-icon" style=<<title-styles>>>
<$transclude tiddler={{!!icon}}/>
</span>
</$set>
<$list filter="[all[current]removeprefix[$:/]]">
<h2 class="tc-title" title={{$:/language/SystemTiddler/Tooltip}}>
<span class="tc-system-title-prefix">$:/</span><$text text=<<currentTiddler>>/>
</h2>
</$list>
<$list filter="[all[current]!prefix[$:/]]">
<h2 class="tc-title">
<$view field="title"/>
</h2>
</$list>
</$link>
</$set>
</div>
</div>

tag it with the usual $:/tags/ViewTemplate

4

Thanks @twMat sorry about a delayed reply, @CodaCoder seems to have the solution in the above example.

However @CodaCoder I need to work out, what within your example is fixing it?, so I can apply it to my solution already built. I expect I will work it out in the fullness of time but if you can tell me it would be helpful.

  • Wonder where if at all bk-2nd-tbar is defined
5

It’s local to my stuff. Remove it.

All I can remember doing is taking a copy of the TW original and hacked it a bit.

6

I am not sure if I correctly follow you, but does it mean you want to have the title bar at footer, if so

  1. Create a new tiddler
  2. Tag it “$:/tags/ViewTemplate”
  3. Put in text <$transclude tiddler="$:/core/ui/ViewTemplate/title"/>
7

At a guess, yours was “breaking the cascade”, perhaps by introducing/removing a stacking context.

8

I am constructing a new type of toolbar that allows buttons to be placed at the bottom. Selecting from existing buttons or add additional with another tag.

  • Eg Jump to top/close etc…

I think I need to retest on tiddlywiki.com or empty.html to check something else is not interfering.

I suspected this but with a lot of searching could not find the z-index on the view toolbar any where, hence this post. I find the same with <<tag tagname>> in the tiddler preview pain, the tag dropdown goes under the bottom of the tiddler frame.

I just wish this was documented so we can manage the introduction of dropdowns of different types.

9

You should read the link I posted – it’s not just about z-index. Even if my guess is wrong, learning about the stacking context is key to understanding css layout along all dimensions.