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)?