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

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>
1 Like

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?

1 Like

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'"/>

1 Like