Skip to content

axa-modal: allow height configurable #2421

@MarekLacoAXA

Description

@MarekLacoAXA

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}/>
  );
};

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions