Modal overflow

[gyopak]

Modal overflow

Seems that Modal component has an overflow which trims overflowing components inside (eg. dropdown, tooltip)

What package(s) are you using?

• [X] carbon-components
• [X] carbon-components-react

Steps to reproduce the issue

1. Create a modal
2. Place an overflowing component (eg. dropdown) inside

CodeSandbox example

Additional information

opened (trimmed) dropbox inside the modal:

expected result:

[yrue]

I have similar issue, may I know the schedule of this fix?

[gyopak]

@yrue in the meantime you can manually overwrite these overflows. Check #6289 or #6290

[yrue]

Thanks @gyopak , but the fixes not work on my case. I changed the overflow: visible to bx--modal-container and overflow-y: visible to bx--modal-content but still not work as below

Would it possible to add a props like menuPortalTarget of react-select (ref)to attach the menu to specific element?

[ConradSchmidt]

Hi @gyopak, I'm working on IBM Watson Knowledge Catalog and we are facing the same issue of dropdowns are truncated by the modal. The solution you provide (https://github.com/carbon-design-system/carbon/issues/6288#issuecomment-679847181) is working for small modals, where the actual content is not bigger than the modal. This is not always the case (on small screens or huge modals) as you can see in this example (I used your PRs and just duplicated the paragraphs): Here is the modal working for small content:

A smart workaround our DEV team did is adding a margin-bottom to the modal content to show 3 dropdown entries.

A solution to this would be, as @yrue already addressed, is to provide a property on dropdowns/overflow menu to attach the menu list to a different element (outside modal content) so it can't be truncated by the modal. I know this can be an accessibility issue, but this can be solved by keeping the normal menu and just disable/hide it. I used this solution a lot within the primeNg framework - they provide a property called "appendTo" - maybe you can get some inspiration from their solution.

[Yohanna]

I'm having the exact same issue with Dropdowns, but with ComposedModal.

Here's a repro of the problem: https://codesandbox.io/s/carbon-modal-dropdown-bug-ctbgc

See gif below:

[mateBe95]

@kevinsperrine when it will be fixed?

[kevinsperrine]

@mateBe95 I'm not on the Carbon team, so I don't know. There are numerous outstanding issues related to this, but no prognosis or timeline yet. See:

https://github.com/carbon-design-system/carbon/issues/7565#issuecomment-786921600

[OmranAbazid]

I have a workaround that i use for the ComposedModal react component.

I basically have a classname (overflowVisible) that I enable when my modal has a dropdown or something the needs to overflow. I then apply the following styles:

.Modal.overflowVisible {
    overflow-y: auto;

    .cds--modal-container,
    .cds--modal-content {
      overflow: visible;
    }

    .cds--modal-container {
      max-height: max-content;
      height: max-content;
      margin: auto;
    }
  }

Beware that this workaround will make prevent scrolling inside the modal content. If the modal height is too big, the outer shell of the modal will become scrollable.

[marcellobarile]

@OmranAbazid thanks for the workaround; too bad that this bug has been here since 2020.

[tay1orjones]

Hey just wanted to mention this is part of a systemic issue with popovers and floating elements that we hope to fully address with https://github.com/carbon-design-system/carbon/issues/14139. I know it doesn't fix the issue for you now, but we hope to have a solid solution for this soon. Thanks for your patience and +1 for that workaround!