diff --git a/src/js/modules/infragistics.ui.popover.js b/src/js/modules/infragistics.ui.popover.js index ff042b93e..1adf8a096 100644 --- a/src/js/modules/infragistics.ui.popover.js +++ b/src/js/modules/infragistics.ui.popover.js @@ -1083,7 +1083,7 @@ }, _rightPosition: function (trg) { var right = $.ig.util.offset(trg).left + trg.outerWidth(), - parentRight = $.ig.util.offset(trg.offsetParent()).right + trg.outerWidth(); + parentRight = $.ig.util.offset(trg.offsetParent()).left + trg.offsetParent().outerWidth(); if (right > parentRight) { right = parentRight; } @@ -1103,7 +1103,7 @@ leftBoundary = win.scrollLeft(); topBoundary = win.scrollTop(); $containment = this.options.containment; - if (this.options.containment) { + if ($containment) { if (leftBoundary < $.ig.util.offset($containment).left) { leftBoundary = $.ig.util.offset($containment).left; } @@ -1130,6 +1130,12 @@ if (top < topBoundary) { top = topBoundary; } + /* Try to fit the popover within the contaiment if poosible */ + if (this.oDir === "right" && + $containment && + left + trg.outerWidth() > rightBoundary) { + left = rightBoundary - trg.outerWidth(); + } } /*D.K. 7 Apr 2015 Fix for bug #190611: When direction is right and mouse over the last column popover is shown to the cell on the left When the direction is right, don't recalculate 'left', show it even if it is in the invisible area */ diff --git a/tests/unit/popover/specific/specific-test.js b/tests/unit/popover/specific/specific-test.js index bd6aece80..ddec1199e 100644 --- a/tests/unit/popover/specific/specific-test.js +++ b/tests/unit/popover/specific/specific-test.js @@ -46,4 +46,48 @@ QUnit.test("Test popover when initialized on multiple items without ID on the pa throw er; }); +}); + +//bug https://github.com/IgniteUI/ignite-ui/issues/1918 +QUnit.test("Test popover when containment, direction and position are specified", function (assert) { + var divElement = `
+ +
`; + var self = this, done = assert.async(), popover; + this.testUtil.appendToFixture(divElement); + $('#containment').css({"background-color": "bisque", + width: "500px", + height: "400px", + margin: "50px 0 0 100px", + display: "flex", + "flex-flow": "column", + "align-items": "center", + "justify-content": "center"}); + $("#right").igPopover({ + containment: $('#containment'), + direction: "right", + position: "end", + height: 100, + width: 300, + showOn: 'focus', + closeOnBlur: true + }); + + this.testUtil.wait(200).then(function () { + $("#right").trigger("focus"); + self.testUtil.wait(100).then(function () { + done(); + popover = $('#right').data().igPopover.popover; + var containmentRect = $('#containment')[0].getBoundingClientRect(); + assert.ok(popover.length > 0 && popover.closest(document.documentElement).length > 0 && popover.is(":visible"), "Popover element should exist and should be visible"); + assert.ok(popover.position().left > containmentRect.left, "Popover is positioned correctly"); + assert.ok(popover.position().left + popover.outherWidth() < containmentRect.right, "Popover is positioned correctly"); + assert.ok(popover.position().top > containmentRect.top, "Popover is positioned correctly"); + assert.ok(popover.position().top + popover.outherHeight() < containmentRect.bottom, "Popover is positioned correctly"); + }); + }).catch(function (er) { + assert.pushResult({ result: false, message: er.message }); + done(); + throw er; + }); }); \ No newline at end of file