ModalDialog with Form: buttons "submit" and "cancel" are not correct aligned and in different lines

[frank]

Using the code below, the submit and the cancel buttons are not lined on the right: the submit is displayed on the left side and the cancel on is aligned right but in the next line (after a line-break):

<ModalDialog header="My modal dialog" onClose={() => setOpen(false)}>
  <Form
    onSubmit={data => {
      setSize(data.size);
      setOpen(false);
    }}
  >
    <Select label="T-shirt size" name="size">
      <Option label="Small" value="small" />
      <Option label="Medium" value="medium" />
      <Option label="Large" value="large" />
    </Select>
  </Form>
</ModalDialog>

[bentley]

I’ve not been able to reproduce this issue. Here is a screenshot of what I’m seeing:

And here is the full content of my index.jsx:

import ForgeUI, { render, Select, Option, Form, ContentAction, ModalDialog, useState } from '@forge/ui';

const App = () => {
  const [isOpen, setOpen] = useState(true);

  if (!isOpen) {
    return null;
  }

  return (
    <ModalDialog header="My modal dialog" onClose={() => setOpen(false)}>
  <Form
    onSubmit={data => {
      setSize(data.size);
      setOpen(false);
    }}
  >
    <Select label="T-shirt size" name="size">
      <Option label="Small" value="small" />
      <Option label="Medium" value="medium" />
      <Option label="Large" value="large" />
    </Select>
  </Form>
</ModalDialog>
  );
};

export const run = render(
  <ContentAction>
    <App/>
  </ContentAction>
);

What module are you opening the modal from?

[frank]

I have found the problem: I had to add the following code snippet into my index.html to get the proper CSS styles and look & feel …

    <!-- necessary to allow inline-styles of AtlasKit components, which will not be rendered properly if omitted -->
    <meta http-equiv="Content-Security-Policy" content="style-src 'unsafe-inline' 'self'"/>

[tied]

Hi @bentley,

I run into the same issue. I try to build a Form within an IssueAction.

import ForgeUI, { 
  render,
  useProductContext,
  Text,
  IssueAction,
  ModalDialog,
  Form,
  Select, 
  Option,
  useState } from '@forge/ui';

const AppDialog = () => {
  const [isOpen, setOpen] = useState(true);
  
  const context = useProductContext();
  const platformContext = context.platformContext;

  if (!isOpen) {
    return null;
  }

  return (
    <ModalDialog header="App Dialog" onClose={() => setOpen(false)}>
      <Text>Issue Key: {platformContext.issueKey}</Text>
      <Form
        onSubmit={data => {
          setSize(data.size);
          setOpen(false);
        }}
      >
        <Select label="T-shirt size" name="size">
          <Option label="Small" value="small" />
          <Option label="Medium" value="medium" />
          <Option label="Large" value="large" />
        </Select>
      </Form>
    </ModalDialog>
  );
};

export const run = render(
  <IssueAction>
    <AppDialog/>
  </IssueAction>
);

Kind Regards,
Tim