Menu icon Foundation
Simple Layout with scrolling

I'm trying to use this Foundation for Apps (FA) to create a simple web app. And I'm having difficulties using it creating simple layout that works. And sometimes what works in Chrome dosent work in IE11. I'm beginning to think that FA isnt suitable for web app development due to the limitations/bugs of the grid.

I've added a simple image of what I'm trying to achieve. A header/topbar, a sidebar and a main content area. The problem is with the main content area. Where I want the content to grow as needed and then a vertical scrollbar should appear to the right of the gutter on the right side, when the content overflows (the three sections in red, lightblue and yellow). The content area includes the gray gutter (class main-content).

Does anyone know how to apply this using FA, making it work in Chrome and IE11?

Seen from some examples that adding grid-content to the main content area can be used and inside that use grid-blocks and that may seem to help some... But then again you start to have issues with the content size not filling up available space. As seen in the second image.

Fa1

<div class="grid-frame vertical">
    <div class="grid-block" style="background: orange">
      <div class="grid-content noscroll">
        <h1>coolbar</h1>
      </div>
    </div>
    <div class="grid-block ">
      <div class="grid-block sidebar" style="background: green">
        <div class="grid-content noscroll">
          <h3>sidebar</h3>
        </div>
      </div>
      <div class="grid-block vertical main-content" style="padding:10px;">
        <div class="grid-content noscroll" style="background:red">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id consequat justo. Phasellus feugiat accumsan finibus. Ut a est vel sem sagittis vestibulum. Sed sed fermentum lacus. Nulla fermentum, dui eget hendrerit tristique, tellus nisi blandit sapien,
            ac fermentum orci leo sed enim. Fusce ultrices ipsum at neque ultrices, ornare condimentum augue efficitur. Aenean tempus lacus sit amet augue dapibus ullamcorper. Nullam eu tristique arcu, eget consectetur nisl. Mauris nec arcu enim. Integer
            erat erat, lobortis pulvinar leo vitae, consectetur pretium nisi.
          </p>
        </div>
        <div class="grid-content noscroll" style="background:lightblue">
          <div>2.0</div>
          <div>2.1</div>
          <div>2.2</div>
          <div>2.3</div>
        </div>
        <div class="grid-content noscroll" style="background:yellow">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id consequat justo. Phasellus feugiat accumsan finibus. Ut a est vel sem sagittis vestibulum. Sed sed fermentum lacus. Nulla fermentum, dui eget hendrerit tristique, tellus nisi blandit sapien,
            ac fermentum orci leo sed enim. Fusce ultrices ipsum at neque ultrices, ornare condimentum augue efficitur. Aenean tempus lacus sit amet augue dapibus ullamcorper. Nullam eu tristique arcu, eget consectetur nisl. Mauris nec arcu enim. Integer
            erat erat, lobortis pulvinar leo vitae, consectetur pretium nisi.
          </p>
        </div>
      </div>
    </div>
  </div>
            

         

Fa2

foundation for appslayoutscrolling

I'm trying to use this Foundation for Apps (FA) to create a simple web app. And I'm having difficulties using it creating simple layout that works. And sometimes what works in Chrome dosent work in IE11. I'm beginning to think that FA isnt suitable for web app development due to the limitations/bugs of the grid.

I've added a simple image of what I'm trying to achieve. A header/topbar, a sidebar and a main content area. The problem is with the main content area. Where I want the content to grow as needed and then a vertical scrollbar should appear to the right of the gutter on the right side, when the content overflows (the three sections in red, lightblue and yellow). The content area includes the gray gutter (class main-content).

Does anyone know how to apply this using FA, making it work in Chrome and IE11?

Seen from some examples that adding grid-content to the main content area can be used and inside that use grid-blocks and that may seem to help some... But then again you start to have issues with the content size not filling up available space. As seen in the second image.

Fa1

<div class="grid-frame vertical">
    <div class="grid-block" style="background: orange">
      <div class="grid-content noscroll">
        <h1>coolbar</h1>
      </div>
    </div>
    <div class="grid-block ">
      <div class="grid-block sidebar" style="background: green">
        <div class="grid-content noscroll">
          <h3>sidebar</h3>
        </div>
      </div>
      <div class="grid-block vertical main-content" style="padding:10px;">
        <div class="grid-content noscroll" style="background:red">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id consequat justo. Phasellus feugiat accumsan finibus. Ut a est vel sem sagittis vestibulum. Sed sed fermentum lacus. Nulla fermentum, dui eget hendrerit tristique, tellus nisi blandit sapien,
            ac fermentum orci leo sed enim. Fusce ultrices ipsum at neque ultrices, ornare condimentum augue efficitur. Aenean tempus lacus sit amet augue dapibus ullamcorper. Nullam eu tristique arcu, eget consectetur nisl. Mauris nec arcu enim. Integer
            erat erat, lobortis pulvinar leo vitae, consectetur pretium nisi.
          </p>
        </div>
        <div class="grid-content noscroll" style="background:lightblue">
          <div>2.0</div>
          <div>2.1</div>
          <div>2.2</div>
          <div>2.3</div>
        </div>
        <div class="grid-content noscroll" style="background:yellow">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id consequat justo. Phasellus feugiat accumsan finibus. Ut a est vel sem sagittis vestibulum. Sed sed fermentum lacus. Nulla fermentum, dui eget hendrerit tristique, tellus nisi blandit sapien,
            ac fermentum orci leo sed enim. Fusce ultrices ipsum at neque ultrices, ornare condimentum augue efficitur. Aenean tempus lacus sit amet augue dapibus ullamcorper. Nullam eu tristique arcu, eget consectetur nisl. Mauris nec arcu enim. Integer
            erat erat, lobortis pulvinar leo vitae, consectetur pretium nisi.
          </p>
        </div>
      </div>
    </div>
  </div>
            

         

Fa2
Rafi Benkual almost 4 years ago

Looking at your output, this looks right: http://codepen.io/rafibomb/pen/NxxWOz

The only thing I would change is to make the red and yellow blocks shorter.