Wrong margin-bottom value when use offset

[pryann]

Is this a feature request or a bug report?
Bug

Hello,

If I create a simple grid:

<div class="main"> 
        <div>lorem</div> 
        <div>lorem</div> 
</div> 

Than I format them:

.main {
  lost-center: 1000px 15px;
  height: 100%;
}

.main > div {
  lost-row: 1/3;
}

.main div:first-child {
  lost-offset: 1/3 column;
}

The second div is out of the main div.
I attached a file.

Thanks.

[peterramsing]

@pryann Could you do us a favor and do some cross-browser testing on that and determine that it does that for other browsers?

[pryann]

@peterramsing Yes of course. I checked in Chrome 58, Firefox 53, Opera 46, Edge, the result is same, but if you would like, I will create a complex cross bowser test.

[peterramsing]

@pryann That's good enough. Just wanted to make sure it wasn't a browser specific rounding.

[pryann]

@peterramsing No, it doesn't a browser specific issue. If I make 3 row (lost-row: 1/3) everything if perfect, but if I use offfset, the margin-bottom value is wrong (calc(99.9% * 1/3 - (30px - 30px * 1/3) + (30px * 2)) !important).

[peterramsing]

@pryann If you want to jump start the fix could you write some failing tests for this?

[pryann]

@peterramsing I found what is the problem, and I know the solution.

The example:

<div class="main"> 
        <div>lorem</div> 
        <div>lorem</div> 
</div> 

@lost rounder 100;

.main {
  lost-center: 1000px 15px;
  height: 100%;
  background: #faa;
}

.main > div {
  lost-row: 1/3;
  background: #aaf;
}

.main div:first-child {
  lost-offset: 1/3 column;
}

The height of the main div is 100% (in this case 974px).
The height of the child divs are: calc(100% * 1/3 - (30px - 30px * 1/3)) = 304.656px
The margin-bottom of the first div is: calc(100% * 1/3 - (30px - 30px * 1/3) + (30px * 2)) = 373.328px;
So: 2 * 304.656px + 373.328px = 982,64px. It is too much.

You use the next formula in the lost-offset.js file, line 83:

 value: 'calc(' + lostOffsetRounder + '% * '
            + lostOffset + ' - (' + lostOffsetGutter + ' - '
            + lostOffsetGutter + ' * ' + lostOffset + ') + ('
            + lostOffsetGutter + ' * 2)) !important'
          });

A the third row causes the problem. ((30px - 30px * 1/3)). If you subtract only just the gutter, the problem is solved. This works for me.
Just modify in to the next:

value: 'calc(' + lostOffsetRounder + '% * '
            + lostOffset + ' - ' + lostOffsetGutter + ' + ( '
            + lostOffsetGutter + ' * 2)) !important'
          });

I cheked the negative offset value too.

Example:

.main > div {
  lost-row: 1/3;
  background: #aaf;
}

.main div:first-child {
  lost-offset: -1/3 column;
}

The problem is same.
The margin-top value is: calc(100% * (-1/3 * -1) - (30px - 30px * (-1/3 * -1)) + 30px)

You use the next formula in the lost-offset.js file, line 97:

value: 'calc(' + lostOffsetRounder + '% * ('
            + lostOffset + ' * -1) - (' + lostOffsetGutter + ' - '
            + lostOffsetGutter + ' * (' + lostOffset + ' * -1)) + '
            + lostOffsetGutter + ') !important'
          });

But the next works perfectly for me:

 value: 'calc(' + lostOffsetRounder + '% * ('
            + lostOffset + ' * -1) + '
            + lostOffsetGutter + ') !important'
          });

Please check it. I hope it will work.
Thanks.

[peterramsing]

It looks like there might be something more wrong here... I'm not able to replicate your issue but instead am getting something worse.

I'm thinking I might need to tear up that code and figure out what the heck is going on...the maths is all wrong.

<div class="main">
  <div>first</div>
  <div>second</div>
</div> 

@lost rounder 100;

.main {
  lost-center: 1000px 15px;
  height: 500px;
  background: #faa;
}

.main > div {
  lost-row: 1/3;
  background: #aaf;
}

.main div:first-child {
  lost-offset: 1/3 column;
}

[peterramsing]

The update on this is that I spent several plane rides trying to figure out what's what w/o any CSS documentation to read about what is actually happening. My next steps are to see how Bootstrap and other grids do the same thing and see if I can figure it out that way.