Menu icon Foundation
Sticky plugin element width

I am having an issue with the sticky plugin in foundation 6.

The sticky elements dont seem to fit in the grid. Even if you look at the example in the documentation the image spills over the edge of the grid on the right side. It seems to fill the full column width + the padding.

On my own project the div I make sticky doesnt fill the whole width of the column, as soon as I remove the sticky it looks as it should?

Any ideas?

stickysites

I am having an issue with the sticky plugin in foundation 6.

The sticky elements dont seem to fit in the grid. Even if you look at the example in the documentation the image spills over the edge of the grid on the right side. It seems to fill the full column width + the padding.

On my own project the div I make sticky doesnt fill the whole width of the column, as soon as I remove the sticky it looks as it should?

Any ideas?

Val Ery over 2 years ago

 Hi John!

I think this is a problem layout ...
Look at the structure of the page http://foundation.zurb.com/sites/docs/sticky.html.

<div id="docs" class="large-9 columns">
  <h2></h2>
  <p></p>
  <div class="docs-code"></div>
  <div class="row">
    <div id="example" class="columns small-6"></div>
    <div class="columns small-6 sticky-container"></div>    
  </div>
  <h2></h2>
  <p></p>
  <div class="docs-code"></div>
  <div class="row">
    <div id="example" class="columns small-6"></div>
    <div class="columns small-6 sticky-container"></div>    
  </div>
</div>

It seems to me, it would be wise to do so:

<div id="docs" class="large-9 columns">
  <div class="row description">
    <h2></h2>
    <p></p>
    <div class="docs-code"></div>
  </div>
  <div class="row">
    <div id="example" class="columns small-6"></div>
    <div class="columns small-6 sticky-container"></div>    
  </div>
  <div class="row description">
    <h2></h2>
    <p></p>
    <div class="docs-code"></div>
  </div>
  <div class="row">
    <div id="example" class="columns small-6"></div>
    <div class="columns small-6 sticky-container"></div>    
  </div>
</div>

Or insert descriptions into blocks with examples. :)

In img - I just changed the layout in elements inspector:

Alex Laforge over 2 years ago

Hi,

I have opened a pull request on this topic : https://github.com/zurb/foundation-sites/pull/9896