CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapfullcalendar
Wyrm
Wyrm

Reputation: 29

Fullcalendar bootstrap popover gets hidden

I have problems with my bootstrap popovers gets hidden under the rows in full calendar. I call the function eventRender.

I have tried container: 'body', it doesn't work. Also trigger: 'focus' doesn't work either.

As you can see its a function, and it gets called after AJAX: success..if that's what's causing this problem?

My Code:

   function showCalendar(userID){

        $('#calendar').fullCalendar({
            header: {
                left: 'prev,next today,month',
                center: 'title',
                right: 'prevYear,nextYear'
            },
            selectable: true,
            selectHelper: true,
            eventRender: function(event, element){
                var dStart = event.start.format("DD MMMM");
                element.popover({
                    animation:true,
                    placement:'top',
                    html:true,
                    title:dStart,
                    trigger: 'click'
                });
            },
            showNonCurrentDates:false,
            weekNumbersWithinDays:true,
            locale: 'sv',
            weekNumbers: true,
            navLinks: true, // can click day/week names to navigate views
            editable: true,
            eventLimit: true, // allow "more" link when too many events
            eventSources: [

                // your event source
                {
                    url: 'DATA/events.json' ,
                    type: 'GET',
                    data: {
                        userID: userID
                    },
                    error: function() {
                        alert('there was an error while fetching events!');
                    }
                }
            ]
        });

    }
Here is a JSFiddle: https://jsfiddle.net/pfsfdekp/3/

Upvotes: 2

Views: 3016

Answers (1)

ADyson
ADyson

Reputation: 61829

The documentation at https://getbootstrap.com/docs/3.3/javascript/#popovers states:

When using popovers on elements within a .btn-group or an .input-group, or on table-related elements (<td>, <th>, <tr>, <thead>, <tbody>, <tfoot>), you'll have to specify the option container: 'body' (documented below) to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the popover is triggered).

In your particular case I think the top of the popovers are being hidden because they are appended to the DOM within the <td> of the calendar cell, but are too big for it, so because of the absolute positioning used, any part of the popover which falls outside the dimensions of the <td> gets clipped. I'm not absolutely 100% sure this is the correct technical reason, but from observation that's what appears to be happening (e.g, if you change the popover's "top" value from -30px to -10px, you can see more of it, but the top bit outside the calendar day cell is still missing).

Anyway, to fix it simply add that option to the popover configuration:

element.popover({
    animation: true,
    placement: 'top',
    html: true,
    title: dStart,
    trigger: 'click',
    container: 'body' //extra option
});

This causes the popovers to be appended to the main <body> tag of the DOM, where they are not constrained by a table cell. Since they are positioned absolutely, they still appear in the right place in relation to the event they are associated with. You may append it to any DOM element you wish, but body is simplest in this case.

https://jsfiddle.net/pfsfdekp/4/ demonstrates a working version.

P.S. You mentioned in the question that you'd tried this already, but from what I can observe in the JSFiddle, there's no reason it shouldn't be possible.

Upvotes: 2

Related Questions