I have an issueAction panel in my app that is created with CustomUI. The module is designated with viewportSize: xlarge in the manifest. This dialog used to render full size and stay full sized regardless of activity in the dialog. However recently I’ve noticed it seems to be dynamically sizing down to the size of the initially rendered content. The content rendered in this UI varies based on selections within the page but after the initial render the size of the dialog is not changing to match whats being rendered. Can I prevent the resizing?
As a work around, I tried removing the viewportSize attribute on the issueAction module to let it dynamically resize. That looked as though it might work as the window expanded when I opened the Select control however the content did not render properly and the select contents was clipped.
I’ve attached some images showing this. The first two images are for xlarge viewport that show the dialog sized to initial content and how the content is clipped when the Select drop down is opened.
The last two images show what happens when I remove the viewport option. You can see the dialog is sized differently, and that it does change when the Select is opened, however the content is still clipped.
Any thoughts on what I might be doing wrong or how to resolve?
Thanks,
Jeff Ryan
1 Like
@kchan or @PeterYu do you have any thoughts on this issue? I’m using a xlarge viewport setting and it is getting resized vertically to ~150px and won’t grow even if the content changes to require it. This seems related to the dynamic viewport work done recently that was mentioned
here and here
I found that defining height on the iFrame to 100vh from the chrome developer console as suggested here by @VarunRamnani seemed to show the entire modal. Is there a recommended approach to resolve this?
@vpetrychuk I encounter similar sizing problems when using a custom UI for our custom field configuration UI. For example the select content rendered here is being clipped to the initial size of the iframe.
Yeah Atlaskit’s Select doesn’t work really well with auto-resizing, a workaround would be setting a fixed height that is tall enough or using the browser’s native <select> 
1 Like
Thanks @Abdessamad - setting a fixed height does work for the case where I do not set a viewport size. When the viewport size is set to xlarge setting the height has no effect.
In the end, dynamic sizing is what we’re after anyway because we’re dynamically generating the content of the view. Hopefully the Atlaskit Select sizing issues are addressed as it’s a much more flexible component. I assume I’d have the same issue using react’s Select component since thats what the Atlaskit component is based on?
Actually, based on my personal experience Forge handles the size property differently for modules and modals:
For example, in a jira:issuePanel module:
-
With a viewportSize property: disables automatic resizing and sets a fixed height based on this property.
-
Without a viewportSize property: enables automatic resizing.
In modals though:
-
With a size property: enables automatic resizing and sets the modal’s width based on this property.
-
Without a size property: enables automatic resizing and the modal’s width defaults to medium.
Just clarifying since I’m not sure if you’re having the issue with your modals or the panel: Forge always enables automatic resizing for modals, it was a breaking change that was released on September 2 and there is no way to disable that behaviour.
And yeah AtlasKit relies on react-select.com and I don’t think switching to React Select would help unfortunately.
1 Like
It may be less consistent than that. For example the modal I hit this problem with was an IssueAction dialog and setting a viewport size property definitely resulted in a fixed height.
1 Like
Oh wow. Hoping someone from Atlassian would look into this.
Hey folks,
Just letting you know we are working on the fix.
UPD: Everything should be back to normal.
Thanks,
Vitalii
1 Like
Hi @vpetrychuk , I just finally got around to trying this. The xlarge viewport is working again now. Thanks!
I noticed that dynamic sizing still has some issues though if I don’t have a vertical height set. What I mean by that is the window doesn’t grow to contain additional items as they are dynamically added to the page.
Did you able to get “auto sizing” to work? I’m trying this with “Jira Action Module” which displays a custom ui inside it and “auto sizing” doesn’t work at all. It always displays a square dialog according to given viewportSize property in manifest.yml file. Without “viewportSize”, it only displays a small/medium square dialog. I have even created a simple empty app that just sets content’s height with style element and it doesn’t work. No matter what I do, dialog is always a square.
Unfortunately I don’t have a work-around for you @denizoguz . We went away from an auto-generated page to something more static and we are no longer using the IssueAction panel. Based on your description it sounds like the same problem though 
1 Like
I am still experiencing that auto resizing is not available in Forge Custom UI. @AtlassianDeveloper can you please look into this?
