Scroll for long modals

[yavorskiy]

Thanks for your efforts, excellent written modal windows.

In modal windows there is not enough behavior when the content of the window is larger than the screen height - the scroll that works for the modal window should appear. Before you wrote modal windows, I used my own on the principle of dynamically created components. To solve this problem I wrote this:

  openModal(): void
  {
     let window: any = this.windowService.deviceWindow.window;
     let body:   any = this.windowService.deviceWindow.document.body;
     let modal:  any = this.modalWindowElement.nativeElement;
     let loader: any = this.modalWindowElement.nativeElement.parentElement;

     this.templateService.templateSettings.centeredToasts = true;

     this.overflowContainer.animate(new Transition('fade', 300));

     modal.classList.add('active');
     modal.style.top = '50%';

     setTimeout(() =>
     {
        let scrollDifference: number = window.innerHeight - (modal.offsetHeight + 100);

        if(scrollDifference < 0)
        { // For long modal
           modal.classList.add('scrollable');
           body.classList.add('dimmable');
        }
        else
        { // For a modal window that is placed on the height of the screen
           let offsetTop: number = ( (modal.offsetTop - modal.offsetHeight / 2) * 100 ) / window.innerHeight;
           modal.style.top = offsetTop.toString() + '%';
        }

        loader.classList.add('disaper');
        modal.classList.add('show');

     }, 150);
  }

.dimmable {
  overflow: hidden; // Prevent body scroll
}

.scrollable {
    position: static !important; // Change modal position to static for scroll appers 
    margin: rem(50) auto !important;
  }

It's сlumsy decision witch works with real DOM that violates the angular concept, but I could't think of another solution to cling classes.

My project uses your solutions in almost every component. I would like to replace my modal windows with yours for the formation of a single project ecosystem, but without this feature I can't do this, since I work with large arrays of information in modal windows.

This feature is implemented in Semantic UI. On their site you can see the behavior of modal windows, when they are larger than the screen height.

[edcarroll]

I've just released 0.8.1, which contains this feature.

Modals now automatically start scrolling if their contents no longer fits on the screen. However, if you're loading in content dynamically, and know the modal will be huge (they don't autoresize) then you can set mustScroll to be true and it will position it appropriately.

I hope this enables you to make use of my components for everything!