CODEWITHSUNDEEP
javascriptreactjs
lakeIn231
lakeIn231

Reputation: 1315

Making a React Form Group scrollable

I am having difficulty showing a display that is a lot of data, and I cannot see all of the data because it is not scrollable. How could I make this form group scrollable so I can scroll through the data to see it?

 render() {


            return (

                <div style={{width: '50rem', margin: '1rem'}}>
                    <Header as='h2' textAlign='center' style={styles.mainHeader}>CMS View</Header>

                    <Segment raised className='magentaSegment'>

                        <Form style={{paddingBottom: '2.5em'}} error={this.props.networksHasErrored}>
                            <Form.Group widths='equal'>
                            </Form.Group>
                            <Form.Input fluid label='Package Lid' value = {cmsObj.PACKAGE_LID}  style={styles.normalColor} />
                            <Form.Input fluid label='Provider' value = {cmsObj.Provider}  style={styles.normalColor} />
                            <Form.Input fluid label='ADI' value = {cmsObj.ADI}  style={styles.normalColor} />
                            <Form.Input fluid label='Provider ID' value = {cmsObj.Provider_ID}  style={styles.normalColor} />
                            <Form.Input fluid label='Source' value = {cmsObj.Source}  style={styles.normalColor} />
                            <Form.Input fluid label='Title' value = {cmsObj.Title}  style={styles.normalColor} />
                            <Form.Input fluid label='Creation Date' value = {cmsObj.Creation_Date}  style={styles.normalColor} />
                            <Form.Input fluid label='Update Date' value = {cmsObj.Update_Date}  style={styles.normalColor} />
                            <Form.Input fluid label='Licensing Window Start' value = {cmsObj.Licensing_Window_Start}  style={styles.normalColor} 
                        </Form>
                    </Segment>
                </div>
            )
    }

I thought I could add some type of "scroll" field, but I am having problems figuring that out.

Upvotes: 0

Views: 2341

Answers (1)

ThatCoderGuy
ThatCoderGuy

Reputation: 677

I think you should be able to set a height, a maxHeight and and overflow-Y:'scroll' as style attributes to your Form.Group component

Upvotes: 1

Related Questions