I am attempting to create a layout with three columns of text fields and labels. While I can easily achieve this with two columns, the third text field is appearing on a separate row below:
<div className={styles.threecol}>
<div className={styles.col1}>
<div style={{width: '150px'}}>
<Label className={styles.questionTitle}>Record No.</Label>
<TextField
value={this.state.Title}
disabled={true}
/>
</div>
</div>
<div className={styles.threecol}>
<div className={styles.col2}>
<div style={{width: '150px'}}>
<Label className={styles.questionTitle}>Room</Label>
<TextField
value={this.state.Room}
onChange={this._onRoomChange}
/>
<br />
</div>
</div>
</div>
<div className={styles.threecol}>
<div className={styles.col3}>
<div style={{width: '150px'}}>
<Label className={styles.questionTitle}>Room</Label>
<TextField
value={this.state.Room}
onChange={this._onRoomChange}
/>
<br />
</div>
</div>
</div>
</div>
</div>
</div>
The CSS styling:
.threecol {
overflow: hidden
}
.threecol .col1 {
width: 22%
}
.threecol .col2 {
width: 22%
}
.threecol .col3 {
width: 22%
}
.threecol .col1 {
float: left;
}
.threecol .col2 {
float: none;
}
.threecol .col3 {
float: right;
}
.threecollabel {
font:'24px';
font-weight: 'bold';
display: block;
}
.threecol .co1Sm {
float: left;
width: 200px;
height: 30px;
}
I have successfully implemented a two-column layout using similar CSS and JSX techniques, but struggling to achieve it with three columns. Here's the simplified JSX code for two columns:
<div>
<div>
<Label className={styles.questionTitle1}>Details</Label>
</div>
<div className={styles.twocol}>
<div className={styles.col1}>
<div style={{width: '150px'}}>
<Label className={styles.questionTitle}>Record No.</Label>
<TextField
value={this.state.Title}
disabled={true}
/>
</div>
</div>
<div className={styles.twocol}>
<div className={styles.col2}>
<div style={{width: '150px'}}>
<Label className={styles.questionTitle}>Room</Label>
<TextField
value={this.state.Room}
onChange={this._onRoomChange}
/>
<br />
</div>
</div>
</div>
</div>
</div>
I prefer not to utilize tables for this design.
T