Semantic-UI: Modal: Bad position on second show

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.

About this issue

Original URL
State: closed
Created 10 years ago
Comments: 64 (15 by maintainers)

Commits related to this issue

Fixes #614, issue with modal vertical position on multiple shows — committed to Semantic-Org/Semantic-UI by jlukic 10 years ago
Fixes #614- issue with modal position interfering with some common css rules. Fixes issue with cache being cleared on each show — committed to EcomEric/Semantic-UI by jlukic 10 years ago

Most upvoted comments

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.

+25

raviroyind on Jul 21, 2016

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');

+15

kwolniak on Jun 10, 2014

observeChanges just saved my life 😃 Probably it will solve everyone’s problem 😃

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

+11

fuatsengul on Aug 16, 2015

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');

+10

dubsky on Oct 23, 2015

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.

fuatsengul on Apr 4, 2016

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')

escaroda on Aug 13, 2015

setTimeout works for me.

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

blacksmithblack on Jun 28, 2016

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

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

IstoraMandiri on May 13, 2016

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

louis-cl on Aug 19, 2015

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

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

rottingcorpse on Apr 11, 2014

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

FrostBy on Apr 11, 2014

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

hacknightly on Mar 30, 2014