Semantic-ui: Modal: Bad position on second show

[mishak87]

When modal showed for second time it "falls" half bellow screen.

var self = $('.ui.modal');
self.modal({
  onShow: function () {
    self.modal('refresh'); // does NOT help
    setTimeout(function () {
      self.modal('refresh');
    }, 1000); // does help 1s is probably overkill
  }
});

My uneducated guess is position is computed and set only first time when modal is shown and second time default CSS makes it fall.

Modal includes some generated items by KnockoutJS but items are not added between shows.

[jlukic]

I can't reproduce any issues from modal docs related to positioning.

Can you make a jsfiddle?

[mishak87]

OTR I sent you private demo on your email.

[iamhatesz]

Same problem as you.
I noticed that after window being closed, margin-top property has still a value. If I set it to 0 via Chrome Inspector it'll show up properly. Even on docs page (http://semantic-ui.com/modules/modal.html) problem occurs. Clicking on "run code" for the second time returns non-centered modal.
Any ideas?

[ab192130]

Same problem for me

[jlukic]

This isnt occurring for me in Chrome/Safari/FF.

Can someone give me their exact browser version and OS who can see this issue?

[iamhatesz]

OS: Microsoft Windows 7 HP (build 7601, Service Pack 1, latest updates)
Browser: Google Chrome 33.0.1750.117 m (latest for me)

[jlukic]

I'm seeing this in chrome as well on windows 7. This is a bug will fix ASAP

[mishak87]

:heart:

[rottingcorpse]

Having same issue, ff/chrome/opera @ ubuntu 14.04 b2

[hacknightly]

It looks like having a set height on the modal fixes this issue for me

[lucidNTR]

same here problem is solved by setting explicit height of modal...

[FrostBy]

bug is still reproduced

[jlukic]

Thanks, could anyone create a JSFiddle that will reproduce the issue?

This might be related to having a parent with a _3D acceleration_ trigger like backface-visibility or transform

[FrostBy]

@jlukic
I have reproduced the error due to the overridden ".hidden" property
.hidden{
display: none!important;
}
http://jsfiddle.net/d93af/13/

[jlukic]

I'm using FF 28, Windows 8 and cannot reproduce the error using your JSFiddle.

Am I missing something?

[rottingcorpse]

My problem was caused by .hidden with !important as well. +1

P.S. Linux ff latest stable, chromium latest stable

[FrostBy]

@jlukic
see the link below
http://goo.gl/ATWsaS

[jlukic]

It looks like modals were rebuilding cached sizes on every show instead of just on browser resize. Bad!

I've also fixed modals to work with css that has a rule like .hidden { display: none !important; }

[kwolniak]

I have the problem with wrong position on 2+ show.
It works OK with semantic 0.15.5. Newest version still have this bug, but when the document or window size is changed, margin of the modal is fixed.

Windows 8
Chrome 34

[jlukic]

@kwolniak Are you having this problem on the docs page or just your site? Can you provide a test-case for this error with latest SUI?

[kwolniak]

@jlukic One the docs page all examples works fine.
Here you have test-case: https://dl.dropboxusercontent.com/u/871494/semantic/modal/modal.htm

Click one the red "WYCOFAJ" button in the table row (column "Akcja").

[kwolniak]

Whatever the solution to this problem? If you can't see the issue on the demo test-case I can record a video. I updated test-case to SUI 0.18.0. I've also simplified the example test-case: https://dl.dropboxusercontent.com/u/871494/semantic/modal/modal.htm

[kwolniak]

I found solution.

When I run modal in this way, the issue occurs

$('.modal').modal({ detachable:false }).modal('show');

In this way, everything works OK

$('.modal').modal('setting', { detachable:false }).modal('show');

[jlukic]

I'm not seeing any issue in your test case with Windows 7 Chrome 36. Whats your GPU?

[kwolniak]

I'm preparing 20 seconds video: http://youtu.be/TraRzL7YFsw?hd=1
for this test case: https://dl.dropboxusercontent.com/u/871494/semantic/modal/modal.htm
My environment:
Windows 8.1, Chrome 35, HP ENVY TouchSmart Ultrabook 4-1130ew 14", Intel HD Graphics 4000

