Set modal as full screen

With this component I need to set modal as full screen.

import React, { useState, useCallback, useMemo, useEffect } from 'react';
import { Modal, Col, Row } from 'antd';
export const MapperCardModal: React.FC<MapperCardModalProps> = ({ isOpen, onCancel, onAccept, comparisonType, record }) => {
    return (
        <Modal
            centered
            open={isOpen}
            onOk={onOk}
            onCancel={onCancel}
            okButtonProps={{ disabled: isDisabled }}
            className="mapper-modal"
            style={{ maxWidth: '90vw !important' }}
            title={translate('pages.comparisons.modal.title')}
        >
            <Row
                gutter={[12, 12]}
                className='row-mapper-cards'
            >
                {cards}
            </Row>
        </Modal>
    );
};

import React, { useState, useCallback, useMemo, useEffect } from 'react';
import { Modal, Col, Row } from 'antd';
export const MapperCardModal: React.FC<MapperCardModalProps> = ({ isOpen, onCancel, onAccept, comparisonType, record }) => {
    return (
        <Modal
            centered
            open={isOpen}
            onOk={onOk}
            onCancel={onCancel}
            okButtonProps={{ disabled: isDisabled }}
            className="mapper-modal"
            style={{ maxWidth: '90vw !important' }}
            title={translate('pages.comparisons.modal.title')}
        >
            <Row
                gutter={[12, 12]}
                className='row-mapper-cards'
            >
                {cards}
            </Row>
        </Modal>
    );
};

2 Replies

kapa.ai•9mo ago

Hi @Sebastos. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To set the modal as full screen using Ant Design's Modal component, you can utilize the style and className properties to adjust the modal's dimensions. Below is an example of how you can modify your existing code to achieve a full-screen modal:

import React from 'react';
import { Modal, Col, Row } from 'antd';

export const MapperCardModal: React.FC<MapperCardModalProps> = ({ isOpen, onCancel, onAccept, comparisonType, record }) => {
    return (
        <Modal
            centered
            open={isOpen}
            onOk={onAccept}
            onCancel={onCancel}
            okButtonProps={{ disabled: false }} // Adjust this as needed
            className="mapper-modal"
            style={{ width: '100vw', height: '100vh', top: 0, padding: 0 }}
            title="Your Modal Title" // Replace with your translate function if needed
        >
            <Row
                gutter={[12, 12]}
                className='row-mapper-cards'
            >
                {/* Your card components go here */}
            </Row>
        </Modal>
    );
};

import React from 'react';
import { Modal, Col, Row } from 'antd';

export const MapperCardModal: React.FC<MapperCardModalProps> = ({ isOpen, onCancel, onAccept, comparisonType, record }) => {
    return (
        <Modal
            centered
            open={isOpen}
            onOk={onAccept}
            onCancel={onCancel}
            okButtonProps={{ disabled: false }} // Adjust this as needed
            className="mapper-modal"
            style={{ width: '100vw', height: '100vh', top: 0, padding: 0 }}
            title="Your Modal Title" // Replace with your translate function if needed
        >
            <Row
                gutter={[12, 12]}
                className='row-mapper-cards'
            >
                {/* Your card components go here */}
            </Row>
        </Modal>
    );
};

Explanation: - style: The style prop is used to set the width and height of the modal to 100vw and 100vh respectively, making it full screen. The top: 0 and padding: 0 ensure that the modal covers the entire viewport without any padding. - className: You can still use the className prop to apply additional styles if needed. This approach ensures that the modal will take up the entire viewport, effectively making it full screen. If you need further customization, you can add more styles or use CSS classes. For more information on customizing modals, you can refer to the Material UI Modal props (https://refine.dev/blog/material-ui-modal#material-ui-modal-props) and Customizing your Material UI Modal (https://refine.dev/blog/material-ui-modal#customizing-your-material-ui-modal) sections in the provided knowledge sources. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•9mo ago

<@689846866837373077> kapa.ai is still learning and improving, please let us know how it did by reacting below

Set modal as full screen

Did you find this page helpful?