clear: left on element after cycle

[schelmo]

Example:
http://codepen.io/schlmm/pen/PNRBZw?editors=1111
shouldnt the third element define clear: right (or even both) instead of clear: left, since the second element hast float: right ?
as you can see the third element doesnt start in a new "row".
if you change clear: left, to clear: right, the behaviour would be the same as if you use lost with flexbox.
(with flex: https://codepen.io/schlmm/pen/KzoBWq )

[pl-mnm]

I'm having the same issue, clear: right does it for me however I can't figure out why it's working in the demos.

[schelmo]

looks like it only happen if you have 2 columns in a row.
lost-column: 1/3 works: http://codepen.io/schlmm/pen/MyGxMV
why the last element must be "float: right" ?

[peterramsing]

@schelmo Thanks submitting this. I think you're onto something here regarding how there are differences in using flexbox and not within Lost but could you be a bit more specific as to what you would expect it to do?

Regarding the reason for adding float: right. See: #218

@pl-mnm Could you elaborate on how clear: right does it for you? What does it do?

@schelmo Could you be a bit more specific on what you would expect this to do?

[pl-mnm]

Apologies for not being clear the first time around. I'm having the same issue as described above (also in the codepen): in a two column grid the first cell in the second row doesn't clear anything so the top of the cells don't align. When I open up firebug, editing the clear: left to right manually works and the cells align nicely. Am I missing something?

[peterramsing]

@pl-mnm By "aligning" do you mean being flush with the bottom of the first "row"?

[pl-mnm]

Yes that's correct.

[peterramsing]

@pl-mnm I attached a screenshot of what I'm understanding from you.

[pl-mnm]

Yes that's it. Sorry I didn't do it myself, I thought the codepen would be enough!

[peterramsing]

I'm also seeing what you mean that the "desired" behaviour happens when lost-column: 1/3 is used.

I think I'm understanding a bit better now. I'll investigate.

[peterramsing]

@pl-mnm The codepen was really helpful but one used Flexbox and the other didn't so I just wanted to be sure we were on the same page. 😄

[peterramsing]

I think the issue is confined to having having the cycle of 2. That is for 1/2 or anything with the cycle specified as 2.

[schelmo]

if we change it to "clear:right", we get a similar floating issue with a cycle greater than 2
http://codepen.io/schlmm/pen/grKoNx
so "clear:both" is the way to go ?

[peterramsing]

@schelmo Worth a try. I need to address #262 first and then can tackle this.

[peterramsing]

@schelmo My gut is saying this is a breaking change. While it is fixing a "bug", I worry that there are people that are relying on this by accident.

A thought might be that this could be a feature flag that could be enabled.

[peterramsing]

@schelmo I'm working on adding a rule that would enable reverting to the old way with a global setting so that a refactor of code isn't needed if this was relied on. Should have something to glance at tonight.

[peterramsing]

Closing for PR:
cc: @schelmo @pl-mnm
#293

[peterramsing]

@schelmo @pl-mnm This is now merged into the beta branch. https://github.com/peterramsing/lost/releases/tag/v7.0.0-beta.1

Also on npm. npm install --save lost@beta