billpull / knockout-bootstrap

A plugin that adds custom bindings for twitter bootstrap objects such as tooltips and popovers.
233 stars 69 forks source link

Fix popover position when using foreach binding #13

Closed netarrow closed 11 years ago

netarrow commented 11 years ago

When using a foreach binding, the position of the popover is calculated before binding is applied, so a smaller height is used and the popover appears moved down relative to the trigger element. This fix recalculates the position after the bind.

kirtapatrik commented 11 years ago

For left, top and bottom position, we have to correct the left position. https://github.com/billpull/knockout-bootstrap/pull/14

                var triggerElementOffset = $(element).offset();
                var triggerElementHeight = $(element).outerHeight();
                var triggerElementWidth = $(element).outerWidth();

                var popover = $(popoverInnerEl).parents('.popover');
                var popoverHeight = popover.outerHeight();
                var popoverWidth = popover.outerWidth();

                var arrowSize = 10;

                switch (popoverOptions.placement) {
                    case 'left':
                        popover.offset({ top: triggerElementOffset.top - popoverHeight / 2 + triggerElementHeight / 2,
                                         left: triggerElementOffset.left - popoverWidth - arrowSize
                        });
                        break;
                    case 'right':
                        popover.offset({ top: triggerElementOffset.top - popoverHeight / 2 + triggerElementHeight / 2 });
                        break;
                    case 'top':
                        popover.offset({ top: triggerElementOffset.top - popoverHeight - arrowSize,
                                         left: triggerElementOffset.left - popoverWidth / 2 + triggerElementWidth / 2
                        });
                        break;
                    case 'bottom':
                        popover.offset({ top: triggerElementOffset.top + triggerElementHeight + arrowSize,
                                         left: triggerElementOffset.left - popoverWidth / 2 + triggerElementWidth / 2
                        });
                }
            }