CODEWITHSUNDEEP
javascriptjquerymodal-dialogsemantic-ui
Alyas
Alyas

Reputation: 630

Semantic UI - Mobile Scrolling Disabled Once Modal Opens (and remains disabled even after modal is closed)

I am using Semantic UI 2.3.2and having page scrolling problem on mobile, once modal is loaded the page scrolling function is disabled (even modal is closed after).

This behavior can even be experienced on official site https://semantic-ui.com/modules/modal.html just try to "Run Code" for any example modal, and then try to scroll page.

Searching through, I have already tried using observeChanges settings without any help.

P.S. You must check the link on mobile browser. I have tested on Android/Chrome.

Upvotes: 3

Views: 2343

Answers (3)

Orienteerix
Orienteerix

Reputation: 473

I got scrolling to work by using the Formantic-UI modal.js from their GitHub as suggested in the comment for the issue shared in the answer by @Alyas.

So, in practice in the index.html after the <script src="lib/semantic-ui/semantic.min.js"></script> I added <script src="lib/formantic-ui/modal.js"></script> and that made scrolling work.

Upvotes: 0

Bumptious Q Bangwhistle
Bumptious Q Bangwhistle

Reputation: 4759

I fixed it by commenting out a line in modal.js. I'm not comfortable doing it as I'm not certain of any repercussions, but it was the only way I could get it to work. My version of modal.js is 2.4.2. Here is the code:

 scrollLock: function() {
        // touch events default to passive, due to changes in chrome to optimize mobile perf
        $dimmable.get(0).addEventListener('touchmove', module.event.preventScroll, { passive: false });
      }

I commented out the line $dimmable.get(0).addEventListener('touchmove', module.event.preventScroll, { passive: false });

That line of code disables scrolling (module.event.preventScroll) when the user does a 'touchmove', which prevents the dropdown from scrolling. Commenting out the line fixed the problem for me.

Upvotes: 1

Alyas
Alyas

Reputation: 630

So this was a Confirmed Bug on Semantic UI 2.3.2 https://github.com/Semantic-Org/Semantic-UI/issues/6449

I have resolved it by downgrading the Semantic UI to 2.3.1 which has fixed the issue. So anyone facing the same problem can downgrade to resolve it for now until it's fixed in 2.3.2.

Upvotes: 2

Related Questions