Tempus-dominus: Issue when control is inside modal with overflow: scroll

[byounathan]

The calendar popup appears 'inside' the modal when it is show with overflow set to scroll. Here is an example fiddle:

http://jsfiddle.net/4w00f7sf/

[GearTheWorld]

I think I tried every possible option with z-Index and position relative and I never been able to make the calendar go outside. I'm out of idea and I need a workaround fast

[GearTheWorld]

I tried widgetParent but with no luck.

[tamkeen-tms]

@GearTheWorld Have you found a solution for this issue?

[GearTheWorld]

https://stackoverflow.com/questions/12978254/twitter-bootstrap-datepicker-within-modal-window

[zdarovka]

+1

[AdnanBoota]

any solution for this?

+1

[William-H-M]

I'm going to give a straight forward "simple" way to solve this, we willl just need a class.

The thing is that the widget by default use position: absolute the problem with that is that then will render inside of the modal body _if_ overflow-y is used, so how do we fixed? Simple, we change it to a _fixed position_ :D (no pun intended...)

So just add to your modal that use this scroll thing this rule:

.overflow-y {
  overflow-y: scroll;
}

And then we can add this beautiful hack that maybe you will need to chagen a little for your own case:

.modal-body.overflow-y .bootstrap-datetimepicker-widget {
  position: fixed;
  top: 80px !important;
  right: 50px !important;
}

And with that, is all done.

Is this gonna be add to the code... NO. why? Not all case are the same so this will broke other peoples things

[fsevenm]

I'm going to give a straight forward "simple" way to solve this, we willl just need a class.

The thing is that the widget by default use position: absolute the problem with that is that then will render inside of the modal body _if_ overflow-y is used, so how do we fixed? Simple, we change it to a _fixed position_ :D (no pun intended...)

So just add to your modal that use this scroll thing this rule:

.overflow-y {
  overflow-y: scroll;
}

And then we can add this beautiful hack that maybe you will need to chagen a little for your own case:

.modal-body.overflow-y .bootstrap-datetimepicker-widget {
  position: fixed;
  top: 80px !important;
  right: 50px !important;
}

And with that, is all done.

Is this gonna be add to the code... NO. why? Not all case are the same so this will broke other peoples things

Tricky, but help. thanks