CODEWITHSUNDEEP
csstwitter-bootstrapfullcalendarpopoverfullcalendar-scheduler
Billa
Billa

Reputation: 5266

Fullcalendar with bootstrap popover z-Index issue

I am trying to integrate full calender scheduler and bootstrap popover. However, I am getting the UI issue with this.

I tried setting the z-index for popover as well as for my popover inner html. Nothing works.

Here is my fiddle link https://jsfiddle.net/87977p1x/5/

Clicking on event 2 you can see the popover. Here is the popover code inside fullcalander

eventRender: function (event, element) {

                    element.popover({
                        trigger: "click",

                        title: '<div class="label label-lg label-primary col-xs-12">' + event.title + '</div>',
                        html: true,
                        content: '<div style="width:70px">My content goes here.. blahhh blahhhh<div><div> Some more content in this div having more nested HTML</div>',
                        template: '<div class="popover" role="tooltip"><div class="arrow"></div><div class="popover-content"></div></div>'

                    });
                }

enter image description here

Tried a lot for past 3 days couldn't find out why its going behind the event, even though I increase z-index..

Upvotes: 2

Views: 3772

Answers (2)

mozgras
mozgras

Reputation: 3325

I prefer to attach it to .fc-scroller so that when the calendar is scrolled, the popover will scroll with the event. 

                element.popover({
                    trigger: "click",
                    container:$(element).closest('.fc-scroller');
                });

Upvotes: 0

Murali Murugesan
Murali Murugesan

Reputation: 22619

Based on the other question Fullcalendar with Twitter Bootstrap Popover, I applied container:'body' it works..

 element.popover({
                    trigger: "click",
                    container:'body',
                    // other settings...

                });

Working JSFiddle

Upvotes: 3

Related Questions