Динамический контент в компоненте Диалог - PullRequest
Новая
       10

Динамический контент в компоненте Диалог

0 голосов
/ 18 января 2019

Здравствуйте. Я пытаюсь создать представление данных с компонентом простого реагирования в диалоговом окне с динамическим размером фотографии. По умолчанию всплывающее окно с полосой прокрутки и в центре экрана. Как сделать это с динамическим размером и без полосы прокрутки и в верхней части экрана.

Я пытался использовать максимальный / минимальный рост и вес, но безрезультатно. Найдено: «Динамическое содержимое может перемещать границы диалогов за пределы области просмотра. Распространенным решением является определение максимальной высоты с помощью contentStyle, чтобы более длинный контент отображал полосу прокрутки». от https://www.primefaces.org/primereact/#/dialog Но как это реализовать. 

        <Dialog header="Client Details"
                visible={this.state.visible}
                modal={true}
                onHide={() => this.setState({visible: false})}>
            {this.renderClientDialogContent()}
        </Dialog>


renderClientDialogContent() {
    if (this.state.selectedClient) {
        return (
            <div className="p-grid" style={{fontSize: '16px', textAlign: 'center', padding: '20px', maxHeight:'800px', maxWidth:'700px', minWidth:'300px'}}>
                <div className="p-col-36" style={{textAlign: 'center'}}>
                    <img src={this.state.selectedClient.bigPhotoLink}
                         alt={this.state.selectedClient.name} />
                </div>

                <div className="p-col-12">{this.state.selectedClient.name}</div>

                <div className="p-col-12">{this.state.selectedClient.description}</div>
            </div>
        );
    }
    else {
        return null;
    }
}

Как сделать размер диалога равным размеру фотографии. enter image description here

1 Ответ

0 голосов
/ 18 января 2019

Просто передайте объект contentStyle с желаемым max-height (так же, как вы делаете с атрибутом style): 

<Dialog
    contentStyle={{ maxHeight: "300px" }}
    header="Client Details"
    visible={this.state.visible}
    modal={true}
    onHide={() => this.setState({visible: false})}
    >
    {this.renderClientDialogContent()}
</Dialog>
...