Open MarekLacoAXA opened 1 year ago
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}/> ); };
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: