bootstrap.native: There is a serious problem with the relative positioning of the Popover when changing the container.

The problem is, if you specify a container, the indent is still calculated from the document body. In the original bootstrap 5, the calculation is done correctly. In the original bootstrap 5, there is a problem with reinitialization. To see the problem, call this code on the page http://thednp.github.io/bootstrap.native/v5.html and on the page https://getbootstrap.com/docs/5.0/components/popovers/.

(function (){
    let lib = window.bootstrap || window.BSN;
    console.log(lib);

    let container = document.querySelector('main') || document.getElementById('use');
    container.innerHTML = '<div class="bd-intro">' +
        '<button id="test-popover" type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="Popover title" data-bs-content="And here\'s some amazing content. It\'s very engaging. Right?">Click to toggle popover</button>\n' +
        '</div>' + container.innerHTML;
    let element = document.querySelector('#test-popover');
    element.parentNode.style.position = 'relative';
    new lib.Popover(element, {container: element.parentNode, trigger: 'click'});
})();

image image

About this issue

  • Original URL
  • State: closed
  • Created 3 years ago
  • Comments: 15 (15 by maintainers)

Commits related to this issue

Most upvoted comments

I confirm that everything is working properly! =) Thank you very much!