Custom UI Customfield render on Issue Create does not resize

Forge Forge UI Kit and Custom UI
,
1

Hello! I am trying to resize the iframe within which my Custom UI resource is rendered on Issue Create.

I have set all of the sizes in the index.html file to be in pixels, however the size is stuck at 16px:

Screenshot 2024-08-27 at 13.46.13
Screenshot 2024-08-27 at 13.46.13823×354 15.8 KB

Adding viewportSize property does not help either, this is the maximum height I get with that:

Screenshot 2024-08-27 at 13.44.53
Screenshot 2024-08-27 at 13.44.53833×423 19.6 KB

Am I missing something obvious? Is this a bug? I have looked through the documentation but I don’t see anything additional that I could put there.

Relevant Manifest file excerpt:

modules:
  jira:customFieldType:
    - key: rich-tables-for-jira
      name: Rich Tables for Jira
      description: Rich Tables for Jira Cloud
      type: object
      formatter:
        expression: "formatter expression"
        export: true
      resource: main
      render: native
      viewportSize: xlarge
      edit:
        resource: grid_ui
      contextConfig:
        resource: grid_ui
      resolver:
        function: functionResolver
  function:
    - key: functionResolver
      handler: resolver.handler
resources:
  - key: main
    path: src/index.jsx
  - key: grid_ui
    path: grid_ui/dist
  - key: admin_ui
    path: admin_ui/dist

index.html in full:

<!DOCTYPE html>
<html lang="en" style="height: 1000px">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>RTFJ</title>
</head>
<body style="height: 1000px; display: contents;">
    <div id="root"  style="height: 1000px; width: 100%; margin: 0;"></div>
    <script type="module" src="./src/index.jsx"></script>
</body>
</html>

index.jsx in full:

import ReactDOM from 'react-dom';
import App from './App';

const container = document.getElementById('root');

// create a root
const root = ReactDOM.createRoot(container);

//render app to root
root.render(<App/>);

Would really appreciate some help, I’ve been stuck on this for a while

2

Update: Resolved by adding a div with explicit height in px to the actual element that is rendered within the ROOT.

So the changes in index.html or index.js were being ignored but changes in the main UI of the app were respected on resize as long as the top div is set in px.

Illustrative example of App.jsx that is called from index.jsx on root.render():

return <div style={{ height:"600px", width:"100%" }}>
                        <FieldEditMode appData={appData} appConfig={appConfig}/>
       </div>

Very simple after all, unsure why the documentation calls for setting the height on the root element.

1 Like