CODEWITHSUNDEEP
cssreactjsjsxspfx
NightTom
NightTom

Reputation: 486

I can create 2 columns but not 3 columns using JSX with CSS in React

I'm simply trying to create 3 columns of text fields with associated labels. I can easily create 2 columns but this code is putting the third text field on a 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:

.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 can get two columns to show using the same technique with the CSS and JSX but not 3 columns. Here's the JSX that works for 2 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 don't want to use tables.

T

Upvotes: 0

Views: 347

Answers (1)

Arunkumar Ramasamy
Arunkumar Ramasamy

Reputation: 781

@Tom you are closing multiple div tag in your html. And then you are adding float: none to second column style col2. It may the issue.

.threecol .col2 {
  float: left;
  text-align: center;
}

Ref: https://stackblitz.com/edit/react-3urqg6?file=index.html

Upvotes: 1

Related Questions