CODEWITHSUNDEEP
javascripthtmlcsszurb-foundation-6
user3701188
user3701188

Reputation: 678

Foundation XY Grid

I have an XY grid and within it is an offset canvas but in the body of the XY grid. I want offset canvas position left to take the full height of the available space but it is not doing that. It is wrapping the height of the canvas according to the height of the canvas' content. So the canvas height only grows according to the canvas' content height. When I set a height 100% to the off-canvas-wrapper the scrolling messes up.

    <div class="grid-y grid-frame">
    <div class="cell shrink header">
      <button type="button" class="button" data-toggle="offCanvasLeft">Open Menu</button>
      <h1>Grid Frame Header</h1>
    </div>
   <div class="cell auto body">
       
       <div class="off-canvas-wrapper">
         <div class="off-canvas position-left off-canvas-absolute reveal-for-medium" id="offCanvasLeft" data-off-canvas>
           <button class="close-button" aria-label="Close menu" type="button" data-close>
             <span aria-hidden="true">&times;</span>
           </button>
           
           <ul class="vertical menu" data-accordion-menu style="max-width: 250px">
                  <li>
                    <a href="#">Item 1</a>
                    <ul class="menu vertical nested">
                      <li>
                        <a href="#">Item 1A</a>
                        <ul class="menu vertical nested">
                          <li><a href="#">Item 1Ai</a></li>
                          <li><a href="#">Item 1Aii</a></li>
                          <li><a href="#">Item 1Aiii</a></li>
                        </ul>
                      </li>
                      <li><a href="#">Item 1B</a></li>
                      <li><a href="#">Item 1C</a></li>
                    </ul>
                  </li>
                  <li>
                    <a href="#">Item 2</a>
                    <ul class="menu vertical nested">
                      <li><a href="#">Item 2A</a></li>
                      <li><a href="#">Item 2B</a></li>
                    </ul>
                  </li>
                  <li><a href="#">Item 3</a></li>
            </ul>
         </div>
         <div class="off-canvas-content" data-off-canvas-content>
           <p>
             No weapon fashion against me shall prosperNo weapon fashion against me shall prosperNo weapon fashion against me shall prosperNo weapon fashion against me shall prosperNo weapon fashion against me shall prosperNo weapon fashion against me shall prosperNo weapon fashion against me shall prosperNo weapon fashion against me shall prosperNo weapon fashion against me shall prosperNo weapon fashion against me shall prosperNo weapon fashion against me shall prosperNo weapon fashion against me shall prosperNo weapon fashion against me shall prosperNo weapon fashion against me shall prosperNo weapon fashion against me shall prosperNo weapon fashion against me shall 
           </p>
         </div>
     </div>
  </div>
  <div class="cell shrink footer">
    <h3>Here's my footer</h3>
  </div>
</div>

What am I doing wrong here?

CodePen Link

Upvotes: 0

Views: 513

Answers (1)

imBlue
imBlue

Reputation: 114

I hope I understood what you are doing here, but you can use flexbox for this.

.off-canvas-wrapper {
   display: flex;
   height: 100%;
   overflow-y: scroll;
 }

This will make the sidebar max height without a scroll. The "display:flex" will make the child elements not relevant (for a lack of better word) to each others height and rather will just take its own height.

the overflow-y will give your div a scrollbar but only if the height is more than the visible window.

Upvotes: 0

Related Questions