Mobile View Admin Menu Panel Broken in Nop 4.1

1 year ago
The administration menu system seems to be massively broken in Nop 4.1.

When using Chrome on an iPhone 7 with the latest iOS, it's almost impossible to navigate - especially the submenus. For some reason, the submenu gets overlayed onto the parent menu, and when you try to push a submenu option, it will only choose an option from the parent menu (in other words, you can see the submenu options displayed, but they are inaccessible).

Usually it can be fixed by refreshing the page (sometimes), but it's sure to be a big annoyance in the near future.

Has anyone else had this issue happen to them or is it just me?



Cheers,
Travis
1 year ago
It works as it suppose to on mine.
1 year ago
There shouldn't have any issue. Maybe check if you have any JS error?


1 year ago
I have confirmed the issue and I'm kind of surprised that no one else has experienced it (yet).

It doesn't affect just the Chrome browser OR iPhones exclusively. It seems that it affects any resolution below 750px. For anyone who wants to recreate the issue, this is how to do it:

* Reduce your browser window resolution to BELOW 750px width (this will automatically collapse the admin sidebar).
* Click on any option on the admin sidebar to load a new page (IE: Configuration -> Settings).
* Once the Settings page loads, go back to the admin sidebar and hover your mouse over the menu options. You'll see that the menu layout starts moving all over the place.

Desktop screenshot showing issue here:


Now, I've found a fix for this - and I don't know whether it was a mistake by the programmers or if it breaks functionality somewhere, but it fixed the problem for me.

* Open the following file: \Areas\Admin\Views\Shared\_AdminLayout.cshtml
* Navigate to the bottom of the file. You will see a few javascript scripts.
* Find this particular section:

//save sidebar preferences
                $('a.sidebar-toggle').on('click', function () {
                    var collapsed = !$('body').hasClass('sidebar-collapse');
                    saveUserPreferences('@(Url.Action("SavePreference", "Preferences"))', '@hideSidebarAttributeName', collapsed);
                });

* Remove the "!" after "var collapsed = " (shown above in boldface). The new code should look as follows:
//save sidebar preferences
                $('a.sidebar-toggle').on('click', function () {
                    var collapsed = $('body').hasClass('sidebar-collapse');
                    saveUserPreferences('@(Url.Action("SavePreference", "Preferences"))', '@hideSidebarAttributeName', collapsed);
                });

The above worked for me and it hasn't caused me any issues since.

1 year ago
I found the same issue and the solution discovered by barfnuts worked perfectly for me.
1 year ago
Thanks for pointing out this bug. Here is a work item for it.
1 year ago
Done. Please see this commit for more details.
8 months ago
After some discussion, we revised the solution to this problem, because In the previous version of the solution, the state of the menu was not considered (minimized / maximized). We also added support for changing the screen orientation for mobile devices. Please see the details in  this commit.