grid-block inside modal not scrollable

[soumak77]

I'm trying to create a modal dialog that has a scrollable element. I'm using the modal factory with the following template:

<div class="grid-content shrink text-center">
  <h2>Level {{ project.level.number }} - {{ project.level.name }}</h2>
  <h4>{{ project.level.description }}</h4>
  <a class="button primary" ng-show="!project.stage.task" ng-click="project.stage.start();">Next</a>
</div>
<div class="grid-block vertical fadeIn" ng-show="project.stage.task">
  <div class="grid-content shrink" ng-repeat="stage in project.level.stages">
    <h2>Stage {{ stage.number }}</h2>
    <ul>
      <li ng-repeat="task in stage.tasks">Task {{ task.number }} - {{ task.description }}</li>
    </ul>
  </div>
  <div class="grid-content shrink text-center">
    <a class="button primary" ng-click="close()">Go Code!</a>
  </div>
</div>

When not inside a modal, the .grid-block.vertical element content is scrollable. I noticed there is an overflow: hidden set on the modal. When I change that to overflow: scroll I can scroll the modal, but I can't seem to get it so that only the .grid-block.vertical element is scrollable and not the entire modal. Is this a bug or is there something I'm missing?

[gakimball]

Generally grid blocks don't scroll, only content blocks. Looking at your markup, I would expect the first element (with the <h2> and <h4>) to be fixed at the left, the last element (with Go code!) to be fixed at the bottom right, and the middle element to be fixed at the top right, and scrollable. What's your intended behavior?

Edit: Unless the entire modal is a vertical grid, in which case I would expect all three elements to stack vertically. The top and bottom ones don't move, and the middle one scrolls. This is the intended behavior of the grid.

[soumak77]

@gakimball Yes this is for a vertical grid. The intended behavior is what I'm after, however, the grid system experiences this bug only when inside a modal. Let me find a smaller example to showcase my issue.

[soumak77]

@gakimball Here's a smaller example:

<div class="grid-block vertical">
  <div class="grid-content shrink text-center">
    <h2>Modal Header</h2>
  </div>
  <div class="grid-block vertical">
    <div class="grid-block shrink" ng-repeat="x in [1,2,3,4,5,6,7,8,9,10,11,12,13]">
      <div class="grid-content">
        <p>Content {{ x }}</p>
      </div>
    </div>
  </div>
  <div class="grid-content shrink text-center">
    <a class="button primary">Next</a>
  </div>
</div>

Using the above modal template along with ModalFactory, the middle .grid-block.vertical element is not scrollable as expected.

[gakimball]

I wouldn't expect the .grid-block.vertical element to scroll, just the .grid-content areas. I think the HTML of this modal can be refactored.

Assuming you want to anchor elements at the top and bottom, and keep the middle open to show content, you can do this:

<div class="grid-block vertical">
  <div class="grid-content shrink text-center">
    <h2>Modal Header</h2>
  </div>
  <div class="grid-content">
    <div ng-repeat="x in [1,2,3,4,5,6,7,8,9,10,11,12,13]">
      <p>Content {{ x }}</p>
    </div>
  </div>
  <div class="grid-content shrink text-center">
    <a class="button primary">Next</a>
  </div>
</div>

The top and bottom have .shrink, so the middle section is expanded. The elements added with ng-repeat fill in the middle space.

[soumak77]

@gakimball Using the exact markup you provided does not work as expected. Have you tried doing this inside a modal? All examples I've tried which have scrollable grid elements work as expected on a basic page, but not when inside a modal.

I think I may have found the issue. The two root elements for a modal are shown below:

<div class="modal-overlay" ...>
  <aside class="modal" ...>
  </aside>
</div>

The modal class provides the flex styling as flex: 0 0 auto, however, the aside element is styled to be display: block. Since the element is being displayed as a block, it is not respecting the flex styling. If I add the following css, the scrolling behavior works as expected:

aside.modal {
  display: flex;
}

[soumak77]

@gakimball do you think my proposed change to add display: flex to the modal class is acceptable? I made the change locally in the framework and noticed the example modals in the docs were then being displayed as a horizontal grid. I'm not sure if there is a non-breaking change that can be made to fix this issue, though if there is please let me know.

[gakimball]

There needs to be a distinction between modals that use the grid and ones that don't. A plain modal has padding and is display: block, while a grid modal has no padding and is display: flex. If we consider a plain modal to be the default (which is sensible, since it's the simpler form of a modal), then we need a class, maybe .grid, for modals to shift them into grid mode.

Whatever solution we use here should be applied to panels and off-canvas as well, which are two other components that have these two modes.

[sgentile]

Having the same issue - modal doesn't respect scrollable content.

[neoighodaro]

Was this ever fixed? Still having this issue.

[soumak77]

This hasn't been addressed yet. You'll have to apply the fix yourself with CSS.