0

您好，我尝试使用具有动态照片大小内容的对话框中的主要反应组件制作数据视图。默认情况下，带有滚动条的照片弹出窗口位于屏幕中央。如何使其具有动态大小且没有滚动条且位于屏幕顶部。

我尝试使用最大/最小身高和体重，但没有结果。发现“动态内容可能会将对话框边界移动到视口之外。常见的解决方案是通过 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;
    }
}

如何使对话框大小等于照片大小。 在此处输入图像描述

4

1 回答 1

0

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>
于 2019-01-18T18:02:51.630 回答