Jimu-UI Modal doesn't allow scrolling of contents

NHannig

Trying to add a Modal with a large amount of content. When opening the Modal the content goes of the screen and I am unable to scroll to view the content off the screen.

This issue can be tested and confirmed in the Jimu-UI Storybook.

https://developers.arcgis.com/experience-builder/storybook/?path=/docs/components-jimu-ui-index-modal--docs

The scrollable property also does not work.

I think the issue is that the needed CSS related to Modal scrolling is not being added into the HTML document.

This issue also impacts Experience Builder.

 

kenbuja

I use a modal window in my widget and it is scrollable. The window uses a component from a third-party library to build this editable table and uses a CSS file to provide its styling.

This is the code in the tsx file

  return (
    <Modal
      isOpen={modalVisible}
      //className="bg-default w-75 d-flex justify-content-between"
      className="bg-default w-100 d-flex "
    >
      <ModalHeader closeIcon={<CloseOutlined />} toggle={toggleModal}>
        {title}
      </ModalHeader>
      <ModalBody className="w-100">
        <article className="table-container">
          <table>
            <thead>
// etc...

and this is the css file with the overflow property

.table-container {
  display: flex;
  justify-content: center;
  height: 500px;
  overflow: scroll;
}

 resulting in this table with the scrollable content