I would like to add a bottom of the screen navigation bar, something like what is described here How to Design a Great Bottom Mobile Navigation Bar
and an example here What PWA Can Do Today
Is there a plugin that does something similar or can it be done with some custom CSS?
Thanks.
Keeping in mind TiddlyWiki operates like many website and has an infinite vertical scroll, so footers
There are a number of different ways to define or address this and I have seen all;
What do you want?
The fixed footer to scroll under - I suspect this is the more complicated option.
I am using Zoomin so $:/tags/BelowStory is not an option and I have the sidebar hidden.
I’m still trying to get a screen footer working. $:/tags/BelowStory gets me partially there but the tiddlers scroll OVER the footer, rather than the footer remaining on top. Conversely the sidebar does pass UNDER the footer.
Is there an alternative tag, or something extra I can do with the CSS?
Here is a related thread
Try this:
Create a tiddler (e.g., “MyPageFooter”), tagged with $:/tags/PageTemplate, containing:
\define myFooterHeight() 5em
<style>
.myPageFooter
{
position:fixed;
bottom:0;
left:0;
width:100vw;
height:<<myFooterHeight>>;
background:<<colour background>>;
border:1px solid;
}
.tc-story-river, .tc-sidebar-scrollable
{
padding-bottom:calc(<<myFooterHeight>> + 2em);
}
</style>
<div class="myPageFooter">
This is my page footer content
</div>
Notes:
$:/tags/PageTemplate tag causes this tiddler’s contents to be automatically rendered as part of the overall page display.<<myFooterHeight>> variable that can be referenced in the CSS definition. I suggest using a constant such as 5em (or whatever is guaranteed to fit your footer content)..myPageFooter CSS class anything you like.$:/tags/Stylesheet) it is not necessary. By using “inline” <style>...</style>, it ensures that the styles will automatically be applied whenever the “MyPageFooter” tiddler is rendered and allows the entire footer definition to be self-contained in a single tiddler for easy portability to any other TiddlyWiki you want. You can even drag-and-drop this single tiddler to import it into someone else’s TiddlyWiki to temporarily add your footer there!position:fixed and bottom, left, width and height attributes, you will want to set a background color, so that any underlying StoryRiver and SideBar content does not “show through” when it is scrolled under the footer. In particular, note the use of background:<<colour background>>;. This automatically applies the current page background color whenever you choose a different palette (see $:/ControlPanel > Appearance > Palettes).border:1px solid) to make the appearance of your footer suit your tastes..tc-story-river and .tc-sidebar-scrollable elements. This adjusts the bottom padding of those elements so that, when they are scrolled all the way to the bottom, they leave room enough room for your footer without overlapping.myPageFooter CSS class to apply the attributes you just defined above.That’s it. Let me know how it goes…
enjoy,
-e
I too like the idea of a page footer!
Testing that, I see it appears under the tid’s in the river, but above tag menu’s from the sidebar.
I suspect there are multiple bits of juggling here, but seems to me it should be above the river at minimum, and ideally below the tag menus in the sidebar (tag menus from within tids in the river appear on top, as part of the tid, which is fine)
When I try this on TiddlyWiki.com, the footer appears
My intention was that the footer should always appear above all other elements (including all tag dropdowns). To make this happen, try adding z-index:5000; to the attributes of the .myPageFooter CSS class definition.
If you’ve made any customizations to the $:/tags/PageTemplate tiddlers, you might also need to make sure that the MyPageFooter tiddler is always the last item in the $:/tags/PageTemplate list. You can check this by click on the $:/tags/PageTemplate tag “pill” to view the list. Then, you can use drag-and-drop to move MyPageFooter to the end of that list.
-e
I did need to add that z-index attribute to get it to come to the top.
That’s pretty close to what I had imagined.
There is still one issue though. If the tiddler that is displayed is longer than the screen height the last part remains under the new footer. I can sort of fiddle it by adding a couple of <br><br> at the end of the tiddler!
While the remaining worry @myfta has seems to be related to zoomin view (about which I’ve not tried to learn enough to troubleshoot), one other slight z-index problem is that the red tab for open draft tiddlers would be rendered behind this z-index:5000; footer (so, they would not be seen).
To the style section one could add the kluge:
.tc-drafts-list {z-index: 5001;}
Yes, as @Springer hints the issue I have does seem to relate to the Zoomin theme. It needs to scroll a littler further to display the page background below the tiddler.
Perhaps there is a Zoomin expert out there …?
Take with a grain of salt, because I’m just poking around (not a regular user of zoomin):
You can just add extra padding to the bottom of tiddlers when they’re in zoomin mode, in order to make sure they can scroll up enough to read the content that was getting stuck under your footer:
body.tc-body .tc-page-container.tc-page-view-zoomin .tc-tiddler-frame {
width: 100%;
width: calc(100% - 42px);
padding-bottom: 8em;
}
Surely 8em is too much. But you can make sure that works, then adjust as needed.
I realize this isn’t optimal in terms of aesthetics, because even shorter tiddlers will get that extra blank ribbon at the inside bottom area. But in zoomin mode I imagine this isn’t really getting in the way of anything. (Alas, adding margin rather than padding doesn’t seem to be helping, at least with my level of css hackery.)
I think you are on the right track, but this is having the effect of extending the tiddler rather than adding a margin (in the background color). That would be preferred as you can see the tiddler has ended rather than wondering if there was more hidden.
Agreed. I tried a few things without success. And that’s where I didn’t have time/determination enough to get to the bottom of how zoomin handles templates and css for that single-tiddler story river. I do hope a zoomin connoisseur can step in and help!
I have tried inspecting the differences between Classic and Zoomin. Whilst I cannot locate the relevant CSS it seems to be a problem that Zoomin is not allowing a margin after the single tiddler is displayed and just runs the tiddler to the end of the screen, i.e. the story-river comes to an abrupt end.
The Zoomin page view gives all of the Story River tiddlers position: absolute; which takes them out of the normal flow. That’s why the Story River doesn’t wrap around them anymore.
To add some extra space below the tiddler, you can try adding an :after CSS element to the tc-tiddler-frame. Here’s a starting point, to see if you can get the effect you want…
.tc-tiddler-frame::after {
content:" ";
position: relative;
height: 5em;
bottom: -8em;
margin-top: -6em;
display: block;
width: 100%;
background-color: #ff00ff26;
}
This feels fairly hack-ish, but seems to get the job done.
Adjust the following values:
height: 5em;
bottom: -8em;
margin-top: -6em;
Once you figure out a combination for the desired spacing, you can remove the background-color to just have empty space.
Your solution works ‘out the box’ for me! Thank you.