Foundation-sites: Sticky plugin makes div larger

[iammichiel]

Hi,

I am having a strange issue when using the sticky plugin.
I simply create two divs large-9 and large-3. The large-3 is a sticky div for large-9.

<div class="row">
    <div id="leftbar" class="large-9 columns">
    </div>

    <div id="rightbar" class="columns large-3" data-sticky-container>
        <div class="sticky" data-sticky data-anchor="leftbar">

        </div>
    </div>
</div>

Without the sticky part, the #rightbar is 369 pixels wide. When adding the sticky class, it gets 12 pixels larger.

[gehasia]

Please provide full html+css code to reproduce the bug.
You tell rightbar is 369px wide, but the width will depend of your browser windows width, do you mean you fixed the column width ???

[andycochran]

If you can, please reproduce this in a CodePen.

[iammichiel]

Yep, sure. Here is a link to a Codepen illustrating the problem.

I can now go a little further in my explanation, when adding the sticky behaviour, the right gutter is no longer displayed.

[andycochran]

@gehasia, you're good with .js and familiar with Sticky, right? Would you like to take a stab at fixing this? I'd love to see a PR.

[gehasia]

Sure, i'll try to have a look on it next week probably (as i'll be busy for few days) !

[JerBear90]

@gehasia Hey! I was wondering if you had time to take a look at this issue. I would love to collaborate and get this issue resolved for the community.

[gehasia]

@Jflem1290
Hi ! Unfortunately i don't have any time right now, if you want to look at it, feel free to do it !

[JerBear90]

@gehasia @andycochran @iammichiel
I think I may have pinpointed the issue in thefoundation.sticky.js.

 var _this = this,
   newElemWidth = this.$container[0].getBoundingClientRect().width,
   comp = window.getComputedStyle(this.$container[0]),
   pdng = parseInt(comp['padding-right'], 10);

 this.$element.css({
   'max-width': `${newElemWidth - pdng}px`
 });

The calculation between newElemWidth and pdng seems to be insufficient.

To break it down (in this case):
newElemWidth = 300px
pdng = 15px
newElemWidth - pdng = 285px

The max width of the container should be 270 not 285 to allow for the needed padding-right.

So, if we take the pdng and multiply it by 2, we will get 30. Therefore, 300-30=270.
For example:
pdng = parseInt(comp['padding-right'], 10) * 2; = 30

I've also received the same output when using a regex of 25 instead of the default 10.
`pdng = parseInt(comp['padding-right'], 25) = 30

I am not sure if this is just for this case but it would be great to get it tested in other cases. Feel free to download the foundation.sticky.js test file to your project and test.
foundation.sticky.js.zip

[kball]

I believe this will be addressed by https://github.com/zurb/foundation-sites/pull/9298

[kball]

9298 was just merged - this should be fixed in 6.3