Semantic-ui: Window doesnt scroll when modal is larger than viewport

[DveMac]

Can not scroll to content that has overflowed. If there is a lot of modal content, the actions are pushed off the bottom of the viewport.

Tested on Mac OSX 10.8.5 Chrome, Canary, FF, Opera, Safari

[brigand]

Here's a fiddle: http://jsfiddle.net/gHLXd/

[jlukic]

It will scroll, you just added the content after showing the modal in your fiddle. So it didnt calculate the modal size correctly.

You can either call refresh to adjust position after onShow (which is when you'd add content, or just add the content before calling show .

Check the examples on the docs http://semantic-ui.com/modules/modal.html with a small screen height they will swap to scrolling. (Also they will collapse left and right columns)

[brigand]

The problem still persists. Could you show me how to fix this? I should see all integers 0 through 999. I can see up to 276 on my computer.

http://jsfiddle.net/pfBVc/

[brigand]

That's very strange. Why not have the modal scroll, and limit its height to 80% of the viewport height?

The one outstanding problem is that it's resizing the body, but the dimmer appears to have absolute position, when it should have fixed. It creates this problem:

It's also only working about 2/3 times when I refresh the page in Chrome. The other third, it just gets chopped off and the scrollbar isn't large enough.Try on the full screen view of @ProjectCleverWeb's fiddle.

[ProjectCleverWeb]

The problem here is that your function is taking longer to generate the content than it takes to call the modal. @jlukic is there a way to check if the modal content has changed since it opened? Lets say a check every 3 seconds?

@brigand I noticed that it wasn't working _every_ time so I removed the comment.

[brigand]

It shouldn't matter how long it takes to load the content because it's a blocking loop. Just to be sure, I hard coded it into the document, and the fiddle waits for the load event before doing anything.

http://jsfiddle.net/pfBVc/2/

I tried calling .modal("refresh") before and/or after with no change.

[ProjectCleverWeb]

Ok here is something interesting, if the modal is called a second time it appears to always generate correctly. This makes me think that refresh isn't refreshing enough.

@brigand Can you confirm this on your end too?

http://jsfiddle.net/pfBVc/3/

[brigand]

I tried it 10 times, and it worked all of them. I'll dig into the code a
bit later and see if I can figure out why...

Nice debugging :-)

On Fri, Oct 4, 2013 at 8:34 PM, Nicholas Jordon [email protected]:

Ok here is something interesting, if the modal is called a second time it
appears to always generate correctly. This makes me think that refreshisn't refreshing enough.

@brigand https://github.com/brigand Can you confirm this on your end
too?

http://jsfiddle.net/pfBVc/3/

—
Reply to this email directly or view it on GitHubhttps://github.com/jlukic/Semantic-UI/issues/165#issuecomment-25741281
.

[DveMac]

Was there a code change for this issue, or new issues created? Although I managed to fix the scroll by calling refresh it has highlighted two other problems. The dimmer not being resized as mentioned by @brigand and also if you have an active sidebar at the time of refresh, the modal body gets its width extended by the size of the sidebar.

[ProjectCleverWeb]

@jlukic Has this been resolved? I didn't see a commit mentioning this. If it hasn't please re-open the issue.

[robertoles]

Hi, I believe I encountered the same 'issue', I wanted to add a note here for anyone else who may be expecting the modal behave differently.

By default a modal with the 'scrolling' class applied to it no longer centres itself vertically in the viewport, instead it positions itself absolutely to the top of the document (with a small margin to stop it sitting right at the top). The modal content is then allowed to stretch as far down the document as it likes, without any overflow restrictions on the .content element. This can cause the results seen in the jsfiddle @ProjectCleverWeb posted. Where the page dimmer doesn't stretch to cover the height of the modal.

When I first loaded a modal with long content, I expected a slightly different behaviour. I wanted the modal to sit fixed in the bounds of the viewport, and have the .content block scroll instead. I have added the css to achieve this below, however I haven't raised a PR as it seems like this isn't the intended default. @jlukic maybe this could be added as an option to the modal module? i.e { scrolling: 'content' }

