search

uxsolutions / bootstrap-datepicker

A datepicker for twitter bootstrap (@twbs)
Apache License 2.0
12.66k stars 6.07k forks source link

Datepicker in modal breaks layout #1496

Open indreksiitan opened 9 years ago

indreksiitan commented 9 years ago

Hi,

I have a user interface which utilizes Bootstrap modal "popups". It's built so that in case the content of the popup is taller than the user's screen, it will extend the modal to the height of the screen and then make the content scrollable.

This works fine, except that if the content contains a datepicker, then, upon opening datepicker, it breaks badly - it breaks the scrolling and extends the modal content to its original length (through top and bottom of the screen, which, though, remains unscrollable, and also outside the modal window horizontally.

Sample:

Before clicking the datepicker (on "Purchase date"): https://www.dropbox.com/s/vju3ppooqvushch/Screenshot%202015-07-21%2012.48.10.png?dl=0

After: https://www.dropbox.com/s/6vujribqcl3en6k/Screenshot%202015-07-21%2012.48.15.png?dl=0

Any idea that might be causing this behaviour?

Bootstrap v3.3.0 jQuery v1.11.1 Bootstrap-datepicker latest and greatest as of today (1.5.0-dev according to package.json)

TIA, Indrek

hebbet commented 9 years ago

the current dist folder in master is not up2date. please try running grunt or use 1.4

indreksiitan commented 9 years ago

I was on 1.4 before. Tried upgrading to 1.5.0-dev to see if it has been fixed.

indreksiitan commented 9 years ago

Here's a test case that reproduces this bug: http://datepickerbug.codelab.solutions

indreksiitan commented 9 years ago

Ah, one more thing - if you open the modal and close it using the escape key (not the "Cancel" button at the bottom), the datepicker will be shown after the modal has closed.

hebbet commented 8 years ago

seems to be fixed with f08ad04, closing.

hebbet commented 8 years ago

@tfr can you test the current master?

indreksiitan commented 8 years ago

Updated http://datepickerbug.codelab.solutions http://datepickerbug.codelab.solutions/ - it seems slightly better in some cases, but definitely not fixed.

Indrek

On 13 Sep 2015, at 21:19, hebbet notifications@github.com wrote:

@tfr https://github.com/tfr can you test the current master?

— Reply to this email directly or view it on GitHub https://github.com/eternicode/bootstrap-datepicker/issues/1496#issuecomment-139901010.

vsn4ik commented 8 years ago

@ttr your link contains not contains actual bootstrap-datepicker (dist). Please update and re test.

indreksiitan commented 8 years ago

What do you mean exactly? It contains the latest master (v1.5.0-dev) that habbet wanted me to test.

vsn4ik commented 8 years ago

@tfr see 7500 line (after {} click in Chrome DevTools (source tab)) in bundled js file (http://datepickerbug.codelab.solutions). Math already removed.

acrobat commented 8 years ago

Yes the dist folder on master could be out of date. What you can do is, regenerate the dist folder locally and then have all the js bundled into 1 file or use the raw bootstrap-datepicker.js with the latest code!

The dist folder is a dev version (master = 1.5.0-dev) are only generated once in a while

indreksiitan commented 8 years ago

Sorry for the delay. Finally got around to doing that (using the js/bootstrap-datepicker.js file directly from fresh clone) - unfortunately, still no cookie.

vsn4ik commented 8 years ago

Hmmm. If width window <= 840px, datepicker worked correctly.

vsn4ik commented 8 years ago

Please update Bootstrap to 3.3.5 and jQuery to 1.11.3. Maybe this is the case.

indreksiitan commented 8 years ago

Vasily - good observation.

Looks like the "breaking point" is 767/768px. The framework logic is that >=768px is considered a desktop and in that case the modal desktop is centered vertically. The function that does the "magic" is BASE.centerModal(), which dynamically calculates the dialog margins and sets the margin-top parameter for the .modal-dialog class.

On mobile devices (window width <768px) the modal is on the top of the screen like Bootstrap default.

I will try to upgrade Bootstrap and jQuery, but looks like this forced margin on the dialog is the issue here.

Thanks, Indrek

indreksiitan commented 8 years ago

I patched the BASE.centerModal() function so that in case of a scrolling dialog (which is top-to-bottom on the screen) it will not set the margin anymore. Now the datepicker is displayed correctly, however, opening the datepicker undoes the stuff done in BASE.resizeContent() function, which sets the dialog height to maximum screen height and makes the .modal-body-content scrollable inside.