Maki, yeah, I had previously tried inline-block along with a bunch of other
things in that rule. It didn't help because I hadn't targeted the item
underneath it as well.
Saq, thanks, that was *very* helpful. (For anyone else who comes along,
that should be "tc-dragover", with a dash, not a dot.)
The selector I had missed targeting was *.tc-droppable.tc-dragover >
.tc-droppable-placeholder*. (Both the droppable divs and the placeholder
divs beneath them need to be inline-block.) I also needed this goofy rule:
div.sib-quick-tiddler-jump ul > div.tc-droppable
div.tc-droppable-placeholder svg {
height: 0;
width: 1rem;
}
Yes, that's an *svg*, because TiddlyWiki uses a blank image within a *div* for
the placeholder after the last *li* in list-links-draggable. I assume there
is a good reason for this. :-)
Final version for anyone interested:
div.sib-quick-tiddler-jump {
background-color: <<color menubar-background>>;
position: fixed;
z-index: 850;
display: inline-block;
top: 0;
right: 0;
left: 0;
text-align: center;
height: 30px;
overflow: auto;
border-bottom: 1px solid <<color muted-foreground>>;
padding-bottom: 3px;
padding-top: 3px;
font-size: 12px;
}
div.sib-quick-tiddler-jump a {
color: <<color menubar-foreground>>;
}
div.sib-quick-tiddler-jump a.tc-tiddlylink-shadow {
font-weight: normal;
}
div.sib-quick-tiddler-jump ul {
list-style-type: none;
margin: 0;
padding: 0;
}
/* Droppable placeholders take up no space until we drag something there. */
div.sib-quick-tiddler-jump ul li.tc-droppable div.tc-droppable-placeholder {
height: 0;
}
/* TW inserts this as a placeholder after the last item. We have to resize
it to match the rest. */
div.sib-quick-tiddler-jump ul > div.tc-droppable
div.tc-droppable-placeholder svg {
height: 0;
width: 1rem;
}
div.sib-quick-tiddler-jump .tc-dropzone.tc-dragover:before {
display: inline-block;
}
div.sib-quick-tiddler-jump ul > li.tc-droppable div,
div.sib-quick-tiddler-jump ul > div.tc-droppable div {
display: inline-block;
}
div.sib-quick-tiddler-jump .tc-droppable.tc-dragover >
.tc-droppable-placeholder {
display: inline-block;
background-color: green;
border: 0px;
width: 1rem;
height: 1rem;
margin-bottom: 0;
margin-top: 0;
padding-bottom: 0;
padding-top: 0;
}
div.sib-quick-tiddler-jump ul li, div.sib-quick-tiddler-jump ul >
div.tc-droppable {
display: inline-block;
}
.sib-quick-tiddler-jump ul li div:nth-child(2):after {
padding-left: 5px;
content: "·";
padding-right: 5px;
}
/* not last-child because there's a dropzone after it */
.sib-quick-tiddler-jump ul li:nth-last-child(2) div:after {
content: "";
}
On Sunday, June 27, 2021 at 4:11:05 AM UTC-5 saq.i...@gmail.com wrote:
> Inspect the dropzone DOM node with the browser dev tools and add the class
> "tc.dragover". This will allow you see what CSS is active during the drag
> over and make it easier to arrive at a solution.
>
> On Sunday, June 27, 2021 at 1:18:07 AM UTC+2 Soren Bjornstad wrote:
>
>> I'm creating a horizontal list of my open tiddlers that runs across the
>> top of the wiki, like this:
>>
>> [image: Screenshot from 2021-06-26 18-13-01.png]
>>
>> It's based on *list-links-draggable* and works great except for when I
>> try to drag something to a different position. When I try, the bar scrolls
>> to fit the dropzone on a separate line, so that I can no longer see where
>> I'm moving the tiddler to:
>>
>> [image: 2.png]
>>
>> I tried poking through the theme CSS for a bit, but wasn't able to find
>> anything that worked. It doesn't help that it's impossible to carefully
>> inspect the DOM with the browser devtools since the mouse is tied up with
>> the drag. Can someone point me to how I'd make the dropzone end up
>> horizontally inline with the items, instead of above/below them?
>>
>> Here's the code of the tiddler/CSS that I currently have:
>>
>> <div class="sib-quick-tiddler-jump">
>> <<list-links-draggable "$:/StoryList">>
>> </div>
>>
>> <style>
>> div.sib-quick-tiddler-jump {
>> background-color: <<color menubar-background>>;
>> position: fixed;
>> z-index: 850;
>> display: inline-block;
>> top: 0;
>> right: 0;
>> left: 0;
>> text-align: center;
>> height: 25px;
>> overflow: auto;
>> border-bottom: 1px solid <<color muted-foreground>>;
>> padding-bottom: 3px;
>> padding-top: 3px;
>> font-size: 12px;
>> }
>>
>> div.sib-quick-tiddler-jump a {
>> color: <<color menubar-foreground>>;
>> }
>>
>> div.sib-quick-tiddler-jump a.tc-tiddlylink-shadow {
>> font-weight: normal;
>> }
>>
>> div.sib-quick-tiddler-jump .tc-dropzone.tc-dragover:before {
>> display: block;
>> position: relative;
>> top: 0;
>> left: 0;
>> right: 0;
>> }
>>
>> div.sib-quick-tiddler-jump ul {
>> list-style-type: none;
>> margin: 0;
>> padding: 0;
>> }
>>
>> div.sib-quick-tiddler-jump ul li {
>> display: inline-block;
>> }
>>
>> .sib-quick-tiddler-jump ul li div:after {
>> padding-left: 5px;
>> content: "·";
>> padding-right: 5px;
>> }
>>
>> /* not last-child because there's a dropzone after it */
>> .sib-quick-tiddler-jump ul li:nth-last-child(2) div:after {
>> content: "";
>> }
>> </style>
>>
>
--
You received this message because you are subscribed to the Google Groups
"TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to tiddlywiki+unsubscr...@googlegroups.com.
To view this discussion on the web visit
https://groups.google.com/d/msgid/tiddlywiki/ae8ce4e3-9c9f-434b-af3f-83f138db7065n%40googlegroups.com.
