[Modal] scrolling modal + multiple modals

[gwokae]

jsfiddle result page

If I opened multiple modals and both parent (1st) and child (2nd) modal are .scrolling, the child modal will append after parent modal.

My workaround is forcing child modal's height lower than browser's height to avoid such condition. Is there any suggestion?

[jlukic]

I will have to postpone triage until after 2.0 launch, but marked for later review.

[startswithaj]

@jlukic could you explain the reasoning behind the "undetached" class. There are situations where you want to have multiple modals open each with their own backdrops/dimmer so you can bind click events to them.

In my specific use case I set detachable to false and i put the modal inside its own dimmer. But it applies this undetachable class that adds

.scrolling.undetached.dimmable .ui.scrolling.modal {
  position: absolute;
  left: 50%;
  margin-top: 3.5rem !important;
}

But its not really detached its just in its own dimmer.

The way I could see this being fixed is that when .modal() is called it traverses the dom tree up from the element to see if it is already inside of a dimmer or if its immediate parent is a dimmer. If it is it gets left where it is detachable or not.

Currently if detachable is true. AllowMultiple is true. You have 2 dimmers and you call .modal() it clones the modal dom into the other dimmer, and you get 2 sets of dom.

My current work around is

$modalWindow.modal
            allowMultiple:true
            detachable: false
$body.removeClass 'undetached'

[lauri-elevant]

I'm also having the same issue. I believe there should be an option to have the modal create it's own dimmer, overlaying what's previously on screen (be it some inline content or another dimmer/modal),

[jlukic]

The logic for supporting all possible variations of context, detached, undetached etc get a little murky. I have much more experience debugging the general case.

If anyone can contribute a specific test case that's acting peculiar I'd love to take a look.

[Aniel]

I have the same issue. Here is my test case http://jsfiddle.net/LLLLcpLL/

[nandastone]

Another test case for this issue, based on the documentation multiple modals example (http://semantic-ui.com/modules/modal.html#multiple-modals):

http://jsfiddle.net/nandastone/sxjahn1k/3/

[awgv]

Another test case from #5351:

When using modals with a certain amount of content height, the two modals will be fitted underneath each other.

This is quite annoying when using a modal with a variable height. When changing from some content into another the modal might jump to the bottom of the page?

Fiddle where two modals are fitted underneath
Fiddle where two modals are on top of each other because content height lowered

This is caused by the longer modal getting display: static;
When doing this on larger monitors the display: static; modal will be placed at the very back of the modals showed.

[prajwal88]

@jlukic @Banandrew any quick fix to it ( [Modal] Multiple modals are underneath each other. #5351)

[jlukic]

I believe I have a fix in this patch release.

position: static was causing the element to appear behind even though it is later in the DOM, however it should be fine to use position: relative; so long as we reset the top/left offset.