Search code examples
reactjsbootstrap-4reactstrap

Correctly formatting Bootstrap columns? (Offsetting, etc.)

Presently, this is how the page looks:

enter image description here enter image description here

It should be laid out such that it's the 4 thumbnails on the left, then right next to it is the big image with the box of information beneath it, and then the box with the toggle switches to the right of the big image. As you can see, 2 of those are laid out on top of each other, and the thumbnails on the left are too offset from the left, and too much space between them and the big image.

How I wrote it:

  <div className="App">
    <Container>
      <Row>
        <Col md="4">
          {this.state.images.map((image) => (
            <Row>
              <img id="thumbnail" alt="scan" src={image} onClick={this.changeStudy.bind(this, image)} />
            </Row>
          ))
          }
        </Col>
        <Col md="4">
          <Row>
            <Col>
            {this.state.currStudy && <img alt="scan" src={this.state.currImage} />}
            </Col>
          </Row>
          <Row>
            {this.state.currStudy && <MetadataBox
              viewposition={this.state.currStudy.Metadata.ViewPosition}
              name={this.state.currStudy.Metadata.PatientName}
              age={this.state.currStudy.Metadata.PatientAge}
              sop={this.state.currStudy.Metadata.SOPInstanceUID}
              patientid={this.state.currStudy.Metadata.PatientID}
              accnum={this.state.currStudy.Metadata.AccessionNumber}>
            </MetadataBox >}
          </Row>
        </Col>
        <Col md="4">
          {this.state.currStudy &&
            <ReportBox
              diseases={this.state.diseases}
              image={this.state.currStudy.Filename}
              toggle={this.toggle.bind(this)}
              onSubmit={this.handleSubmit}>
            </ReportBox>
          }
        </Col>
      </Row>
    </Container>
  </div>

(The syntax is reactstrap btw)

Update: What it's supposed to look like

enter image description here

Solution

  • I wouldn't use responsive layout for an image viewer component. I'd use it for it's container and for the component, flexbox.

    https://codesandbox.io/s/cool-breeze-4hyww

    But if you must use Cols, xs="auto" should help with the whitespace. Just make sure to wrap your Row with a Container, I don't think it can be a child of Col.

    Here's an example with a working layout: https://codesandbox.io/s/distracted-yonath-klpyg