CSS question

[Hubert]

Hello,

Apologies if this is too much of an off-topic question. I'm trying to make a div box stick to a position within the viewport (the visible part of the window) irrespective of scroll position so that it will always be visible. I know that I should use position: fixed but this only makes the div stick to the top of the tiddler frame. The div stays at the top of the tiddler frame (becomes invisible) when the tiddler frame is scrolled to the bottom instead of sticking to the top of the viewport.

Is there anything in the core CSS that keeps overriding what I'm trying to achieve?

Here's my CSS:

    position: fixed
    top: 0;
    left: 200px;
    width: 300px;
    height: 100px;
    background-color: darkred;
    color: white;
    text-align: center;
    padding: 10px;
    border: none;
    border-radius: 2px;
    box-shadow: 10px 15px 30px grey;
    transition-duration: 0.4s;

Thanks for your suggestions!

Best regards,

Hubert

[Jed Carty]

It looks like a typo. You missed a semicolon (;) after position: fixed;

When I added that the style worked on tiddlywiki.com

[Hubert]

Thanks for the heads up, Jed. Typo fixed, but the issue remains.

[Jed Carty]

That is odd.

I went onto tiddlywiki.com, created a new tiddler and put this in the text field:

<div style='position: fixed;

    top: 0;
    left: 200px;
    width: 300px;
    height: 100px;
    background-color: darkred;
    color: white;
    text-align: center;
    padding: 10px;
    border: none;
    border-radius: 2px;
    box-shadow: 10px 15px 30px grey;

    transition-duration: 0.4s;'>
Bloop
</div>

and the div was floating at the top of the view port as expected. So the concept should work and the error would be something else.

I suspect that the problem may be from z-sorting. The div will be hidden behind some other tiddlers, I am not sure how the z order is set. Try adding z-index:999; to the style and see if the problem remains.

If that doesn't fix it then it may be from whatever the transition-duration is controlling, I have had lots of trouble with css transitions working inconsistently.

[Hubert]

Thanks Jed.

I can see that this style works for me as well on TiddlyWiki.com but it stopped working when I changed the storyview from 'classic' to 'zoomin' (I use the latter in my personal TW), so this seems to be the issue.

I should mention that removing the transition property and adding the depth (z-index) value of 999 had no effect.

It seems to me that patching the 'zoomin' storyview-related tiddler(s) could enable this functionality, unless there's something less 'destructive' to be tried first, which I'm not aware of.

Thanks,

Hubert

[Jed Carty]

Using it in the zoomin story view is a very important piece of information here.

To make it visible add the tag $:/tags/PageTemplate and it will appear the way you want it to. Adding or removing that tag will toggle its visibility.

[Hubert]

To make it visible add the tag $:/tags/PageTemplate and it will appear the way you want it to. Adding or removing that tag will toggle its visibility.

I'm not quite sure I understand. When I tag a tiddler (be it the one with the div or my CSS styles tiddler) all I get is a transclusion of those tiddlers' content (text) on top of what would normally be rendered through TiddlyWiki's built-in CSS classes called html body.tc-body. The div doesn't stick any other way after adding this tag the way I did.

Thanks,

Hubert

[Jed Carty]

I don't know your situation, but these are the generic steps on tiddlywiki.com that will show you what to do there, you will have to modify them to your situation.

Make a tiddler with this in the text field:

<div style='position: fixed;
    top: 10px;

    left: 200px;
    width: 300px;
    height: 100px;
    background-color: darkred;
    color: white;
    text-align: center;
    padding: 10px;
    border: none;
    border-radius: 2px;
    box-shadow: 10px 15px 30px grey;
    transition-duration: 0.4s;

z-index:999;
'>
Bloop
</div>

give that tiddler the tag $:/tags/PageTemplate

it should now be floating above everything else at the top of the screen, regardless of what other tiddlers are open or what story view you are using.

Change the contents of that tiddler to change whatever you want to actually be displayed, add or remove the tag to make it visible or not.

[Hubert]

OK, now I understand, thanks for taking your time to help, Jed. Much appreciated!

On a side note, it would be great if the zoomin storyview rendered all CSS parameters (like position) as expected out of the box.

Thanks again,

Hubert