Page MenuHomePhabricator

Above-positioned PopupWidgets are not correctly positioned with a static parent
Open, Needs TriagePublic

Description

I don't know it is a bug of PopupWidget or FloatableElement, or whatever.
PopupWidgets are not correctly positioned when it appends to an element that has position: static style.
position: 'above' option gives a buggy result, but maybe some other options give buggy results, too.

Visit my jsfiddle to see the bug:
https://jsfiddle.net/lens0021/nqsmeaz4/22/

(text version below, same as jsfiddle)

<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/oojs/5.0.0/oojs.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/oojs-ui/0.39.2/oojs-ui.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/oojs-ui/0.39.2/oojs-ui-wikimediaui.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/oojs-ui/0.39.2/oojs-ui-wikimediaui.min.css" />
    <style>
      body {
        border: 1em solid red;
      }

      body.relative {
        position: relative;
      }

      .target {
        background: yellow;
        width: 10em;
        margin: auto;
        line-height: 2em;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <input type="checkbox" id="relative" />
    <label for="relative"><code>position: relative;</code></label>
    <div class="target">target</div>
    <script>
      const popup = new OO.ui.PopupWidget({
        $content: $(`<p>Lorem ipsum.</p>`),
        autoFlip: true, // default
        position: 'above',
      });

      $('.target').append(popup.$element);
      popup.toggle(true);

      document.querySelector('#relative').addEventListener('change', () => {
        document.body.classList.toggle('relative', this.checked);
      });
    </script>
  </body>
</html>

Event Timeline

Lens0021 created this task.Jul 2 2020, 3:25 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJul 2 2020, 3:25 PM