ReactBootstrap Grid RowSpan not working

Question

Here is an image of the control, as you can see the rowSpan is not working and the second row starts below the first one. I would like the Base Role select to be directly below the Role Name input.

I tried adding the rowSpan={5} attribute as you can see above, but it did not do anything. I also tried rowspan and other variations of the attribute's case.

As a workaround I am considering adding a parent table and housing this table in the first column and the textarea for Description in the second column but would like to achieve this with some type of rowSpan functionality if possible.

Any help would be much appreciated.

I have a ReactBootstrap Grid control and I want to add a column for a Description and give it a rowSpan of 5 so the other column is in line with this one and does not start after the end of this one.

                    <ReactBootstrap.Grid style={{marginTop: 10}} fluid={true}>
                        <ReactBootstrap.Row>
                            <ReactBootstrap.Col sm={6} md={6}>
                                <Input label="Name:" ref={(r) => this.name= r} className={this.state.errors.name} defaultValue={object.name} onChange={ value => this.onFieldChange("name", value) } maxLength="50" />
                            </ReactBootstrap.Col>
                            <ReactBootstrap.Col sm={6} md={6} rowSpan={5} >

                            <div className="label">Description:</div>
                            <textarea ref="notes" rows="15" onChange={ this.onChangeDescription } style={{ width: "99%" }} disabled={ object.isDeleted }>
                                { object.description }
                            </textarea>

                        </ReactBootstrap.Col>
                        </ReactBootstrap.Row>

Answer 1

As far as I can tell RowSpan is not supported for a React Bootstrap Grid Column. If anybody finds out different or this feature is added in the future please let me know or post an updated answer below.

My work around was to add 2 columns to the original grid, where the first column holds another grid that has 1 column and rows with all of the data that would normally appear in the first column and the second column holds the multi-line text area.

You can see this was achieved, however I found some issues with the width of the inner controls in the first column, so I went about manually setting their width values.

Here is my code.

<ReactBootstrap.Grid style={{marginTop: 10}} fluid={true}>
<ReactBootstrap.Row>
	<ReactBootstrap.Col sm={6} md={6}>

			<ReactBootstrap.Grid >
				<ReactBootstrap.Row>
					<ReactBootstrap.Col sm={6} md={6}>
						<Input label="Role Name:" ref={(r) => this.roleName = r} className={this.state.errors.roleName} width="300" defaultValue={role.name} onChange={ value => this.onFieldChange("roleName", value) } maxLength="50" />
					</ReactBootstrap.Col>
				</ReactBootstrap.Row>
				<ReactBootstrap.Row>
					<ReactBootstrap.Col sm={6} md={6}>
						<div>
						<div className="label" >Base Role:</div>
							<Select ref={(r) => this.baseRole = r} className={this.state.errors.baseRole} style={{ width: "300px" }} options={baseRoles} onChange={this.onChangeBaseRole} value={ role.baseRoleId } clearable={false} backspaceRemoves={false} />
						</div>
					</ReactBootstrap.Col>
				</ReactBootstrap.Row>
				<ReactBootstrap.Row>
					<ReactBootstrap.Col sm={6} md={6}>
						<div>
						<div className="label" >Startup Module:</div>
							<Select ref={(r) => this.defaultModule = r} className={this.state.errors.defaultModule} style={{ width: "300px" }} options={defaultModules} onChange={this.onChangeDefaultModule} value={ role.moduleId } clearable={false} backspaceRemoves={false} />
						</div>
					</ReactBootstrap.Col>
				</ReactBootstrap.Row>
				<ReactBootstrap.Row>
					<ReactBootstrap.Col sm={6} md={6}>
								<Input label="Allow Company Access" type="checkbox" ref={(r) => this.companyAccess = r} className={ this.state.errors.companyAccess} checked={ role.companyAccess} onChange={ value => this.onFieldChange("companyAccess", value) } />
					</ReactBootstrap.Col>
				</ReactBootstrap.Row>
				<ReactBootstrap.Row>
					<ReactBootstrap.Col sm={6} md={6}>
								<Input label="Restrict Application Access" type="checkbox" ref={(r) => this.applicationGrant = r} className={ this.state.errors.applicationGrant} checked={ role.applicationGrant} onChange={ value => this.onFieldChange("applicationGrant", value) } />
					</ReactBootstrap.Col>
				</ReactBootstrap.Row>
			</ReactBootstrap.Grid>
		</ReactBootstrap.Col>
	
		<ReactBootstrap.Col sm={6} md={6} RowSpan={5} >

			<div className="label">Description:</div>
			<textarea ref="notes" rows="15" onChange={ this.onChangeNotes } style={{ width: "99%" }} disabled={ role.isDeleted }>
				{ role.description }
			</textarea>
		</ReactBootstrap.Col>
	</ReactBootstrap.Row>

</ReactBootstrap.Grid>