.ui.modal.scrolling {
  position: fixed;
  top: 1em;
  bottom: 1em;

  .content {
    position: absolute;
    display: block;
    overflow: auto;
    top: 5em;
    bottom: 5em;
    width: 100%;
  }

  .actions {
    position: absolute;
    bottom: 0px;
    width: 100%;
    box-sizing: border-box;
  }
}

P.S. This might is a slightly cumbersome implementation, it calculates the top / bottom of the content block using the expected heights of the .actions and .header blocks, any changes to the heights of those elements would cause this to break. It is, however, a start for anyone that would like this functionality.

[setthase]

@jlukic - any news on this?

It's still buggy (and as far as I know - not only for me) so it shouldn't be closed, I suppose. You should reopen it or at least add comment with explanation to users why it's closed and what should they do.

[rimmerprod]

Same problem with 0.19.3.

[miroworks]

Same probleme here with 0.19.3
No work around for this? Tried @robertoles css but it still don't work :(

[stanzakh]

In case anybody else has this issue and stumbles upon this thread, I was able to get it to work by calling refresh on the modal in the onVisible callback:

$("#your-modal")
.modal({
    onVisible: function () {
        $("#your-modal").modal("refresh");
    }
})
.modal("show");

[jlukic]

I'm considering moving the modal to flexbox to make vertical centering not require javascript. If anyone wants to experiment with this its available in branch flex

[gdw2]

I'm using meteor's autoform which has dynamically expanding content. Refreshing the modal works until the content is larger than the window itself, at which point, the portion of the content that is off-screen is inaccessible.

[jlukic]

@gdw2 Have you tried using observeChanges or .modal('refresh')

[gdw2]

I've tried .modal('refresh'). I need to investigate more because the demo in the semantic-ui docs scrolls just fine.

[MohammedAl-Mahdawi]

I tried all the solutions that mentioned above and the problem still there, I don't know should I create a new issue or this comment is enough.

I have a modal and I get its content via ajax after showing the modal, the content is bigger than the view port and I cant scroll.

Please what should I do?

[jlukic]

Create a reproducible test case by forking jsfiddle in readme.

[MohammedAl-Mahdawi]

@jlukic Thank you for quick reply, actually I forgot to tell something maybe it cause the issue.
I've prefixed the Semantic UI css (semantic.min.css) with my custom class (using less) like the following:

.Tajer { @import (less) url("semantic.min.css"); }

All the Semantic UI elements and modules goes inside a div have that class.

Everything worked perfectly and I reached to the end of my project but unfortunately this issue appeared.

My modal settings like the following:

$('.ui.modal').modal({ onShow:UserProducts.getModalContent, context:$("div.Tajer"), transition: 'horizontal flip' });

Thank you in advance for your help. Keep up the good work!

[jlukic]

Hi thanks for the kind words. For me to debug I need a standalone reproducible test case. If you want help specifically with your codebase I recommend our Project Talk or Gitter for support.

[MohammedAl-Mahdawi]

Thank you. I'll try Project Talk and Gitter and if I could't find a solution I'll create a reproducible test case and update you here.

[MohammedAl-Mahdawi]

@jlukic I do it!
First of all I want to thank you so much, your quick replies pushed me to find a solution, I touched how Semantic UI have a good author and how I can rely on this library.

Now for anyone have a similar issue and need to know the solution, here is what I've made.

Because I prefixed the library with my custom class I should not target that class in the context modal settings option, I should target another class within that class, now my modal settings like the following:

$('.ui.modal').modal({ onShow: UserProducts.getModalContent, observeChanges: true, context: $("div.tajer-content"), transition: 'horizontal flip' });

This "div.tajer-content" selector is a div inside "div.Tajer".

[jlukic]

Thanks @MohammedThaer. Glad you found an answer to your issue.

