Uploaded image for project: 'XWiki Platform'
  1. XWiki Platform
  2. XWIKI-25705

Closing a Bootstrap modal removes the inline padding-right of fixed navbars when scrollbars take no width

    XMLWordPrintable

Details

    • Bug
    • Resolution: Unresolved
    • Minor
    • None
    • 11.3-rc-1
    • Bootstrap
    • None
    • Unknown

    Description

      Steps to reproduce

      1. Use a browser whose scrollbars do not take any width (macOS with the default "show scroll bars when scrolling" setting, a mobile browser, or headless Chromium).
      2. On a page, add a fixed navbar with an inline right padding, e.g. <nav class="navbar navbar-fixed-top" style="padding-right: 10px">.
      3. Open a Bootstrap modal, then close it.

      Expected

      The navbar keeps its padding-right: 10px inline style.

      Actual

      The inline padding-right of every .navbar-fixed-top and .navbar-fixed-bottom element is removed when the modal closes. The navbar falls back to its stylesheet padding.

      Cause

      Modal.prototype.checkScrollbar sets bodyIsOverflowing to false when document.body.clientWidth equals window.innerWidth, which is always the case with overlay scrollbars. setScrollbar then skips the fixed elements and never saves their inline padding with .data('padding-right'). resetScrollbar still runs on every fixed element and writes back element.style.paddingRight = padding ? padding : '', which clears the inline value it never saved.

      The code comes from upstream twbs/bootstrap PR https://github.com/twbs/bootstrap/pull/27331 (Bootstrap 3.4.0), picked up with XWIKI-16335. Bootstrap 3 is end-of-life upstream, so the fix belongs in xwiki-platform-core/xwiki-platform-bootstrap/src/main/node/js/modal.js: only restore the padding of elements that setScrollbar actually changed.

      Impact

      The XWiki skins and UI do not use .navbar-fixed-top or .navbar-fixed-bottom, so standard XWiki is not affected. Custom skins and extensions that use these classes with an inline padding-right are.

      The unit test "should restore inline padding-right for .navbar-fixed-top and .navbar-fixed-bottom after close" only passed because the QUnit 2 theme kept the default 8px body margin, which made Bootstrap believe the body was overflowing. The QUnit 3 upgrade forces bodyIsOverflowing in that test.

      Attachments

        Issue Links

          Activity

            People

              Unassigned Unassigned
              mleduc Manuel Leduc
              Votes:
              0 Vote for this issue
              Watchers:
              0 Start watching this issue

              Dates

                Created:
                Updated: