Menu icon Foundation
Scroll in grid-content

I have the following code:

    <div class="grid-block">
        <div class="grid-content">
            <!--
            In here I have a picture that scales the whole thing
            -->
            <img src="something.svg" />
        </div>
    </div>
            

         

The picture fits the grid-content perfectly. However, I can scroll down the page over the svg and a scroll bar will appear along the grid-content as well, even though there is nothing to scroll.

How can I tell a certain box that I don't want it scrollable? Or have I missed an important concept with the framework?

scrollgrid-content

I have the following code:

    <div class="grid-block">
        <div class="grid-content">
            <!--
            In here I have a picture that scales the whole thing
            -->
            <img src="something.svg" />
        </div>
    </div>
            

         

The picture fits the grid-content perfectly. However, I can scroll down the page over the svg and a scroll bar will appear along the grid-content as well, even though there is nothing to scroll.

How can I tell a certain box that I don't want it scrollable? Or have I missed an important concept with the framework?

Rafi Benkual over 4 years ago

Right now, the mixin sets this to auto, so if your image is larger than the container it will scroll. You can use CSS to change that. We've added this feature to our roadmap for a later version, something like .no-scroll