Semantic-ui: [Modal] Resize Causes Scrolling to be Removed
Hi,
Many of my customers have been complaining about this bug and I could never find a way to easily reproduce it. Today I decided I should do that cause yesterday more than 40 people complained about this bug.
To reproduce the bug you need to be using Chrome browser in a computer/notebook at Windows. I am using the most recent version of Chrome and WINDOWS 10. You need to have a screen resolution of at least 1024px (width). Now you just need to open this link:
http://quemfazsite.com.br/temp/bug-semantic-ui.html
After you open it click in the button "CLICK HERE TO OPEN THE MODAL". Ok, fine, a modal will show up. Now click the resize window button of your Chrome browser and resize the width of the window to a smaller one. Now try to scroll down and you cant anymore.
Now, even if you resize your browser window to full width/height you still wont be able to scroll down the modal cause the scrollbars disappeared.
To save you some time I discovered this bug only happens:
1) if you have more than one modal in your code and the buggy modal has to come first in the code (in the code above I have 2 modals but I decided to only show the first one);
2) the content of the buggy modal can be anything that has a tall vertical content which overflows the browser height dimension of the window. In the case above I used a form but you can insert 100's of
inside the modal's content and the bug will still be reproduceable.
I really really hope you can fix this bug cause I use this amazing SEMANTIC UI in many websites and the complains about this problem are just getting bigger and bigger.
batata004
All 33 comments
Upon resizing, the body looses the scrolling class.
So what you could do until a fix is released - as this seems to be really serious - is the following:
$(window).resize(function() { $(body).addClass('scrolling'); });
If that doesn't work, use an interval. Ugly, but works as a workaround.
PhilLehmann
on 30 Jun 2016
@philrykoff thank you so much, I will try that and will come back here to report you if it solved!
batata004
on 30 Jun 2016
I tried your code with the most recent version of jquery and it didnt work. I did some changes to it in order to keep compatibility with recent version of jquery and now it works :)
$(window).on("resize",function() { window.setTimeout(function(){$("body").addClass('scrolling');},500); });
It's not beautiful and it takes sometime to the scroll bars show up after the resize but at least it works. The only problem with this solution is that if the content of the modal is not too big and fits inside the viewport, the scrollbar will show up anyway - which makes the toolbar useless.
But anyway, I hope someone of the SEMANTIC UI team can read this post and publish a fix as soon as possible :)
batata004
on 30 Jun 2016
This is a bug. I'll take a peek
jlukic
on 1 Jul 2016
Ok I think I got the bug.
Referring the example given above http://quemfazsite.com.br/temp/bug-semantic-ui.html
The first modal does not fit the screen while the second does.
Both the modals are modifying the 'scrolling' class on <body>.
On resize the first modal sets the 'scrolling' class then the second modal removes it.
A proper solution would be either be to call refresh() only on the active modal on resize; or attaching the the resize event on the active modal only.
Is refreshing all modals on resize necessary?
anantoghosh
on 5 Jul 2016
Yes, indeed it only happens where there is a second modal. I didnt understand very well your method, but @philrykoff 's suggestion worked fine with little code. Anyawy, do you think this bug will be solved? Or should I use your "refresh()" method to workaround this problem?
batata004
on 5 Jul 2016
refresh: function() {
if (module.is.active()) {
module.remove.scrolling();
}
module.cacheSizes();
module.set.screenHeight();
module.set.type();
module.set.position();
}
In modal.js, checking for active module should solve the problem. I don't know if other function calls are necessary for an inactive modal.
anantoghosh
on 5 Jul 2016
@jlukic should I create a pull request?
anantoghosh
on 5 Jul 2016
any update guys into this? I am still facing this but in at least 7 sites I am using semantic ui.
batata004
on 28 Jul 2016
I will have this in next release.
jlukic
on 22 Aug 2016
Is this bug solved?
batata004
on 14 Nov 2016
I am having a really hard time with this bug. Take a look at this https://www.empresasite.com.br/ and click in the CONTATO link at the top. You will see that the first bug happens right when you click the CONTATO cause the modal windows appears in the wrong place and then you can see another bug, I cant scroll the window to click the buttons in the modal (bottom). Anyway I can get this fixed any time in this year?
batata004
on 2 Dec 2016
@batata004 Until this bug is fixed you can try adding the 'scrolling' class to <body> when "CONTATO" is clicked. If it does not work then try adding it in the onVisible callback.
anantoghosh
on 2 Dec 2016
I did that (adding scrolling) after a timeout of 500ms, 1000ms and even 2000ms but after a while the scrolling class gets removed for no reason. Also, the modal window appears in a strange position, you see, it's not even centralized in the window (vertically and horizontally).
batata004
on 2 Dec 2016
any news about fix for this bug?
shasiuk1
on 8 Dec 2016
Really sad, this bug is almost 6 MONTHS OVER and is a really serious bug and nobody cares. I like semantic ui but it's really sad the dev team takes so long for a fix, if I knew it would take so long I would have removed smeantic ui from my websites and had used another platform like bootstrap where the community is much faster in solving this serious kind of bug.
batata004
on 8 Dec 2016
The solution I decided to use is:
1) imitating 'scrolling' class on body with css
body.dimmable.dimmed > .dimmer {
overflow: auto;
-webkit-overflow-scrolling: touch;
}
2) in onVisible callback add class 'scrolling' to modal element
Kinda works great.
shasiuk1
on 8 Dec 2016
This approach always shows scroll bar even when not needed, at least in my website, maybe in yours it works.
batata004
on 8 Dec 2016
@batata004 Hmm, shouldn't always show since overflow is 'auto' & not 'scroll'. In my case scrollbar is shown only if modal doesn't fit the screen height
shasiuk1
on 8 Dec 2016
Yes, I thought that too and I think I know the problem. Open https://www.empresasite.com.br/ and click CONTATO (top right), click ENVIAR button (bottom of the form) and you will see new content is added to the modal so I probably should call onVisible function again. Your approach is good but I will have to change many website's code cause I use semantic ui in at least 300 websites.
batata004
on 8 Dec 2016
@batata004 you shouldn't need to call onVisible again. I have the same case as you. My solution adds 'scrolling' class to modal and makes sure the body is also scrollable.
Add this to onVisible callback:
// refresh to fix alignment
target.modal('refresh');
// fix scrolling issue
target.addClass('scrolling');
shasiuk1
on 8 Dec 2016
In my understanding the onVisible will only fire at modal being showed. After that, if anything happens inside the modal that increase its size the event will not be called again. Anyway, when I get home I will test again your suggestion. Anyway, I really thank you :)
If your simple solution works, I have no idea why dev people behind semantic ui does not care implementing it, it's so simple and that's a disrescpect not implementing it.
batata004
on 8 Dec 2016
Respectfully I ask: is there any chance that this serious bug will get fixed in this century? It's a very serious bug, if you dont think it's serious just try to use a modal dialog with important info inside it that goes below the fold of the window, you will see it gets never displayed.
batata004
on 1 Mar 2017
May I try to fix this bug? I have been reading the whole thread and I am not sure if there is a pending pull request or not
p2kmgcl
on 26 Apr 2017
@p2kmgcl any help would be amazing!!!!!
batata004
on 26 Apr 2017
There you are. It's a small fix, but please tell me if I missed something from the contributing guidelines and I will modify the pull request :smile:
p2kmgcl
on 26 Apr 2017
@p2kmgcl I know nothing about guidelines of contributing nor from github :( But if someone could confirm that the pull request is approved I would be glad to know!
batata004
on 26 Apr 2017
Add this after the first modal initialization
$(".ui.dimmer.modals").css("overflow-y", "auto");
sa411022
on 10 May 2017
@sa411022 you mean as alternative to my solution?
p2kmgcl
on 13 May 2017
I can confirm the PR fixes this issue. It is merged in next release. Thanks @p2kmgcl
jlukic
on 3 Jul 2017
Hi. I have this problem when I was hiding/showing some elements from my form that was in a modal, these actions were altering the height of the modal. When I opened the modal with fewer elements, and the modal fitted the screen size, the scroll was never appearing the height of the modal was growing. I try putting the scrolling class as suggested, but this didn't work. So I try changing my css to this:
@media (max-height: 700px)
{
.content {
min-height: 560px;
}
}
And worked.
cleberroliveira28
on 16 Jan 2018
that's really sad such an old bug still remains in the repository to be fixed... clearly devs dont want this library to be taken seriously and used in production
batata004
on 16 Jan 2018
What I understand is that semantic defines if the scroll will appear or not based on the height of the modal content when it becomes visible. So I set a minimum height for modal content for small screens with resolutions. This minimum set size must be greater than the height of the dimmer, so forcing it to show the scroll. When I have time I will analyze the semantic code and try to solve it correctly. If it works I'll post it here.
cleberroliveira28
on 17 Jan 2018
Related issues
mixerp
路
3Comments
vinhtq
路
3Comments
miguelmota
路
3Comments
mllamazares
路
3Comments
ghost
路
3Comments
Most helpful comment
Respectfully I ask: is there any chance that this serious bug will get fixed in this century? It's a very serious bug, if you dont think it's serious just try to use a modal dialog with important info inside it that goes below the fold of the window, you will see it gets never displayed.