Not able to increase width of Modal from 'reactstrap' in "React JS"

Viewed 6334
export class A extends Component {
    constructor(props) {
        super(props)

        this.state = {
            collapse: false,

            divWidth: {
                width: 700,
            }

        }
        this.toggle = this.toggle.bind(this);


    }
    toggle() {
        this.setState(state => ({ collapse: !state.collapse }));
    }

    render() {
        const data = [{
            name: 'Ayaan',
            age: 26
        }, {
            name: 'Ahana',
            age: 22
        }]
        const columns = [{
            Header: 'Name',
            accessor: 'name'
        }, {
            Header: 'Age',
            accessor: 'age'
        }]

        return (
            <div>
                <Button onClick={this.toggle} >
                    Click Button
                 </Button>
                <Modal isOpen={this.state.collapse} modalClassName={this.state.divWidth}>
                    <ModalHeader>Welcome</ModalHeader>
                    <ModalBody>
                        <div className="form-group">
                            <div>
                                <ReactTable
                                    data={data}
                                    columns={columns}
                                    defaultPageSize={2}
                                />
                            </div>
                      </div>
                    </ModalBody>
                </Modal>
            </div>
        )

    }
}

In above code I am not able to increase width of modal(from reactstrap),we can increase width only till 500px. I have added css property in state named divWidth where I am increasing width to 700 but still it does not work.

1 Answers

On component set size="lg" or what you need, and it works.

Or you can set an inline style like so:

<Modal size="lg" style={{maxWidth: '700px', width: '100%'}}> ... </Modal>

The docs reactstrap really bad to explained.

Related