[eserini]

I have the same problem but suggested fixes didn't work for me, basically on semantic.js 0.17.0 line 5962 I get an Uncaught TypeError: Cannot read property 'height' of undefined

screenHeight: function() {
    if(module.cache.height > module.cache.pageHeight) {
        module.debug('Removing page height');
        $body.css('height', '');
    }
},

module.cache results as undefined. I fixed the issue by calling module.cacheSizes() inside the above screenHeight function. Then in event.show() I called module.refresh() again and it worked.

Happens both on Firefox 30 on Windows 7 and Chrome 35 on Windows 8 and also with Semantic 0.18.0

[jlukic]

@eserini I'll test out this fix

[MadisonRong]

@eserini I got the same error even my version is 1.11.5

[jlukic]

@eserini I've removed those lines from #2576. Check against 2.0.3 when I release today.

[fuatsengul]

I was getting same problem at 2.0.7, and @kwolniak's solution fixed my problem for now.

[jlukic]

If someone has a test case let me know

[escaroda]

Yeah, somehow modal('setting') solve this issue. (Win 10, Firefox 40, Semantic UI 2.0.8)
Problem appears when you start using parameters (settings) for modals:

.modal("show") //works great
.modal({allowMultiple: false}).modal("show") //works bad

So I've end up with:

.modal('setting', {allowMultiple: false}).modal('show')

[jlukic]

Still having issues reproducing this
http://jsfiddle.net/h3oxngx7/

[fuatsengul]

I think the content is the problem.
I use a dynamically rendered content (meteor-autoform) and it creates DOM contents when the modal has shown. I see very fast transition that the modal loading into screen with no content and after it grows with the content. But it won't fill the screen. It's keeping the start position same as empty state.

[fuatsengul]

observeChanges just saved my life :)
Probably it will solve everyone's problem :)

$('.myModal')
      .modal( {
        observeChanges: true,
      })
      .modal('show');

[louis-cl]

Had same issue, only with "basic" modal though.
Also solved with:
.modal('setting', {}).modal('show')
instead of
.modal({}).modal('show')

[MrOutput]

+1

[David-Tsui]

How about the image loaded in modal?
I can not make the modal locate in correct location if the image contents in modal are generated before modal showing.

[DavidePastore]

Thanks @speciose and thanks @Kyezil, your solutions work!

[adhatama]

The solution from @speciose and @Kyezil works for me. Thanks!

[dubsky]

For me this issue happens when I set detachable:true.
When I applied the solution mentioned above, the detachable setting was not applied and therefore the positioning problem disappeared.

I looked into the code and the problem is when detachable=true, on the second show the modal content height is evaluated on a hidden element (too soon) and evaluates to 0, which is wrong.

As a workaround I used the following:

    $('#xxx').modal({ detachable:false, observeChanges:true }).modal('show').modal('refresh');

[Andrew1431]

None of these fixes are working for me. I have a long form that extends past the page. All works fine, until I have scrolled down and press submit. Upon pressing submit, the modal jumps down and has a huge top margin and is cut off at the bottom of the screen. (Because of a error messages div opening up with a list of all the form invalidation)

trying the .modal('setting', { ... }) is not working for me. Refresh, etc nothing is working :)

[bmalum]

doubled (2nd delayed for 100ms) refresh does recenter the Modal - but does not look nice :/

[VasilyShelkov]

so in my case despite doing

$('.ui.modal')
.modal('attach events', '.button', 'show')
.modal('setting', {
    detachable: false,
    observeChanges: true,
    blurring: true,
    transition: 'vertical flip'
});

Although after doing some CSS comparisons with the examples in the docs, I found that the only difference and what was causing this is some file that just does not exist and isn't mine in http://localhost:8080/scss/_modal.scss which is applying this css to the modal

.modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    display: none;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    outline: 0;
}

Any ideas why this is ?

[aborn]

@dubsky 's solution can fix the similar problem

[haneefkassam]

OP's workaround (setting timeout onShow) was the only thing that worked for me (tried all the workarounds posted on this issue).

[fuatsengul]

My observation:
Problem happens when modal content creating dynamically and changing the content before second show. So modal calculates its vertical centering offset first and it's getting wrong after content has changed.

