Styling modal with CSS for Forge Custom UI

Hello Forge Folks!
I am trying to open modal dialog with custom ui resolver through Issue Glance. Custom App works fine, but there are problem with modal style customation. Iframe contains extra box-shadow and non resizable height (~150px). Is there any options to force css styling on iframe or any other workaround?

Example:

Thank you in advance!

Hi @MateuszKorczyski,

I’m not sure I understand your request correctly. Please let me know if what I’m saying is accurate.

It sounds like you are trying to render a Modal inside of your Custom UI issue glance. If so, how are you doing this? Are you trying to render an Atlaskit modal dialog directly?

Could you please explain what you’re trying to achieve in more detail?

Hi @kchan
Thank you for your answer!
I created second customUI app and add it to my manifest

resources:
  - key: main
    path: static/mainapp/build
    tunnel:
      port: 3000
  - key: modaldialog
    path: static/modaldialog/build
    tunnel:
      port: 3001

And open the modal from mainapp:

import {Modal} from "@forge/bridge";


            const modal = new Modal({
                resource: 'modaldialog',
                onClose: (payload) => {
                    console.log('onClose called with', payload);
                },
                size: 'x-large'
            });
            modal.open();

First of all I tried to create @atlaskit/modal-dialog, but modal was created inside Issue Glance instead of full page.

It’s very important for me. If you have any questions or need further information, please feel free to contact me.

1 Like

Thanks for the additional info. I will do some investigation and get back to you.

2 Likes

Hi @kchan,
One more thing. This is how the Allow access button looks on modal. It’s barery clickable.

Did you manage to find out anything about the modal problem? This is core feature for my team, so we will keep our fingers crossed for solution :slight_smile:

Hai @MateuszKorczyski @kchan Me also waiting for the same. Hope jira team will fix it soon.

Hi @MateuszKorczyski @SuryaA,

Sorry for not getting back sooner. We’ve been able to reproduce the issue, and are working on a fix. We’ll let you know as soon as we release the fix.

4 Likes

Hi @MateuszKorczyski @SuryaA,

We’ve released a fix to production. Can you try again and let me know whether it solves the issues you’ve been having?

@MateuszKorczyski specifically regarding the Allow access button in the modal, if you are still experiencing this issue, could you please provide more detail on how exactly to reproduce that?

1 Like

Hi @kchan,
Thank you so much for this fix!

When I install app by forge install on the new site both custom ui modules issue glance resource and modal needs to allow access (developement stage).
Currently the modal looks much better.

My manifest.yml without sensible data looks like this:

  jira:issueGlance:
    - key: my-app-issue-glance
      resource: main
      resolver:
        function: resolver
      title: My App
      description: My App Glance view.
      label: Open My App
resources:
  - key: main
    path: static/app/build
    tunnel:
      port: 3000
permissions:
  scopes:
    - read:jira-user
    - read:jira-work
    - write:jira-work
    - storage:app
    - report:personal-data
  content:
    styles:
      - 'unsafe-inline'
    scripts:
      - 'unsafe-inline'
  external:
    images:
      - '*.wp.com'
      - '*.atlassian.net'

When I tried to open modal with size: ‘x-large’ there is error.

Size medium or large works fine.

Thank you very much for your help. I would have one more question, is there any chance in the future that the modal size can be set more precisely? For example giving width: 50vh, height: 30vh.

@MateuszKorczyski

When I tried to open modal with size: ‘x-large’ there is error.

According to the docs, you need to use ‘xlarge’ instead of ‘x-large’.

is there any chance in the future that the modal size can be set more precisely? For example giving width: 50vh, height: 30vh.

We don’t have plans to enable that at the moment, but we’re open to suggestions! Could you describe why you want that to be possible (i.e. why that would bring you value over what is currently available)?

Hi @kchan,

We don’t have plans to enable that at the moment, but we’re open to suggestions! Could you describe why you want that to be possible (i.e. why that would bring you value over what is currently available)?

Finally, I prepared my modal to fixed height, so provided solution worked well. But unfortunately the bug with the modal window height being too low returned on Jira Cloud this week.

size: ‘xlarge’ (height: 334px)

size: ‘small’ (height: 334px)

Could you please help me with this issue?

Thank you in advance,
Mateusz

6 Likes

For what it’s worth, I can confirm my app is having the same issue with custom modal heights as reported by @MateuszKorczyski. The issue appeared late yesterday (Aug 30) or early today (Aug 31), depending on your time zone. I was actively working with modals all day yesterday, and they were for sure working as expected earlier in the day.

3 Likes

Hey @MateuszKorczyski @AaronMorris1,

We are aware of the dynamic modal size bug in Jira and we are working towards a fix.

2 Likes

Thanks @kchan for the quick response on this topic.
I would appreciate hearing from you when the problem is fixed.

Keeping my fingers crossed!

@MateuszKorczyski @AaronMorris1, this should be fixed now. Can you please try again and let me know if you’re still experiencing the issue?

2 Likes

Hi @kchan

We are experiencing changes to how a projectPage module iframe is being sized.

Could this be related to the changes released today?

Hi @kchan,
it works like a charm. Thank you so much!

Yes, the fix is working. Thanks for the super fast resolution!

Hi @kchan

Just trying to clarify, what change was made to Forge yesterday?

I do not see any details on the changelog yet at the top of that page I see ‘This changelog is the source of truth for all changes to the Forge platform that affect people developing Forge apps.’ (my emphasis).

I ask as we, Easy Agile, appear to have been impacted by the change made yesterday.

Thank you,
Nick Muldoon, Easy Agile

This still seems to be a problem for me. But by changing height from 100% to 100vh in class css-1kjr904 in the developer console, the modal height changes, can you please look into it?

1 Like