对话框组件中的动态内容
Dynamic content in Dialog component
您好,我尝试在具有动态照片大小内容的对话框中使用 prime React 组件制作数据视图。默认情况下,带有滚动条的照片弹出窗口位于屏幕中央。
如何使其具有动态大小且没有滚动条并在屏幕顶部。
我尝试使用 max/min 身高和体重,但没有结果。
从 https://www.primefaces.org/primereact/#/dialog 找到 "Dynamic content may move the dialog boundaries outside of the viewport. Common solution is defining max-height via contentStyle so longer content displays a scrollbar."
但是如何实现呢。
<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;
}
}
如何使对话框大小等于照片大小。
只需传递具有所需 max-height
的 contentStyle
对象(与处理 style
属性的方式相同):
<Dialog
contentStyle={{ maxHeight: "300px" }}
header="Client Details"
visible={this.state.visible}
modal={true}
onHide={() => this.setState({visible: false})}
>
{this.renderClientDialogContent()}
</Dialog>
您好,我尝试在具有动态照片大小内容的对话框中使用 prime React 组件制作数据视图。默认情况下,带有滚动条的照片弹出窗口位于屏幕中央。 如何使其具有动态大小且没有滚动条并在屏幕顶部。
我尝试使用 max/min 身高和体重,但没有结果。 从 https://www.primefaces.org/primereact/#/dialog 找到 "Dynamic content may move the dialog boundaries outside of the viewport. Common solution is defining max-height via contentStyle so longer content displays a scrollbar." 但是如何实现呢。
<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;
}
}
如何使对话框大小等于照片大小。
只需传递具有所需 max-height
的 contentStyle
对象(与处理 style
属性的方式相同):
<Dialog
contentStyle={{ maxHeight: "300px" }}
header="Client Details"
visible={this.state.visible}
modal={true}
onHide={() => this.setState({visible: false})}
>
{this.renderClientDialogContent()}
</Dialog>