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'));
			};
		};
	};