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 [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/tiddlywiki/ec86298b-8daa-4139-ad67-cfe6e62bc635n%40googlegroups.com.
