Issue: Drop down menu 'view' doesnt work on mobile

Issue Tools
- View Changes

October 31, 2016 7:09 AM

Alfa1

Distinguished Member

Drop down menu 'view' doesnt work on mobile

This screenshot makes it clear:
https://www.vaultwiki.org/xf/index.p...eenshot.14061/
the drop down goes outside of the screen.

Issue Details

Issue Number 4751

Issue Type Bug

Project VaultWiki 4.x Series

Category Styling / CSS

Status Fixed

Priority 3 - Loss of Functionality

Affected Version 4.0.14

Fixed Version 4.0.16

Milestone (none)

Software DependencyXenForo 1.x

License TypePaid

Users able to reproduce bug 0

Users unable to reproduce bug 0

Attachments 0

Assigned Users (none)

Tags (none)

October 31, 2016 9:46 AM

pegasus

VaultWiki Team

Confirmed. It is important to note that this only happens when the user is not logged in. For logged in users, the body width is wider because of the profile and Alerts menus, so the View menu does not get pushed off-screen. The expected behavior is to match the profile menu when the width is so low: to bound the drop-down by both the left edge of the content as well as the right edge, and to move the alignment from the pop-up control link to the left bound if the left bound is touched.

Reply
October 31, 2016 2:01 PM

Alfa1

Distinguished Member

Actually it does happens for logged in users. I just tried to replicate it here

Reply
November 8, 2016 4:48 PM

Alfa1

Distinguished Member

This is not fixed in 4.0.15

Reply
November 9, 2016 9:48 AM

pegasus

VaultWiki Team

This was not stated to be fixed in 4.0.15. Most style issues that did not prevent features from working had to be pushed to a future version. If we tried to fix everything in one release, it would be many months between each release, because new reports are constantly coming in.

Reply

November 9, 2016 12:54 PM

pegasus

VaultWiki Team

Fixed in the next release. In vault/resources/js/popup.js, find:

Code:

		var sX = this._body.getX();
		var eX = this._body.get('offsetWidth');
		var wX = this._body.get('winWidth');
		var tX = sX + eX;

		if (tX > wX)
		{
			var nX = this._ctrl.getX();
			var neX = this._ctrl.get('offsetWidth');

			this._body.setX(parseInt(nX + neX - eX));
		}

Replace with:

Code:

		this._body.setStyle("left", null);
		this._body.setStyle("right", null);

		var sX = this._body.getX();
		var eX = this._body.get('offsetWidth');
		var wX = this._body.get('winWidth');
		var tX = sX + eX;

		if (tX > wX)
		{
			if (eX > wX)
			{
				this._body.setStyle("maxWidth", wX + "px");
				this._body.setX(0);
			}
			else
			{
				var nX = this._ctrl.getX();
				var neX = this._ctrl.get('offsetWidth');
				var fX = parseInt(nX + neX - eX);

				if (fX < 0)
				{
					fX = 0;
				}

				this._body.setStyle("maxWidth", null);
				this._body.setX(fX);
			}
		}

November 10, 2016 11:39 AM

Alfa1

Distinguished Member

I cant find that code in
vault/resources/js/popup.js
Could you check that file on my server?

Reply

November 10, 2016 12:08 PM

pegasus

VaultWiki Team

Your popup.js is probably minified. In the minified file, the find code would be:

Code:

var b=this._body.getX();a=this._body.get("offsetWidth");var c=this._body.get("winWidth");b+a>c&&(b=this._ctrl.getX(),c=this._ctrl.get("offsetWidth"),this._body.setX(parseInt(b+ c-a)));

November 10, 2016 12:59 PM

Alfa1

Distinguished Member

I probably did that wrong then, because now the drop down doesnt work at all.

Reply
November 10, 2016 2:24 PM

Alfa1

Distinguished Member

Actually no drop downs work now.

Reply
November 10, 2016 2:27 PM

pegasus

VaultWiki Team

You didn't paste the full replacement code (notice the scrollbar)... I have added the rest of the code and popups work now.

Reply
November 10, 2016 3:15 PM

Alfa1

Distinguished Member

Thanks!

Reply

+ Reply

All times are GMT -4. The time now is 6:52 AM.

This site uses cookies to help personalize content, to tailor your experience, and to keep you logged in if you register.
By continuing to use this site, you are consenting to our use of cookies.

Learn more… Accept Remind me later

Welcome to VaultWiki.org, home of the wiki add-on for vBulletin and XenForo!

Issue: Drop down menu 'view' doesnt work on mobile

Issue Tools