wish i could try this on your code to see if it works first, but have you
tried
div.sib-quick-tiddler-jump .tc-dropzone.tc-dragover:before {
display: inline-block;
instead of display: block; ?
sorry am on ios mobile so using google groups is difficult for me, sorry
for short message
alternatively linonetwo seems to use flex for something similar in
https://onetwo.ren/wiki/#%24%3A%2Fplugins%2Flinonetwo%2Fopened-tiddlers-bar%2Fstyle.css:%24%3A%2Fplugins%2Flinonetwo%2Fopened-tiddlers-bar%2Fstyle.css%20%24%3A%2Fplugins%2Flinonetwo%2Fopened-tiddlers-bar%20%24%3A%2FAdvancedSearch%20tiddlywiki%20Index
warmest wishes, maki
On Sunday, June 27, 2021 at 12:18:07 AM UTC+1 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/4157b14e-dca0-497f-b155-f9f3d91c1384n%40googlegroups.com.
