Skip to content

Fix variables form dialog resize glitch for templates with many variables - #179

Open
PriyankaaXD wants to merge 1 commit into
joplin:masterfrom
PriyankaaXD:fix/variables-form-dialog-sizing
Open

PriyankaaXD wants to merge 1 commit into
joplin:masterfrom
PriyankaaXD:fix/variables-form-dialog-sizing

Conversation

@PriyankaaXD

@PriyankaaXD PriyankaaXD commented Sep 16, 2026 •

Copy link
Copy Markdown

Closes #59

Problem

As reported by @amandamcg in the discussion on #59, the fix in 0aa28b4 (max-height + overflow scroll on .variablesForm) didn't fully solve the issue — the dialog would open short, grow, then slowly contract, instead of opening at a stable size. This happens because the dialog was left at Joplin's default setFitToContent: true, so the core app auto-resizes the iframe to content height dynamically, which races against the plugin's own CSS max-height constraint.

Fix

Explicitly call joplin.views.dialogs.setFitToContent(this.dialog, ...) on every dialog open, based on the current template's variable count — true (compact, auto-sized) for 5 or fewer variables, false (fixed 90vw x 80vh, scrollable) for more than 5.

Note: this must be set explicitly every time, not only conditionally disabled, because the dialog handle (dialogViewHandle) is created once in index.ts and reused across every template use. An earlier version of this fix only called setFitToContent(false) when variable count was high, which caused the false state to leak into the next dialog use even when that template had few variables. Setting it explicitly on every open avoids this.

Testing

Tested manually on Windows, across multiple orderings in the same session:

  • Template with 3 variables (text fields) — dialog opens compact/auto-sized.
  • Template with 18 variables (mix of text, dropdown, date, number, time, boolean) — dialog opens at a stable size immediately, no grow/shrink glitch, all fields reachable via scroll.
  • Confirmed both cases work correctly regardless of which was opened first in the session (this was the actual bug in an earlier version of this fix).

Screenshots below show both cases.

[ test2 - 3 variables, compact dialog]
[Test Template - Many Vars - 18 variables, stable scrollable dialog]
Screenshot 2026-09-16 192137
Screenshot 2026-09-16 191304

Fixes the variables form dialog resize glitch reported in joplin#59.

The dialog previously relied on Joplin's default auto-resize-to-content
behavior (setFitToContent: true), which raced with the form's own
max-height/overflow CSS and caused a visible grow-then-shrink glitch
when many variables were present.

Since the dialog handle is created once and reused across template
uses, fit-to-content must be explicitly set on every open rather than
only conditionally disabled - otherwise the mode from a previous
template's dialog use would leak into the next one regardless of its
own variable count.

Now setFitToContent is explicitly set every time based on the current
template's variable count: true (compact, auto-sized) for 5 or fewer
variables, false (fixed 90vw x 80vh, scrollable) for more than 5.
@PriyankaaXD

Copy link
Copy Markdown
Author

Happy to make any changes if you'd like a different threshold or approach.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Issue with variables form height

1 participant