jquery / jquery/jquery-ui

UI Dialog inside non-visible iFrame opens alternatingly with width=0

Open
#2,176 8 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Behavior shared with 1.12 Comp: Dialog
Dominant language
JavaScript
Stars
11.3k
Forks
5.2k
PR merge metrics
No merged PRs in 30d

Description

It appears if you open a dialog on a page that's inside a now-visble iFrame, where the iFrame wasn't initially visible (display: none or a parent with display: none), the width of the dialog box will alternatingly be set to zero regardless of the width or minWidth options. To be clear, the first time the dialog is opened, the width is correct. If the dialog is closed (e.g. $(this).dialog("close")) and then re-opened (e.g. $(this).dialog("open")), the width will be set to zero. If it's closed/re-opened again, it's correct. And again, it's zero. Etc. In my case, the dialog is modal: true and resizable: false. I've test other configurations but I don't necessarily have access to the code used on the page inside the iFrame.

I dug through the widgets/dialog,js code a bit and I can't seem to find the culprit, except maybe _blockFrames, which sets the width based on the width of iFrames inside the dialog's HTML (my subpage has a couple but they're always display:none so not sure why this hasn't cropped up until now AND I've tried removing them but that didn't help). _blockFrames is called by _makeDraggable and _makeResizeable. Both of those options are false in my configuration so they shouldn't be getting called.

The workaround so far is to force the iFrame to reload once it's visible.

EDIT by @mgol: Fixed code formatting

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start in widgets/dialog.js and reproduce the alternating zero-width behavior with a dialog inside an initially hidden iframe. Trace the reopen path and the mentioned _blockFrames, _makeDraggable, and _makeResizeable entry points; done means repeated close/open cycles preserve the configured width once the iframe is visible.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, jquery
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.