scrolling behavior for large modals

[samselikoff]

I'm having a hard time getting the styling just the way I want it for large modals. Essentially I want want Trello has:

Scrollbar on right, modal scrolls up and down.

I used flexbox to style the modal and overlay, but the problem is on scroll. Since the overlay is a sibling of the modal, calculating its height is the problem. If it's just fullscreen (something like 100vh), when your mouse cursor is over the overlay, the modal won't scroll:

This is because the overlay is 100% height so, there's no overflow to scroll. Without using JavaScript I don't see a way to get its height to adjust - and even when I set it manually, I saw some strange visual quirks.

I'm wondering if it'd be possible to opt-out of the .ember-modal-overlay element, and to have the click event fire close from the #modal-overlays element? Or possibly even drop the .ember-modal-overlay altogether, and #modal-overlays would essentially also act as the overlay. That way it would wrap the content, making styling with flexbox (and other strategies) easier. Thoughts?

[lukemelia]

This would be a useful feature.

The modal-overlays div should not be functional IMO, besides being the attachment point for the modal. There is nothing in this library to prevent rendering multiple modals into modal-overlays, so having it fire close would be strange since it wouldn't be clear what component it should be routed to. We could consider making the modal a child of the ember-modal-overlay element.

[lukemelia]

This would be a useful feature.

The modal-overlays div should not be functional IMO, besides being the attachment point for the modal. There is nothing in this library to prevent rendering multiple modals into modal-overlays, so having it fire close would be strange since it wouldn't be clear what component it should be routed to. We could consider making the modal a child of the ember-modal-overlay element.

[varblob]

@samselikoff I've been using this styling

.ember-modal-overlay {
  height: 100vh;
  left: 0;
  opacity: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 50;
}
.ember-modal-dialog {
  z-index: 50;
  position: absolute;
  left:50%;
}

.ember-modal-dialog > div{
  position: relative;
  right: 50%;
}

.ember-modal-overlay.translucent {
  opacity: 0.77;
  filter: alpha(opacity=15);
  background-color: #808080;
}

along with alignment top to handle large models. I haven't put it through the any sort of rigorous testing yet so use with caution.

[varblob]

@samselikoff I've been using this styling

.ember-modal-overlay {
  height: 100vh;
  left: 0;
  opacity: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 50;
}
.ember-modal-dialog {
  z-index: 50;
  position: absolute;
  left:50%;
}

.ember-modal-dialog > div{
  position: relative;
  right: 50%;
}

.ember-modal-overlay.translucent {
  opacity: 0.77;
  filter: alpha(opacity=15);
  background-color: #808080;
}

along with alignment top to handle large models. I haven't put it through the any sort of rigorous testing yet so use with caution.

[smartlaksh]

yes @lukemelia you're right. Also the modal should retain the center position even after the content height & width changed in the run time.

[smartlaksh]

yes @lukemelia you're right. Also the modal should retain the center position even after the content height & width changed in the run time.

[samselikoff]

agree. i think we should make the modal a child of ember-modal-overlay. havent had time to come back to this yet.

[samselikoff]

agree. i think we should make the modal a child of ember-modal-overlay. havent had time to come back to this yet.

[lukemelia]

Addressed by #79

[lukemelia]

Addressed by #79