Skip to content
This repository has been archived by the owner on May 29, 2019. It is now read-only.

display issues when opening modal #5183

Closed
jessehart opened this issue Jan 8, 2016 · 25 comments
Closed

display issues when opening modal #5183

jessehart opened this issue Jan 8, 2016 · 25 comments
Labels
component: modal needs: investigation
Milestone
1.1.0

Comments

@jessehart
Copy link

reproducible on demo: http://angular-ui.github.io/bootstrap/#/modal

issue 1:
open modal and pay attention to the page in the background. notice it shifts down briefly before returning to normal.

issue 2:
turn off animation. open a large or small modal and pay attention to how the modal content area displays as its opened. notice it shrinks or expands before displaying as expected.
@icfantv
Copy link
Contributor

icfantv commented Jan 8, 2016

Thanks for the report.

@jasonwells
Copy link

I am experiencing the same issue. It looks like for me it is rendering the content of the modal (with code from angular such as Modal Content: {{ variableHere }} inside the top of the page before moving it to the modal window which is why it is shifting down while opening.

@LeleDev
Copy link

LeleDev commented Jan 9, 2016

same here

@serhalp
Copy link

serhalp commented Jan 9, 2016

This is preventing us from upgrading our apps to 1.0. All our karma tests that open modals are broken, and I can't figure out how to fix them. They look like this:

screen shot 2016-01-09 at 3 32 46 pm

where the contents above the navbar should be in a modal. I've blindly tried a few combinations of $digest()ing and $timeout.flush(), but nothing seems to trigger a proper render. Not sure if relevant, but I can also see in the DOM that the .modal-backdrop is present, and "obscuring" the entire page, including what should be the contents of the modal – so the modal contents can't even be interacted with correctly.

As far as I can tell, these are all the changes in 1.0.0 that affected modals: 726ccc3 b8969d1 e9c4977 2635f0d 742132a e28cced. I imagine this has to have been introduced in one of those?

@icfantv
Copy link
Contributor

icfantv commented Jan 10, 2016

@jasonwells, @serhalp - please do not hijack the thread. If you are experiencing the same issue then all you need to do is indicate thus - or better yet, help us investigate the issue. If you are experiencing a different issue, then you need to follow the instructions here.

Secondly, all of you need to make sure you look at the CHANGELOG to ensure none of the breaking changes affect you. By far the biggest one is the removal of all the old directive names. Prior to 1.0, but only in 0.14.x, you would get deprecation warning messages in your console about the change and how to mitigate (namely add a uib- prefix).

Finally, 1.0 is only compatible with Angular 1.4+, so please make sure you're using that.

All that said, we're aware of the original issue posted by @jessehart.

@philBrown
Copy link
Contributor

Seeing this too.

What appears to happen is an element looking like

<div uib-modal-window="modal-window" window-class="..." size="..." index="0" animate="animate" modal-animation="true">
    <!-- modal template here -->
</div>

is inserted at the top of the <body> element. As this element has none of the standard modal CSS classes, it appears as a block of content at the top of the page.

The modal dialog should be cloaked / hidden until it is completely compiled.

@philBrown
Copy link
Contributor

I'm currently working around this via the following CSS

body > [uib-modal-window]:not([modal-render]) {
    display: none;
}

@Domitnator
Copy link

Seeing this too!

@mattlewis92
Copy link
Contributor

Confirmed that the workaround posted by @philBrown works as a temporary fix, thanks for that! 😄

@bboyle
Copy link

bboyle commented Jan 11, 2016

have also seen this bug (tip: use the 'break on subtree modifications' debug option to catch it step by step) Appears that the modal contents are added to the DOM, then removed, then added and displayed properly, causing a flash (our pages don't scroll much so we see the modal content appear briefly)

ty @philBrown for interim fix!

@icfantv icfantv mentioned this issue Jan 11, 2016
Closed
@deeg deeg mentioned this issue Jan 12, 2016
Closed
@wesleycho wesleycho added this to the 1.0.4 milestone Jan 12, 2016
@onumossn onumossn mentioned this issue Jan 12, 2016
Closed
@OACDesigns
Copy link

as well as the flash of the un-compiled template, the modal should be appended to the body/appendTo element, not prepended as is currently the case.

@tomca32 tomca32 mentioned this issue Jan 14, 2016
Merged
@icfantv icfantv mentioned this issue Jan 14, 2016
Closed
@athimannil
Copy link

@philBrown Thanks for the solution mate 👍

@philBrown philBrown mentioned this issue Jan 18, 2016
Closed
@cynrichuysAE cynrichuysAE mentioned this issue Jan 18, 2016
Closed
@Reboog711
Copy link

I was experiencing the same issue. Extra Kudos to @philBrown as his work-around fixed it for me too.

@dcrouch79 dcrouch79 mentioned this issue Apr 25, 2016
Closed
@Craig1f
Copy link

Craig1f commented Jun 1, 2016

The fix from @philBrown has no effect for me. Has anyone else had trouble getting it to work?

@zdonato
Copy link

zdonato commented Jun 5, 2016

@Craig1f I was able to get it to work by adding an element at the bottom of my body and then using the appendTo option of the open method.

@Craig1f
Copy link

Craig1f commented Jun 6, 2016

I have no idea why nothing I try has worked. I tried the appendTo also.

This gets me what I need:
app.config(['$modalProvider', function($modalProvider) {
$modalProvider.options.animation = false;
}

The backdrop still kind of flickers, but the modal itself no longer flickers at the end, so it's less irritating. It'll do for now.

@zdonato
Copy link

zdonato commented Jun 6, 2016

@Craig1f Originally the appendTo wasn't working for me, so not sure if you ran into this as well or not but appendTo works with angular's $document.find function from jqLite which only works on element tags. This is what worked for me:

appendTo: $document.find('add-modal')

and in the modal template I have an empty element at the bottom of the body:

@sskasim
Copy link

sskasim commented Jun 9, 2016 •
edited
Loading

philBrown's work around works for me too. Thanks.

@jmusser73
Copy link

jmusser73 commented Jul 21, 2016 •
edited
Loading

@philBrown's workaround worked for me.

@Benjanver
Copy link

@philBrown thanks mate

@bmsdave
Copy link

bmsdave commented Oct 31, 2016

@philBrown, you genius!

@Gu3
Copy link

Gu3 commented Nov 18, 2016

@philBrown, 2 words : Thanks You !

@NachoColl
Copy link

In my case it shifts to the right, so I just added:

body.modal-open {
padding-right: 0!important;
}

@krazylearner
Copy link

is there any official fix for this ? my whole app looks bad due to this

@thargenediad
Copy link

still required @philBrown's CSS fix in late 2018

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
component: modal needs: investigation
Projects
None yet
Milestone
1.1.0
Development

Successfully merging a pull request may close this issue.

fix(modal): compile modal before inserting into DOM onumossn/bootstrap