Repository navigation
Large unexplained gap above elements + hover toolbar floats away from its element #11
Description
Opened a doc with a heading, a paragraph, and a code/richtext block. There's a large blank gap between the paragraph and the block below it that doesn't look intentional, and the hover action toolbar (move up/down, duplicate, delete) renders detached in that gap rather than hugging the top-right corner of the element it belongs to.
.jdf-action-bar is just top: -28px off the element wrapper (apps/reader/src/styles/global.css:248) and the wrapper's own top comes straight from unitToPx(element.position.y) (apps/reader/src/components/viewer/ElementRenderer.tsx), so a 28px gap is expected — the gap in this case is much larger than that, and the toolbar sits well above the box it's attached to. That points at the element's rendered top not matching its wrapper's absolute position — i.e. the wrapper div is positioned correctly, but the visible content of whatever's inside (richtext? has leading empty lines?) starts lower than the wrapper's top edge.
I don't have a minimal repro doc for this one yet, so I can't pin the exact element type/content that triggers it — screenshot available if useful. Filing this now so it's tracked; happy to attach the source .jdf if someone points me at which example reproduces it, or if it's already visible on one of the spec/examples/ or docs/examples/ files.
Activity
uurtech commentedon Sep 27, 2026
Thanks for the detailed report. To pin this down we need the document that shows it: could you attach the
.jdf(or.jdfx) file from your screenshot, plus the screenshot itself? If the file is private, a reduced copy that still reproduces the gap (the heading, the paragraph and the block below it) is enough.Things that would help us reproduce quickly:
About/ cask version) and whether the file was converted from a PDF withjdf convertor hand-written;Our current guess matches yours: the wrapper sits at
position.y, but the element's content starts lower (leading\nin a richtext/text, or a largestyle.lineHeight), so the action bar hugs the wrapper, not the visible text. The file will confirm which one.DenizSAHIN570 commentedon Oct 6, 2026
I wasn't able to open the file on jdf.dev because I couldn't find the online opener section, but the file is the default docs/examples/article.jdf.
It looks like the gaps are authored in article.jdf itself: elements are absolutely positioned and the reader honors position.y. The slots after paragraphs are much larger than the rendered text. For example, the "What if a document…" paragraph is at y=146mm and the JSON block at y=195mm, but the paragraph renders about 75px tall, leaving about 110px empty. Other gaps after paragraphs are about 92–104px, while heading → paragraph gaps are about 20px.
So I misunderstood the issue, and editing just the file should be enough. The hover toolbar is positioned as coded (28px above the element), so it only looks detached because of the empty space above the block.
In any case I edited the example doc with #17
docs: tighten article.jdf example spacing