I put this at the bottom of the page but it opens downwards so only a couple of options are visible and the user has to scroll. I'm using the javascript option so I can show the flags.

Anyway I can make it open upwards?

Comments

manfer’s picture

manfer commented
Status: Active » Fixed

The problem is present on the msDropDown javascript library used in language dropdown switcher. Specifically on the function that calculates if it must be opened down or up.

	var shouldOpenOpposite = function() {
		var childid = getPostID("postChildID");
		var main = getPostID("postID");
		var pos = $("#"+main).position();
		var mH = $("#"+main).height();
		var wH = $(window).height();
		var st = $(window).scrollTop();
		var cH = $("#"+childid).height();
		var css = {zIndex:options.zIndex, top:(pos.top+mH)+"px", display:"none"};
		var ani = options.animStyle;
		var opp = false;
		var borderTop = styles.noBorderTop;
		$("#"+childid).removeClass(styles.noBorderTop);
		$("#"+childid).removeClass(styles.borderTop);
		if( (wH+st) < Math.floor(cH+mH+pos.top) ) {
			var tp = pos.top-cH;
			if((pos.top-cH)<0) {
				tp = 10;
			};
			css = {zIndex:options.zIndex, top:tp+"px", display:"none"};
			ani = "show";
			opp = true;
			borderTop = styles.borderTop;
		};
		return {opp:opp, ani:ani, css:css, border:borderTop};
	};

If we analyze the check it does:

if( (wH+st) < Math.floor(cH+mH+pos.top) ) {

we can see that only would work when the select is on the normal flow of the page in which case the offset and the position are the same, but as soon as the select is inside a floated element and the page is scrolled down that check will fail. This is my proposed solution. 

	var shouldOpenOpposite = function() {
		var childid = getPostID("postChildID");
		var main = getPostID("postID");
		var pos = $("#"+main).position();
		var offset = $("#"+main).offset();
		var mH = $("#"+main).height();
		var wH = $(window).height();
		var st = $(window).scrollTop();
		var cH = $("#"+childid).height();
		var css = {zIndex:options.zIndex, top:(pos.top+mH)+"px", display:"none"};
		var ani = options.animStyle;
		var opp = false;
		var borderTop = styles.noBorderTop;
		$("#"+childid).removeClass(styles.noBorderTop);
		$("#"+childid).removeClass(styles.borderTop);
		if( (wH+st) < Math.floor(cH+mH+offset.top) ) {
			var tp = pos.top-cH;
			// if((pos.top-cH)<0) {
			// 	tp = 10;
			// };
			css = {zIndex:options.zIndex, top:tp+"px", display:"none"};
			ani = "show";
			opp = true;
			borderTop = styles.borderTop;
		};
		return {opp:opp, ani:ani, css:css, border:borderTop};
	};

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.