0

こんにちは、動的な写真サイズのコンテンツを使用して、Dialog でプライムの反応コンポーネントを使用してデータ ビューを作成しようとしています。デフォルトでは、スクロールバー付きの写真ポップアップが画面の中央に表示されます。動的サイズで、スクロールバーなしで、画面の上に作成する方法。

最大/最小の身長と体重を使用しようとしましたが、結果がありません。「動的コンテンツにより、ダイアログの境界がビューポートの外に移動する場合があります。一般的な解決策は、コンテンツがスクロールバーを長く表示するように、contentStyle を介して最大高さを定義することです。」from 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