Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

axa-modal: allow height configurable #2421

Open
MarekLacoAXA opened this issue Mar 10, 2023 · 0 comments
Open

axa-modal: allow height configurable #2421

MarekLacoAXA opened this issue Mar 10, 2023 · 0 comments

Comments

@MarekLacoAXA
Copy link
Contributor

MarekLacoAXA commented Mar 10, 2023

Hi! pls. allow the height of axa-modal content to be user-configurable.

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

Currently it is hardcoded to 70% which isn't enough sometimes:
https://github.com/axa-ch-webhub-cloud/pattern-library/blob/develop/src/components/30-organisms/modal/index.scss#L119

Thanks.


Here's a workaround I am using now in React to expand Modal's height:

import * as React from 'react';

/**
 * Within <axa-modal> adjusts its height
 */
export const ModalHeight: React.FC<{ height?: string }> = ({ height = '90vh' }) => {
  const nodeRef = React.useRef<HTMLElement | null>(null);
  React.useEffect(
    () => {
      const update = () => {
        const modalContent = nodeRef.current?.closest('axa-modal')?.shadowRoot?.querySelector('.o-modal__content');
        if (modalContent) {
          (modalContent as HTMLElement).style.maxHeight = height;
        }
      };
      window.setTimeout(update, 0); // defer to next tick to allow modal content creation
    },
    [],
  );
  return (
    <span ref={nodeRef}/>
  );
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

1 participant