[indesignlatam]

I was just having this same problem with content larger than the screen, the modal appears larger than the screen and when scrolling the modal wont scroll but the background (page content) will scroll.

I started playing with the CSS and found that changing to this in the, but when getting to the bottom of the modal it will start scrolling the page content. But at least it scrolls the modal.

Still i dont undestand the issue.

.scrolling.undetached.dimmable.dimmed > .dimmer {
    overflow: scroll !important;
}

By the way, thanks for the great work on this framework.

[avalanche1]

observeChanges helped

[indesignlatam]

I tryed observeChanges and refresh but it wouldnt help.

[avalanche1]

make a fiddle and we'll try to figure it out

[indesignlatam]

I couldnt reproduce the error on fiddle, when doing it on meteorpad i did but it was fixed by aplying observeChanges:true, finally i just added this to my CSS.

.scrolling.undetached.dimmable.dimmed > .dimmer {
    overflow: scroll !important;
}

.scrolling.undetached.dimmable.dimmed{
    overflow: hidden !important;
}

If i can reproduce the problem in the next days i will post it here, thanks.

[avalanche1]

If it doesnt reproduce on fiddle, you should narrow it down in ur project

[jlukic]

If you are using meteor you may want to be using detachable: false to prevent SUI from messing with your DOM

[avalanche1]

I use Meteor as well and it works just fine :smile:

[MaZZly]

Had similar problems with a modal window containing tabs..

One of the tabs was longer and went out of viewport (esp on tablets) and was not scrollable..
The refresh worked without problems by doing:

$('#modal a[data-tab]').on('click', function () {
            $('#modal').modal('refresh');
        });

Just wanted to say if someone has modal and tab problem with scrolling..

[nilsi]

I still have problem with this after trying everything in this thread. I realised it's always working when having the developer console open. Any ideas why this is? its removing cache? or because its lower the height of the viewport?

[nilsi]

If I just first drag in Chrome corners to make window height smaller it works on every try. Any ideas how to solve this?

[avalanche1]

make a jsfiddle or codepen and we'll give it a look

[tripflex]

The observeChanges did not work for me, and using the click method I had to click twice to get it to work correctly.

My solution since I was using tabs, was just to defer calling refresh until the tab was visible:

$( '#my_tabs .item' ).tab({
    onVisible: function( tabPath ){
        console.log( 'Tab visible: ', tabPath );
        $( '#my_modal' ).modal( 'refresh' );
    }
});

[diuzzoli]

I think that the best way to solve this problem is to set the modal with observeChanges in true. By default is in false.

Template.YourTemplate.onRendered(function () {
    $('.ui.modal.yourmodal').modal('observeChanges', true);
});

[vinn1]

I think I fixed this with a simple little one-liner. All you have to do is :

  $('#yourdiv').on('click',function(){
    $('.modal').modal('setting', { detachable:false }).modal('show').addClass('scrolling active');
    $('body').addClass('scrolling');
  });

By hard-coding the 'scrolling' class in the body , it seems to work as I observed that BOTH the modal div and the body acquire a class of '.active.visible.scrolling' when you initiate the modal. But by default, the body does not acquire the 'scrolling' class unless the window is resized. Adding that one line seems to solve that issue for me !

Let me know if this worked for anybody else and if this seems like the right way to go !

[batata004]

I cant believe this bug still happens and nobody cared to solve it. -> https://github.com/Semantic-Org/Semantic-UI/issues/4196

[YLgithub]

The answer of @indesignlatam will solve it

.scrolling.undetached.dimmable.dimmed > .dimmer {
    overflow: scroll !important;
}

.scrolling.undetached.dimmable.dimmed{
    overflow: hidden !important;
}

[batata004]

Thanks! Will that be available in the official repository? If so, when? I use semantic ui in at least 300 websites and it will be freaking boring to add this code to every site.

[lomyal]

@diuzzoli 's solution solves my problem.
Thank you!