Skip to content

Commit

Permalink
Col Push/Pull/Offset value zero support
Browse files Browse the repository at this point in the history
According to the Bootstrap documentation (and my own experience), column offsets must be reset to zero for other sizes if not used.

"In addition to column clearing at responsive breakpoints, you may need to reset offsets, pushes, or pulls. See this in action in the grid example."

For example `<Col xsOffset={2} xs={8} sm={4} md={4} lg={4}>...</Col>` when viewed in 'sm/md/lg' does not produce the expected result of having a column width of '4'. It looks only correct when viewed in 'xs'.

The example would have to be rewritten as `<Col xs={8} xsOffset={2} sm={4} smOffset={0} md={4} mdOffset={0} lg={4} lgOffset={0}>...</Col>` to render correctly in all views.

However, Offset/Push/Pull property values were ran through a "truthy" check in Col.jsx. So when the property value was `0` the column would not render. This has been fixed by doing a `>= 0` check instead which ensures that the property value is simply a non-negative number.
  • Loading branch information
aforty committed Mar 5, 2015
1 parent c759615 commit e1be8c1
Showing 1 changed file with 4 additions and 4 deletions.
8 changes: 4 additions & 4 deletions src/Col.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -46,19 +46,19 @@ var Col = React.createClass({

prop = size + 'Offset';
classPart = size + '-offset-';
if (this.props[prop]) {
if (this.props[prop] >= 0) {
classes['col-' + classPart + this.props[prop]] = true;
}

prop = size + 'Push';
classPart = size + '-push-';
if (this.props[prop]) {
if (this.props[prop] >= 0) {
classes['col-' + classPart + this.props[prop]] = true;
}

prop = size + 'Pull';
classPart = size + '-pull-';
if (this.props[prop]) {
if (this.props[prop] >= 0) {
classes['col-' + classPart + this.props[prop]] = true;
}
}, this);
Expand All @@ -71,4 +71,4 @@ var Col = React.createClass({
}
});

module.exports = Col;
module.exports = Col;

0 comments on commit e1be8c1

Please sign in to comment.