So my solution is deleting and re-creating whole element rather than replacing its content.

If your environment is similar of mine, it's solid solution.

BTW: add a little delay between creating element and calling it.

[hitchcott]

@fuatsengul bingo. setting breaks react unfortunately, but your solution worked.

    this.setState({ modal: args });
    setTimeout(() => {
      $modal.modal('show');
    }, 1)

[jiang-ning]

hey guys, I meet the same problem on "semantic-ui#^2.1.8", I replaced two css defines in my custom css file(because the whole semantic-ui in my .gitignore), and it works fine for me:
@media only screen and (max-width: 767px) { .ui.modal { margin: 0 auto; left: 0; } } @media only screen and (min-width: 768px) { .ui.modal { margin: 0 auto; left: 0; } }
the 'left:0' is for replace 'left:50%' in class '.ui.modal'

[raviroyind]

This is still a bug, modal opens at different position when opened second time.

[blacksmithblack]

setTimeout works for me.

Is this problem due to the positioning taking place before the modal has fully loaded?

[mklnz]

I'm using Semantic UI with Ember and having the same issue. I've tried all the fixes detailed here and I'm not really having any luck. setTimeout works, but over a slow connection this can be unpredictable.

[blacksmithblack]

@mklnz ... I ended up loosing the modal ... I tried the following but it caused more problems further down the line. It goes through any div's inside the modal, calculates their individual height and changes the height of the modal.

$(modalID).children().each(function (index, object) { modalHeight += $('#' + object.id).outerHeight(true); }); $(modalID).animate({height: modalHeight},400);

If you are having problems over slow connections use the 'onVisible' call back?

[bartoszkwiedacz]

I have the same problem.
First fire of modal:
<div class="ui modal image-comment scrolling transition visible active" style="top: 0px; display: block ! important;">
Second fire:
<div class="ui modal image-comment transition visible active" style="margin-top: -143.5px; display: block ! important;">

Also in second time there is no scrolling class on dimmer element.

[mklnz]

After digging around I find the problem with my case is Ember inserts and updates the DOM dynamically, and inserts an image inside the modal div. However, this image has not started loading yet, hence the overall height of the modal container is 0.

Semantic then calculates this as 0 and then shows the modal as margin-top of 0 (calculated). Only after the image actually loads the container has a height, in which case the centering is now incorrect.

I suppose I can find some way to "preload" the image perhaps, before showing the modal?

[raviroyind]

Entire Semantic-UI framework is fucked up with lots of bugs, the toggle switch does not work after opening & closing modal. I am switching back to bootstrap.

[neokio]

Thank you @kwolniak and @fuatsengul ... the combination of your discoveries solved my problem.
For me, the only thing that worked was this:

    $('#modal').modal(
        'setting', {
            observeChanges: true,
            // other params here
        }
    );

[amitpatil321]

.modal{
height: 500px !important;
}

I dont know how but this solution worked for me. I have 3 modal closing and opening after another. and they are in a loop.

[skwny]

Is there a solid workaround for this yet? I'm getting the same issue. On first open, it's perfectly centered on the screen. On second open, It's positioned at the top of the screen. I've tried recommendations here but no luck :/

[Practice0]

My solution was to brute force the css ie
$(“#modal”).modal({
onDeny: ...
onApprove: ...
}).modal(“show”);

$(“#modal”).attr(“style”, “top: 10px”);

So I replace the inline styles put in by Semantic UI with my own positioning. In my personal case, it hasn’t broken anything else and seems to be consistently working. I also don’t need it to follow an element but just to show up in full-screen mode in the same position on each open so this works fine for me. Hope this helps!

[skwny]

Thanks for that. Unfortunately I went ahead and made a reusable modal :/ Not as good as semantic but what can you do?

[magiksd]

Hello, I have this issue too, but only in Firefox. For my project, I have fixed it by scrolling the dimmer to 0 :

$('#modal').modal('show');
$('.ui.modals.page.dimmer')[0].scrollTo(0, 0);

[MahmonirB]

I solved it,
Go to main.js in js folder and change overflow from visible to hidden in this code: $('body').delay(350).css({'overflow': 'hidden'});