Chopped off top about bootstrap-modal

[jschr]

Hey, I've been trying for a few minutes to try and get it into the same state as the screenshot. The only way I can get to do that is by resizing the screen after the modal is opened. I know about this issue but the only fix I can think of is to watch window resize which I don't really like.

The modal shouldn't be opening up off screen however, which I think is what you're saying. I'm not sure what would causing this but I'll take a look to see if anything jumps out.

[lookfirst]

I did the resize first. Basically resized it to the point where the scrollbars were just barely visible. Then clicked to open the modal. The top of the modal is then chopped off. Personally, I'm ok with watching resize.

[jschr]

I tried resizing to the exact point where the scrollbar appears as well as just after it appears and still no luck. I'm using on Chrome 23.0.1271.64 on OSX 1.7.5 btw.

The reason I haven't wanted to watch resize is I thought it would get messy with multiple modals whereas I've been able to position everything with CSS thus far. Maybe there's some weird window size calculation errors happening. I've had IE behave like that before.

Maybe adding some a buffer to the calculations to make sure the modal is not positioned off screen would be better.

[lookfirst]

I'm on Chrome 23 OSX 10.8. I made the width 1000 and the height 488 on the demo window page. I then scrolled down to show the first 'View Demo' button, then clicked it. I tried to scroll up and the modal was cut off.

The way I first figured this out was with a very tall modal that just happened to be about the full height of the window on my laptop. I tried scrolling up and it was also cut off.

[lookfirst]

Ah yea, it is also definitely happening if I resize the window.

[jschr]

Very weird, I'm still unable to reproduce this. I'm not even sure if adding a resize event would fix the issue you're having.

[vicentereig]

I've have been able to reproduce this by positioning the modal at top: 160px instead of at 50%. Basically due to the contents of the modal being reloaded therefore sometimes changing its height. First time opens perfectly fine, closing the modal and reopening it again leads to the same results as described above.

The CSS I'm using to override the vertical positioning:

.modal {
  top: 160px;
}

.modal.fade.in {
  top: 160px;
}

EDIT: I'm using Chrome Version 23.0.1271.91 on OSX 10.7.5
EDIT: Just for the record, I finally fixed that issue specifying a min-height and left the absolute positioning untouched.

[jschr]

@vicentereig The reason why you were experiencing a similar problem is because the js is still trying vertically center the modal based on it's height by using a negative margin-top.

I've provided the modalOverflow option that when set to true will force the modal to behave as if it is larger then the viewport. In this case, the modal will be positioned at the top instead of centering with top: 1%. You can override this by editing the modal-overflow css rules:

.modal-overflow.modal {
    top: 160px;
}

.modal-overflow.modal.fade.in {
    top: 160px;
}

You can set the modalOverflow a few differenet ways:

1. On the modal element: <div class="modal fade hide" data-modal-overflow="true">
2. In the JS: $modal.modal({ modalOverflow: true });
3. Globally: $.fn.modal.defaults.modalOverflow = true;

[vicentereig]

@jschr Amazing. Thanks for the support.

[jschr]

Still haven't reproduced this but I'm hoping the changes in the 2.1 branch (layout function, window resize) will fix this.

[jschr]

@loofirst If you have some time, I'd love to see if you can still reproduce the issue on the wip-2.1 branch. I'm hoping to roll it out in a few days or so.

[cawoodm]

Press F12 to start the Chrome debugger then launch a modal window. It will be chopped off at the top. Close the debugger and it will be fine.

bootstrap-modal.js v2.2.1 on Chrome 23.0

[lookfirst]

I can't duplicate the chopped off issue which is good, but I did just have one where I opened the modal when the window was not tall, then resized the window to be very tall (while the modal was open) and the modal didn't drop down to the center of the window. Leaving me with something like this: http://take.ms/V8i

Nevermind, I did just duplicate it getting chopped off at the top. http://take.ms/W8i Not entirely sure how I did it, but I hadn't reloaded the window from the one above Oh wait, if I resize it to be responsive: http://take.ms/X8i that is ok, but as soon as I make the window wider (without closing the modal), it gets chopped off at the top: http://take.ms/Y8i I can see it animate upwards and chop off the top.

[jschr]

So I'm really not sure why I can't reproduce what you guys are seeing. I made a screen capture of me using the latest wip-2.1 branch: https://www.youtube.com/watch?v=jEHDRx0kQ0o

Maybe I'm missing something here.

Thanks for your help.

[jschr]

Going to close this for now as I still have not reproduced it and I believe version 2.1 should fix it.

[AaronLS]

@jschr I can reproduce with 2.1 in Win7 IE9, I am using the BrowserStack service to test. If I use IE 10, and use the developer tool to switch to IE9, I do not get the issue, so it seems IE 10's emulator isn't accurate enough to reproduce the issue. Note I had a user with IE9 who had the same issue, which led me to do the testing, so it's not something specific to BrowserStack. Just wanted to clarify that it isn't reproducable in IE10's "IE9 mode"

When experiencing the issue, and attempting to scroll, the background scrolls, but the modal does not move.

[AaronLS]

In my case, margin-top: -216.5px;, and it probably is related to grids in my modal loading via ajax, so modal getting larger.

Using the workaround you provided did solve the issue though:
data-modal-overflow="true"