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-moda...

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

 

[NHannig]

Thanks for your reply. I found adding the following css to my local css file solved the issue. But the ExB/JimuUi team will need to fix their CSS.

.modal {
  overflow-y: auto;
}

.modal-open .modal {
  overflow-y: auto;
}

.modal-dialog-scrollable {
  height: calc(100% - 3.5rem);
}

.modal-dialog-scrollable .modal-content {
  max-height: 100%;
  overflow: hidden;
}

.modal-dialog-scrollable .modal-body {
  overflow-y: auto;
}

[KenBuja]

If my response answered your question, please click the "Accept as Solution" button

Also, try using the CSS utility classes with Bootstrap's Overflow

className="overflow-auto"