axa-ch-webhub-cloud / pattern-library

AXA CH UI component library. Please share, comment, create issues and work with us!
https://axa-ch-webhub-cloud.github.io/plib-feature/develop
125 stars 18 forks source link

axa-modal: allow content scrollable #2422

Open MarekLacoAXA opened 1 year ago

MarekLacoAXA commented 1 year ago

Hi! pls. allow the content of axa-modal to be scrollable, if content height exceeds the modal height.

(OR maybe better: expand the contents automatically to its full height)

Currently there is no scrollbar which confuses users when there's more content.

Thanks!


Here's a workaround I am using now in React to show vertical scrollbar.

/**
 * Within <axa-modal> makes content vertically scrollable
 */
export const ModalContentScrollable: React.FC<React.PropsWithChildren> = ({ children }) => {
  return (
    <div style={{ maxHeight: '100%', overflowY: 'auto', overflowX: 'hidden' }}>{children}</div>
  );