Dropdown is out of place

[live627]

From my question on Stack Overflow https://stackoverflow.com/questions/77738288/sceditor-dropdown-is-out-of-place

When I create the sceditor like in the example, the dropdowns that appear when clicking on the font icon appears in its normal place.

      var textarea = document.getElementById('example');
      sceditor.create(textarea, {
          format: 'bbcode',
          icons: 'monocons',
          autofocus: true,
          style: '../minified/themes/content/default.min.css'
      });

However, once I specify my own toolbar, the dropdown is moved off screen and I have to scroll down for ages to find it.

      var textarea = document.getElementById('example');
      sceditor.create(textarea, {
          format: 'bbcode',
          icons: 'monocons',
          autofocus: true,
          style: '../minified/themes/content/default.min.css',
          toolbarContainer: document.getElementById('toolbar')
      });

Any way to correct the positioning while having a custom toolbar?

I eventually figured it out

Custom toolbars are outside the sceditor container, which has a relative position. According to https://stackoverflow.com/a/14107783/4710434

By definition offsetTop returns the top position of the object relative to the top side of its offsetParent element, in pixels.

Now offsetParent needs to be an element with a position other than static. If you change the position attribute of scroll element in your fiddle I get a value of 1012 as opposed to 1110 without the position attribute.

Therefore, remove the relatie position specifier for .sceditor-container` from the CSS file.

Now, the dropdown is relative to the doucment's body, and must be moved. Fortunately, editor.createDropDown() can be overridden via a simple plugin

  sceditor.plugins.fix = function ()
  {
      let editor;

      this.init = function ()
      {
          editor = this;
          const fn = editor.createDropDown;
          this.createDropDown = function (menuItem, name, content) {
              fn(menuItem, name, content);
              document.body.appendChild(document.querySelector('.sceditor-dropdown'));
          };
      };
  };