Issue with drop down menus and #content positioning

[Darth Apple]

I don't recall running into this issue on MyBB 1.6. I could be missing something obvious, but I haven't been able to figure out what is causing this issue.

Basically, when #content is positioned as absolute, MyBB drop down menus position themselves as if the #content container is the top of the page. The only thing that I have changed is the positioning of #content. This is otherwise the MyBB 1.8 default theme.



I've tried setting #container as relative as well, and the problem persists. Is there anything obvious that I am missing here?

Any support is much appreciated,
-Darth Apple

[Darth Apple]

I saw that someone else had run into a similar problem recently, so I figured I'd post the workaround solution I discovered to the issue. Add this before {$stylesheets} in the headerinclude template (your theme -> ungrouped templates -> headerinclude), or create a new JS file if you want to do this properly.

<script>
  
  (function($){
	var current_popup = '';
	var PopupMenu = function(el, close_in_popupmenu)
	{
		var el = $(el);
		var popup = this;
		var popup_menu = $("#" + el.attr('id') + "_popup");
		if(typeof close_in_popupmenu == 'undefined')
		{
			var close_in_popupmenu = true;
		}
		// Opening Popup
		this.open = function(e)
		{
			e.preventDefault();

			if(popup_menu.is(':visible'))
			{
				popup.close();
				return;
			}

			// Setup popup menu
			var offset = el.offset();
			offset.top += el.outerHeight();

			// We only adjust if it goes out of the page (?)
			if((el.offset().left + popup_menu.outerWidth()) > $(window).width())
				var adjust = popup_menu.outerWidth() - el.outerWidth();
			else
				var adjust = 0;

			popup_menu.css({
				position: 'absolute',
			});

			popup_menu.show();

			// Closes the popup if we click outside the button (this doesn't seem to work properly - couldn't find any solutions that actually did - if we click the first item on the menu)
			// Credits: http://stackoverflow.com/questions/1160880/detect-click-outside-element
			$('body, .popup_item').bind('click.close_popup', function(e) {
				if(close_in_popupmenu)
				{
					if($(e.target).closest("#" + el.attr('id')).length == 0) {
						popup.close();
					}
				}
				else
				{
					if($(e.target).closest("#" + el.attr('id')).length == 0 && $(e.target).closest("#" + el.attr('id') + '_popup').length == 0) {
						popup.close();
					}
				}
			});
		}
		this.close = function(e)
		{
			popup_menu.hide();
		}
	}
	$.fn.popupMenu = function(close_in_popupmenu)
	{
		return this.each(function()
		{
			var popup = new PopupMenu(this, close_in_popupmenu);
			$(this).click(popup.open);
		});
	}
})(jQuery);
  
</script>

This just overwrites the default function to remove the "top" and "left" margins that are created by the default function. If you are developing a theme that requires absolute positioning of the wrapper or container, the default popup menu functions will add these margins and will cause the menus to appear away from their container. This was very much a lazy workaround solution, so if anyone has a better solution, feel free to call me out.

[Eric]

Was just about to post something about this in my thread, found it after checking out the original function.

Really the best workaround would be recreating the plugin and containing the dropdowns in a main container, just positioning them relative to that.

[Darth Apple]

Was just about to post something about this in my thread, found it after checking out the original function.

Really the best workaround would be recreating the plugin and containing the dropdowns in a main container, just positioning them relative to that.

I agree. I'm not entirely sure how MyBB 1.6 does the job, but I don't recall running into this issue on 1.6. A lot of themes require absolute positioning for the main wrapper/container, so this is going to be an issue as more developers look into creating themes for 1.8.

[Leefish]

Thanks for this - it was driving me mad. Has it been pushed as a bug?