Datepicker in bootstrap-modal

[piwo1984]

Hi,

I'm using the bootstrap-modal extension from here https://github.com/jschr/bootstrap-modal/
When I attach a datepicker to an input within a modal the picker is positioned far away under the input. I've extended your 'place'-method. Maybe you need it:

place : function() {
            if (this.isInline)
                return;
            var zIndex = parseInt(this.element.parents().filter(function() {
                return $(this).css('z-index') != 'auto';
            }).first().css('z-index')) + 10;
            var offset = this.component ? this.component.offset() : this.element.offset();
            var height = this.component ? this.component.outerHeight(true) : this.element.outerHeight(true);
            var isInModal = this.element.parents('.modal').length;
            var top = offset.top + height;
            if(isInModal) {
                top = top - 40;
            }
            this.picker.css({
                top : top,
                left : offset.left,
                zIndex : zIndex
            });
        },

[KOTRET]

it would help to add some markdown to this post as its not readable...
to wrap the code:

[your stuff here]

[tiagobnobrega]

I just couldn't understand the modal part. Let me see if got it right.

place : function() {
            if (this.isInline) return;
             //get the first parent z-index, then add 10...
            var zIndex = parseInt(this.element.parents().filter(function() {
                return $(this).css('z-index') != 'auto';
            }).first().css('z-index')) + 10;
            //calc offset and height for element/component...
            var offset = this.component ? this.component.offset() : this.element.offset();
            var height = this.component ? this.component.outerHeight(true) : this.element.outerHeight(true);
            var isInModal = this.element.parents('.modal').length;
            var top = offset.top + height;

            //if the element is in a modal subtract 40 from position. why this?
            //with this part the calendar showed covering part of the element.
           // I'm guessing is because your calendar is positioned above the element,
           // In my case its' positioned below the element. So I removed it and worked like charm!
           // Maybe some check is needed here.
            if(isInModal) {
                top = top - 40;
            }
            this.picker.css({
                top : top,
                left : offset.left,
                zIndex : zIndex
            });
        }

[piwo1984]

Hi titbarros,

this is strange. I've attached two images to show you what I mean.
This image shows the "default-view"

With my modifications I get the following result

I've tested it with several browsers like ie, firefox, chrome and safari.

[Yohn]

maybe its your version of the datepicker? I'm using the newest version in jschr's modal plugin and I'm not experiencing this problem either..

[piwo1984]

I've just updated both, the datepicker and the modal........still the same

[ghost]

I had the same issue. My problem was in my personal css, I put a margin-top for section tags. Hope that will help you.

[timraymond]

I've just replicated this with the latest version of this plugin.

[lpaul7]

Same issue with bs 3. Fixed by setting z-index to 1050.

[MaxxSoftware]

Have the same issue. And @timraymond fix doesn't help

[jschmiede]

The easiest way to hack this issue, is to set the z-index to 1050+ on the .modal-dialog div, so the place function sets the picker.css.z-index to 1060+, as shown L550
note: the .modal-backdrop div z-index is set to 1040 by default
here a sample

[acrobat]

Can you guys confirm this is still an issue with the current master (should be fixed in 1.3.1), as #710 fixes issues with z-index

[giaule56]

I have the same problem when scrolling on popup like this

I cannot find the solution

[hebbet]

@giaule56 did you upgrade to 1.3.1?

[acrobat]

I think the issue @giaule56 will be fixed in 1.4.0 with the new container option #918 and the placement fixes from #1227

[acrobat]

Fixed in #1227