Semantic-ui: [Modal] [v2.3.0] Multiple modals incorrect positioning

[DmitryNiko]

Hi,
It seems that in v2.3.0 was removed the fixed positioning for the modals, which leads to incorrect positioning when multiple modals is active.

https://semantic-ui.com/modules/modal.html#/examples

[w96k]

If old behavior is just modal on top of another modal, then adding position: fixed should fix this issue

[DmitryNiko]

Yes, it fixes. But there is another problem with alignment... If one of the modal is scrollable, all modal will be aligned to the top, because to the scrollable modal added the property justify-content: flex-start; in latest version.

[jlukic]

I will address this, this weekend. Clearly broken.

[jlukic]

I've had to move this back, absolutely positioned elements in flexbox have only modern browser support, and even then there are issues when multiple modals are shown at same time that are both scrolling and not.

Most likely will have to work a mixture of JS positioning and flexbox as is necessary per-browser.

[brianespinosa]

@jlukic Does this mean we will end up being able to compile styles for modals that either use flexbox for positioning or styles that do not? I am trying to find out based on our issues over on Semantic-UI-React regarding these changes. If SUI is going to support compiling styles that do both, we need to handle either case in our components.

[jlukic]

Most likely this will be flexbox for all browsers except some kind of fallback for IE11 that uses javascript positioning. There might be a world where I can use flexbox without absolute positioning, but it would require modifying the DOM structure when using multiple modals, which would be bad for anyone who expects them to be adjacent.

I think i'll have a conclusive solve in the next few weeks.

For now I recommend anyone who uses overlapping modals to just use the modal definition from 2.2.x

[nferrario]

Hello, I was just trying to find a workaround and I noticed that adding the scrolling class to every dialog inside the dimmer container fixes the margin issue and adding it to body will fix the scrolling issue. It seems there's a problem with the JavaScript file, because scrolling class gets removed from all those components even when the children height sum is bigger than the container's.

Tested on Opera 52.0.2871.40 and Firefox 59.0.2. Tried up to 4 dialogs.

Update: I fixed the issue by forcing the can.fit() return value to false (line 9560), and I didn't find any trouble with it

[jjylha]

Can you fix this asap please....

Adding the position position: fixed etc. to modals will only mess up scrolling.. right?

[anjapadu]

I have the same problem.

The problem is with the fixed and with the top/left properties

[moak]

up ? I have the same problem

[nferrario]

Check out what I wrote above. You can edit that line on the uncompressed .js file (semantic.js) and it'll work without any problem. I think that method could even be removed in a future release because it's useless as far as I've tested (version 2.3.1)

[moak]

I build my bundle with docker, I can not control whats inside I mean .. I dont see myself doing that everytime I deploy do I ?

[nferrario]

I don't know, I'm not using Docker and I don't know what files are deployed. If you could find that file, you should be able to edit that line. I just proposed a commit to have this fixed in the next release, if the developer allows it

[codeaid]

So what's going on with issue? It's been 2.5 months since it was reported and all we have is links to other issues that get closed and linked back to this.

Should people start thinking about alternatives seeing how Semantic UI is not getting the same attention as it used to? I've used it in a couple projects but soon I will need to choose a UI library for a new project and at this point I'm not sure if I should risk and go with Semantic UI or not.

Not hating or anything, just curious.

[zhangyuanliang]

I hope the authorities can solve this problem as soon as possible. It has been bothering me for a long time.

[jeff3dx]

Still a problem in the latest version.

[nferrario]

I sent a workaround commit and they rejected it. If you really need it soon ASAP, use my solution posted above. I'm using it in production, and it's relatively good (you may see some flickering eventually or have the last modal's bottom without margin). Yet it's the best alternative I found, and the simplest one

[king2]

Just for information: I met behavior where modal somewhere 'sticks' to top, somewhere not.
I tried to play with code and found that modal sticks to top when I have dropdown initialization line:
$('.ui.dropdown').dropdown();
With this line commented out, modal opens centered and everything is good.
Maybe this will help to find the problem.

p.s. dropdown init adds (dont know why) 'scrolling' class to modal window, and this makes it stick to top. After I click to dropdown inside window, it magically centers at middle of page. After close and open modal window reopens sticked to top again.

[lc-stevenzhang]

Still a problem in the latest version. It drives me nuts.

[GammaGames]

Still in 2.3.3, should it be in the 2.3.4 milestone instead?

[jlukic]

@lc-stevenzhang This should be fixed in #6562