Mobile View Admin Menu Panel Broken in Nop 4.1

Posted: August 04, 2018 at 2:33 AM Quote #209822
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
This post/answer is useful
0
This post/answer is not useful

Please login or register
to vote for this post.

(click on this box to dismiss)
Posted: August 04, 2018 at 9:19 AM Quote #209828
It works as it suppose to on mine.
This post/answer is useful
0
This post/answer is not useful

Please login or register
to vote for this post.

(click on this box to dismiss)
Dia [email protected]

Please vote for my comment if it is helpful for you.
Posted: August 04, 2018 at 2:51 PM Quote #209831
There shouldn't have any issue. Maybe check if you have any JS error?


This post/answer is useful
0
This post/answer is not useful

Please login or register
to vote for this post.

(click on this box to dismiss)
Lam Woon Cherk
https://www.pronopcommerce.com

Looking to double your store's sale? Check out this plugin: http://bit.ly/2YVP8GT
(And no, it's not about putting more marketing money to get more traffics)

Sign up to my mailing list for tons of tips on nopCommerce: http://bit.ly/2fg5fMy
Posted: August 13, 2018 at 7:19 AM Quote #210477
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.

This post/answer is useful
1
This post/answer is not useful

Please login or register
to vote for this post.

(click on this box to dismiss)
Posted: October 22, 2018 at 4:40 PM Quote #213461
I found the same issue and the solution discovered by barfnuts worked perfectly for me.
This post/answer is useful
0
This post/answer is not useful

Please login or register
to vote for this post.

(click on this box to dismiss)
Posted: October 23, 2018 at 1:57 AM Quote #213475
Thanks for pointing out this bug. Here is a work item for it.
This post/answer is useful
1
This post/answer is not useful

Please login or register
to vote for this post.

(click on this box to dismiss)
Interested in the dedicated Premium support services provided by core developers? Please visit http://www.nopcommerce.com/supportservices.aspx

Regards,
Maksim Romanov
Posted: October 23, 2018 at 9:46 AM Quote #213496
Done. Please see this commit for more details.
This post/answer is useful
1
This post/answer is not useful

Please login or register
to vote for this post.

(click on this box to dismiss)
Regards,
Dmitriy Kulagin
Posted: April 04, 2019 at 2:33 AM Quote #227035
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.
This post/answer is useful
1
This post/answer is not useful

Please login or register
to vote for this post.

(click on this box to dismiss)
Regards,
Dmitriy Kulagin
Premium support services
  • Dedicated premium support services provided by core developers are intended for persons who run mission critical websites, work on projects with tight deadlines, or want to get dedicated support.
Professional services
  • Want to open a new store? Want to take your store to the next level? Need a custom extension? We can customize nopCommerce to fit your store perfectly. Request a quote to get started.
eCommerce CONFERENCE 2019
Learn more