Unequal columns with bootstrap.

[jonathanpuc]

When trying to use unequal columns of a width with bootstrap and a column is of 7 columns or higher, all the elements in the masonry layout just sit on their own row and no longer next to each other.

E.g trying to achieve a layout with some divs being 8 columns wide and others 4 columns wide (12 column grid) but they don't sit on one line together.

The closest thing that works is something like 6 column wide with 4 column wide elements.

[afram]

do you have an example I can take a look at please?

[jonathanpuc]

Attached an image of what it looks like, notice how they don't sit next to each other? This is with col-sm-8 and col-sm-4 bootstrap classes. If I try with col-sm-7 and col-sm-4 they still don't sit next to each other. col-sm-6 and col-sm-4 is fine though.

This only happens when the elements are wrapped by the Masonry HOC. If I remove it, the grid system is all okay and col-sm-8 next to col-sm-4 works fine.

const masonryOptions = {
  transitionDuration: 0
}

class Factoids extends React.Component<IProps, {}> {

  public render() {
    // factoids that are relevant based on the current class assets selected.
    const activeFactoids: any[] = this.props.factoidData.filter(factoid =>
      this.props.classSelections.some((classId: number) =>
        factoid.classes.includes(classId)
      )
    )

    // elements to render in masonry
    const elements = activeFactoids.map((factoid: any) => {

      const width =
        factoid.acf.factoid_width === 'Double'
          ? 'col-xs-12 col-sm-8'
          : 'col-xs-12 col-sm-4'

      if (factoid.acf.factoid_content[0].acf_fc_layout === 'simple') {
        return (
          <div
            className={width}
            key={factoid.id}
            style={{ marginBottom: '20px', transition: 'all 0.5s' }}
          >
            <Simple
              item={factoid}
              onSelect={this.handleFactoidSelect}
              onRemove={this.handleFactoidRemove}
            />
          </div>
        )
      } else {
        return (
          <div
            className={width}
            key={factoid.id}
            style={{ marginBottom: '20px', transition: 'all 0.5s' }}
          >
            <Double
              item={factoid}
              onSelect={this.handleFactoidSelect}
              onRemove={this.handleFactoidRemove}
            />
          </div>
        )
      }
    })
    return (
      <Outer>
        <h2>
          To help us make the right recomendations, select the relevant class
          assets.
        </h2>
        <ClassChips />
        <div className="container-fluid">
          <div className="row">
            <Masonry
              options={masonryOptions}
              disableImagesLoaded={false}
              updateOnEachImageLoad={false}
            >
              {elements}
            </Masonry>
          </div>
        </div>
        <Button
          variant="fab"
          aria-label="next"
          style={{
            backgroundColor: '#92D1DB',
            position: 'absolute',
            right: 0,
            bottom: '20px'
          }}
          onClick={this.next}
        >
          <ArrowForwardIcon style={{ color: '#fff' }} />
        </Button>
      </Outer>
    )
  }
}

const mapStateToProps = (state: IStoreState) => ({
  classSelections: state.views.new.selections.classes,
  factoidData: state.data.factoids
})

export default withRouter(
  connect(
    mapStateToProps,
    { addFactoid, removeFactoid }
  )(Factoids)
)

const Outer = styled.div`
  position: relative;
  width: 95%;
  margin: 0 auto;
  h2 {
    color: #717271;
    font-weight: 400;
  }

  .masonry {
    display: flex;
    flex-direction: row;
  }

[jonathanpuc]

@afram any updates?

[mayteio]

@afram I have the same issue.