search

roylee0704 / react-flexbox-grid

A set of React components implementing flexboxgrid with the power of CSS Modules.
http://roylee0704.github.io/react-flexbox-grid/
2.93k stars 206 forks source link

Stop offset for larger screen size #50

Open giest4life opened 8 years ago

giest4life commented 8 years ago

Is there a way to offset columns for smaller screen sizes? For example, if I wanted wanted offset columns for sm and xs sizes I could do something like xsOffset={3} but this offset for all screen sizes. I tried adding mdOffset={0} or mdOffset to prevent it from offsetting medium or large screen sizes but it does not work.

NeXTs commented 8 years ago

damn I stuck at same problem

NeXTs commented 8 years ago

@roylee0704 how to cancel offset at larger screens? for example if I set xsOffset and I don't want to apply this offset for mdOffset settings mdOffset={0} doesn't make effect, the problem is - rules from smaller sizes inherits to larger sizes. it's not the way how it worked at common bootstrap, for example

jacargentina commented 6 years ago

@NeXTs i'm interested on fix this thing on my own version here https://jacargentina.github.io/react-flexbox-grid/. Please could you put a full code example for me to test?

mattlo commented 6 years ago

Looks like the issue is how it's implemented.

https://github.com/roylee0704/react-flexbox-grid/blob/master/src/components/Col.js#L57

The code iterates through props then builds out the styles in the order of the props.

Workaround

To circumvent, place the largest offsets last to override the CSS specificity. When Object.keys() iterates over the props, the later defined props will override the earlier defined ones.

Works

<Col xs={12} smOffset={3} sm={6} mdOffset={4} md={4}>

Doesn't work

<Col xs={12} mdOffset={4} md={4} smOffset={3} sm={6}>