CODEWITHSUNDEEP
reactjsbootstrap-4reactstrap
BlahZayBlahZay
BlahZayBlahZay

Reputation: 87

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

Upvotes: 1

Views: 81

Answers (2)

blu
blu

Reputation: 372

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

Upvotes: 2

wittier-banterer
wittier-banterer

Reputation: 141

It sounds like you want the thumbnails to appear all inline together and not stacked on top of one another?

I would change your .map() function, which appears to be generating multiple <Row> which is probably not what you want. Does this work for the thumbnails?

<Col md="4">
    {this.state.images.map((image) => (
        <img id="thumbnail" alt="scan" src={image} onClick={this.changeStudy.bind(this, image)} />)
    )}
</Col>

As for your toggle/controls box, is that the <ReportBox>? Does <ReportBox> have its own CSS (such as positioning or z-index) that is causing it to stack above the image?

Upvotes: 0

Related Questions