Hi,
I am playing around with Jira Cloud and forge bridge modals.
As you can see from the screenshot, the content does not get adjusted to the size of modal.
My component is very basic and has for both the div and the stack the height set to 100%.
<div
style={{
height: '100%',
}}
>
<Stack
xcss={xcss({
height: '100%',
padding: 'space.300',
})}
space="space.300"
spread="space-between"
>
<div>
<FormHeader title="Bla">
<p aria-hidden="true">
Required fields are marked with an asterisk <RequiredAsterisk />
</p>
</FormHeader>
</div>
<FormFooter>
<ButtonGroup label="Form submit options">
<Button appearance="subtle" onClick={handleClose} isDisabled={true}>
Cancel
</Button>
<Button type="submit" appearance="primary">
Do something useful
</Button>
</ButtonGroup>
</FormFooter>
</Stack>
</div>
I did some digging, and it looks like I ran into a bug that was fixed for Jira issue panels (see Jira), however, I am opening this modal from my app and not from an issue panel.
Is this a bug, do I use it wrong, or is it something else? I could set the height of the outer div to something like ‘700px’ but that just feels wrong - but it works.
Best regards,
Christopher
1 Like
I have the exact same problem.
Calling the forge/bridge Modal from jiraServiceManagement:portalRequestDetailPanel
@AdamMoore
@MichalJazwinski
Looks like we were able to fix this by adjusting the style for the root node above my component.
For me that means that I am wrapping my Modal component into a container and importing a style
html {
height: 100% !important;
}
body,#root {
min-height: 100%;
height: 100%;
}
@media (prefers-color-scheme: dark) {
body {
background: #1D2125;
}
}
or you could set a style in the body in your index.html for your modal component.
I hope this helps,
Best regards,
Christopher
@MichalJazwinski maybe https://jira.atlassian.com/browse/ECO-792 is also interesting for your. This FR is about making Forge Modals resize automatically to the content.
thanks @chrschommer I’ll give it a go
Unortunately in my case it does not help
I tried with your simple component @chrschommer
return (
<div
style={{
height: '100%',
}}
>
<Stack
xcss={xcss({
height: '100%',
padding: 'space.300',
})}
space="space.300"
spread="space-between"
>
<div>
<FormHeader title="Bla">
<p aria-hidden="true">
Required fields are marked with an asterisk
</p>
</FormHeader>
</div>
<FormFooter>
<Button appearance="subtle" isDisabled={true}>
Cancel
</Button>
<Button type="submit" appearance="primary">
Do something useful
</Button>
</FormFooter>
</Stack>
</div>
)
and set the style in the index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>React App</title>
<style>
html {
height: 100% !important;
}
body,#root {
min-height: 100%;
height: 100%;
}
/* Force content to take up space */
form {
display: inline-block;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
and I open the modal like this
const openAddCommentModal = () => {
new Modal({
resource: 'addCommentModal',
onClose: async (payload) => {
console.log('Modal closed:', payload);
},
size: 'medium',
context: {
issueKey: incident.key
}
}).open();
};
Could You please provide your working example?
I will do it next week. For our app, we are using reforge @resolution/reforge - npm that makes the process a little different (e.g. this generates the index.html for us), but I have the example code that I sent to Atlassian, thus I can modify this.
If I have not answered by Friday next week, please ping me on this thread. I will add a calendar reminder for me, but you never know 
@MichalJazwinski
So I did it. It turned out, I had to do other things, the answer in the Atlassian ticket was not helping, it was what my colleague helped me with. I am sorry that my first post is a bit wrong.
So first a proof screenshot
What I needed to do was the following, I will also provide the full source code after the explanations:
in static/modal-v1 , I created a folder containers/App/ with two files. :
html {
height: 100% !important;
}
body,#root {
min-height: 100%;
height: 100%;
}
@media (prefers-color-scheme: dark) {
body {
background: #1D2125;
}
}
import './style.css';
export function App({ children }) {
return (
<>
{children}
</>
);
}
Then I use the App component to wrap my modal, see modal-v1.jsx
One other thing that I forgot was that I needed to add
permissions:
content:
styles:
- 'unsafe-inline'
to the manifest. Don’t forget to run forge install --upgrade afterwards.
For the full code, please see modal-test-app with-fix.zip (I am not allowed to add a zip in here, thus this goes to sharepoint).
I hope that helps, best regards
Christopher
