negative margin-top on desktop browsers

[isapir]

I added this patch and it does a nice job. it definitely fixes many issues with mobile browsers.

I see a problem with desktop browsers, though. if I do not include the javascript, then on Chrome it works fine, while on IE the modal box is opened towards the bottom of the page.

when I add the javascript though, both on Chrome and on IE the modal box has a negative margin-top which takes the top of the box out of the viewport.

I get for the modal class an inline-style of margin-top: -151px;

where is it coming from and how can I fix it?

this is using bootstrap-modal.js v2.2.5

TIA

[jschr]

What version of BS are you using? The latest (2.2.6) contains fixes for BS3.3 so that could be your issue.

[isapir]

BS v2.3.2

but please note that as mentioned above I'm using bootstrap-modal v2.2.5

does bootstrap-modal set margin-top inline to the .modal element?

[isapir]

sorry, I was using v2.2.6 without the latest patch 2.2.6...master which threw me off when I reported the version.

I downgraded to v2.2.5 and am still experiencing the same issue.

I also sent you an email in case it went to junk box.

thank you.

[isapir]

the problem occurs at
https://github.com/jschr/bootstrap-modal/blob/master/js/bootstrap-modal.js#L146

145:    this.$element
146:        .css('margin-top', 0 - this.$element.height() / 2)    // offensive line
147:        .removeClass('modal-overflow');

I'm not sure why it affects me but not all of the other users though (since no one has reported it thus far).

[jschr]

@TwentyOneSolutions do you have an accessible page or a jsfiddle where I can see the issue?

[jschr]

I believe the issue is being caused by conflicting styles:

Make sure the bootstrap-modal.css file is inserted after boostrap.css

[isapir]

Thank you! I had customized the modal in the past and had some leftovers of that that caused the issue.

I really appreciate your time and expertise.