Menu icon Foundation
Scrollable Content

Hi Folks,

I have created a layout in Foundation for Apps but want only one content block to be scrollable.  The grid frame for medium has noscroll applied but within that I want one text block to be scrollable.  Can't seem to find a way to do it. Any help much appreciated.

apps

Hi Folks,

I have created a layout in Foundation for Apps but want only one content block to be scrollable.  The grid frame for medium has noscroll applied but within that I want one text block to be scrollable.  Can't seem to find a way to do it. Any help much appreciated.

IanG over 3 years ago

Hi again,

Maybe not too clear on my problem so I will try to be more precise as my macbook has now been recharged;-).  I have created a layout with a fixed top bar and a fixed footer using grid-frame vertical which works fine.

index.html

I set up a panel with a main menu in and that works perfectly. The page content which consists of an image with two grid-contents of text below work OK on small screens. Everything scrolls vertical which is fine for small screens.  I have adapted the classes so that the   main menu forms the LH column (medium-3) on medium and above, and the page content forms the RH column (medium-9) with the image spanning across the 9 columns and then two text columns below it.  The LH of these columns is a short leader paragraph and then the RH column is a longer text with more details. It is only this last column of text that I want to be scrollable.

/home

Everything is laid out perfectly as I want it but when scrolling the longer text column the whole page scrolls (between the fixed header & footer).  How do I make it so that only that one grid-content area scrolls?

Many thanks in advance of your response.