0

Hello I try to make data view with prime react component in Dialog with dynamic photo size content. By default the photo popup with scroll bar and in the centre of screen. How to make it with dynamic size and without scrollbar and on top of the screen.

I tried to use max/min height and weight but there is no result. Found "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." from https://www.primefaces.org/primereact/#/dialog But how implement it.

        <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;
    }
}

How to make dialog size equal photo size. enter image description here

Vadim
  • 557
  • 8
  • 21

1 Answers1

0

Just pass the contentStyle object with the desired max-height, (the same way you do with the style attribute):

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