fit data in dialog

UI Components for React
Post Reply
sancelot
Posts: 3
Joined: 01 Jul 2022, 09:52

01 Jul 2022, 09:58

Hi,

a am a newbie
I would like a form to fit in a dialog.

I don't understand how to fit it :

Code: Select all

 <div className='my-dialog'>
            <Dialog
                footer={renderFooter('displayBasic')}
                header='Pickup Dialog'
                modal={false}
                onHide={() => onHide('displayBasic')}
                style={{ width: '10vw' }}
                visible={visible}
            >
                <div className='p-fluid grid formgrid'>
                    <div className={styles.card}>
                        <div className={styles.field}>
                            <div className='field col-12 md:col-3'>
                                <label htmlFor='integeronly'>Part chunk</label>
                                <InputNumber
                                    inputId='integeronly'
                                    onFocus={(e) => e.target.select()}
                                    onValueChange={(e) => {
                                        if (e.value) setTronconValue(e.value);
                                    }}
                                    value={Troncon}
                                />
                            </div>
                        </div>
                        <div className={styles.field}>
                            <div className='field col-12 md:col-3'>
                                <label htmlFor='distance'>Distance 1</label>
                                <InputNumber
                                    inputId='distance'
                                    minFractionDigits={1}
                                    mode='decimal'
                                    onFocus={(e) => e.target.select()}
                                    onValueChange={(e) => {
                                        if (e.value) setDistanceValue(e.value);
                                    }}
                                    value={Distance}
                                />
                            </div>
                        </div>
                        <div className={styles.field}>
                            <div className='field col-12 md:col-3'>
                                <label htmlFor='orientationpince'>Distance 2</label>
                                <InputNumber
                                    inputId='orientationpince'
                                    minFractionDigits={1}
                                    mode='decimal'
                                    onFocus={(e) => e.target.select()}
                                    onValueChange={(e) => {
                                        if (e.value) setOrientationValue(e.value);
                                    }}
                                    value={Orientation}
                                />
                            </div>
                        </div>
                        <div className={styles.field}>
                            <div className='field-checkbox'>
                                <Checkbox
                                    checked={FlipPince}
                                    inputId='flippince'
                                    onChange={(e) => setFlipPinceValue(e.checked)}
                                />
                                <label htmlFor='flippince'>&nbsp;Check or not</label>
                            </div>
                        </div>
                    </div>
                </div>
            </Dialog>
        </div>

Melloware
Posts: 3247
Joined: 22 Apr 2013, 15:48

04 Jul 2022, 14:31

You are saying your dialog only has 10vw with "style={{ width: '10vw' }}" you might have to set the same on you div inside the dialog...

<div className='p-fluid grid formgrid' "style={{ width: '10vw' }}>
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 11.0.3 / PF Extensions 11.0.3
PrimeReact 8.0.0

Post Reply

Return to “PrimeReact”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest