[Bug]: Carbon for IBM Products: Datagrid - When "Row settings" is selected as medium or small and left open, when the screen is resized, the last options are not visible

[PinceGitHub]

Package

Carbon for IBM Products

Description

When "Row settings" is selected as medium or small and left open, when the screen is resized, the last options are not visible.

Stackblitz: https://stackblitz.com/edit/github-uzudxy?file=src%2FApp.jsx,package.json

Screenshot:

Recording https://github.com/user-attachments/assets/9040d8a1-4785-4443-b24b-1b330c58bb8f

Component(s) impacted

Stackblitz: https://stackblitz.com/edit/github-uzudxy?file=src%2FApp.jsx,package.json

Screenshot:

Recording https://github.com/user-attachments/assets/9040d8a1-4785-4443-b24b-1b330c58bb8f

Browser

Chrome, Firefox, Microsoft Edge

@carbon/ibm-products (previously @carbon/ibm-cloud-cognitive) version

"@carbon/ibm-products": "^2.45.0"

Suggested Severity

Severity 3 = The problem is visible or noticeable to users but does not impede the usability or functionality. Affects minor functionality, has a workaround.

Product/offering

IBM FTM

CodeSandbox or Stackblitz example

https://stackblitz.com/edit/github-uzudxy?file=src%2FApp.jsx,package.json

Steps to reproduce the issue (if applicable)

No response

Release date (if applicable)

No response

Code of Conduct

• [X] I agree to follow this project's Code of Conduct
• [X] I checked the current issues for duplicate issues

[jakubkloc]

Can you estimate when this issue will be resolved?

[amal-k-joy]

Hi @jakubkloc , This is an expected behaviour of Carbon modals when scrollHeight > clientHeight . This happens when you resize while keeping the Row settings popover open and the height of the container is too low. Could you tackle this by setting a minimum height for your container or resize after closing the Row settings popover ?

[github-actions[bot]]

This issue is stale because it has been open for 7 days with no activity. Remove the stale label or add a comment, otherwise this issue will be closed in 7 days.

[jakubkloc]

Thanks for response @amal-k-joy, We can't assume that users always closing Row setting before resizing also better to avoid interference with default modals sizing behavior (this could disturb the layout of the entire page).

I think the best solution would be to add to this component, property like autoAlign in Combo Box from carbon, to display this Row settings menu over the container.

[github-actions[bot]]

This issue is stale because it has been open for 7 days with no activity. Remove the stale label or add a comment, otherwise this issue will be closed in 7 days.

[amal-k-joy]

Thanks for response @amal-k-joy, We can't assume that users always closing Row setting before resizing also better to avoid interference with default modals sizing behavior (this could disturb the layout of the entire page).

I think the best solution would be to add to this component, property like autoAlign in Combo Box from carbon, to display this Row settings menu over the container.

Hi @jakubkloc , Here we are using carbon popovers. I think autoAlign feature is still under expirimental from carbon. We have this issue to track this.

[PinceGitHub]

@amal-k-joy Could you please confirm your proposed solution? Providing a minimum height to the modal is not a good idea because it will affect the layout. I look forward to hearing from you.

[matthewgallo]

I agree, using autoAlign on the popover should allow the menu to not be cut off. We can try to put together an example for you to look at.

[amal-k-joy]

I agree, using autoAlign on the popover should allow the menu to not be cut off. We can try to put together an example for you to look at. Hi @matthewgallo , Looks like carbon has addressed the issues in autoAlign for popovers in latest version(1.68.0). So we can fix this issue by exposing 'autoAlign' for this popover in Datagrid.

[PinceGitHub]

@amal-k-joy Could you help confirm which version of Carbon for IBM Products I should use in order to receive this fix?